HTML and CSS Reference
In-Depth Information
Notice the unordered list ( <ul> ) that holds our navigation links. Now let's add some CSS:
.logo {
float: left;
margin-left: 145px;
margin-top: -34px;
position: relative;
top: 34px;
nav {
float: right;
margin-right: 177px;
padding-top: 20px;
nav ul {
list-style: none;
margin: 0;
padding: 0;
nav ul li {
display: inline-block;
*display: inline; /* for IE7 */
margin-right: 30px;
There's a lot going on here, some of which you'll recognize from earlier in the topic, but let's
break down the new bits of code.
First,we'reusingrelativepositioningalongwiththetoppropertytopushour .logo element
down from its original position. Relative positioning used in this way moves an element but
allows the original space it occupies to remain intact. We're doing this so that the bottom
edge of the logo will overlap the .promo section, which is what the design in our Photoshop
mockup requires.
Search WWH ::

Custom Search