CSS Nav Menu Text - редкое поведение по размеру - PullRequest
Новая
       39

CSS Nav Menu Text - редкое поведение по размеру

0 голосов
/ 05 июля 2011

Данная страница находится по следующему адресу:

http://richiesportfolio.com/temp-site-tester/index.html

Как вы можете видеть, изображения выровнены по верху навигационного меню, но если я добавлю текст в ссылку, текст станет высотой навигационного меню и выровняется по низу. Я понятия не имею, как это происходит.

Вот некоторые из CSS, остальные вы можете просто просмотреть на странице источника ссылки, которую я вам дал. 

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;


    }

1 Ответ

0 голосов
/ 05 июля 2011

Это #nav li и его display: inline;

Я бы посоветовал вам взглянуть на это .. это хороший способ центрировать ваше меню.(в большинстве случаев ..)

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

...