HTML and CSS Reference
In-Depth Information
The layout rules are fairly straightforward: the “join a room” form will float right, the “create a room” form will
float left, and the labels and inputs need to stack vertically. Implement these rules by inserting the code shown below
before the first footer rule in the “Layout” section of main.css :
section {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
form {
float: left;
width: 460px;
text-align: center;
}
form#attending { float: right; }
label {
display: block;
width: 430px;
margin: 0 auto 1em;
text-indent: 2px;
text-align: left;
}
input {
margin: .25em 0 0;
padding: .375em .875em;
}
label input {
display: block;
width: 400px;
margin: 0;
padding: .375em 15px;
border: 2px solid #1f1b0c;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: inset 2px 2px 14px rgba(31, 27, 12, .3);
box-shadow: inset 2px 2px 14px rgba(31, 27, 12, .3);
}
Save these changes and reload the page in your browser. At this point, the home view is nearly complete
(see Figure 7-10 ).
 
Search WWH ::




Custom Search