The page in question is at the following address:
http://richiesportfolio.com/temp-site-tester/index.html
As you can see the images align to the top of the nav menu but if I put text in the link the text becomes the height of the nav menu and aligns to the bottom. I have no idea how this is happening.
Here is some of the CSS the rest you can just 开发者_运维百科view the page source of the link I gave you.
body, html { background: #e6f3f7; text-align: center; height: 100%; font-face:Verdana, Geneva, sans-serif; }
#page_wrapper {
background: url(images/bg_slice.jpg) repeat-x #e6f3f7;
}
.page {
margin:0 auto;
width: 1000px;
overflow: hidden;
padding-bottom: 35px;
}
#page {
background: url(images/header.jpg) no-repeat #e6f3f7;
overflow: hidden;
}
#nav {
height: 55px;
margin-top: 150px;
list-style: none;
}
#nav li{
display: inline;
}
#nav li img {
margin:0 10px;
}
#nav li a {
font-size: 24px;
margin-left: 10px;
margin-right: 10px;
margin-top:0px;
color: #fff;
}
#nav li.current a {
}
#nav li a:hover {
}
span {
font-family: Myriad Pro;
font-weight: bold;
margin-top:0;
}
h1 { margin: 35px;
color:#022c4d;
}
p { margin-left:35px;
color:#6492a3;}
#content {
margin: 150px auto;
}
#column1 {
float:left;
width:650px;
background: url(images/content_bg.png);
height:650px;
text-align:left;
}
#column2 {
float:left;
width:277px;
margin-left:50px;
}
I'ts the #nav li
and its display: inline;
I would suggest you look at this.. this is a good way of centering your menu. ( in most cases.. )
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
精彩评论