расположение логотипа и навигационных ссылок не выравнивается

Скриншот проблемы:

http://i36.tinypic.com/dfxdmd.jpg

Желтый блок - это логотип, а синий - навигационные ссылки (я их отключил). Я хотел бы выровнять ссылки внизу, чтобы они прилипали к верхней части содержимого тела (белая рамка). Как бы я это сделал? Вот соответствующие CSS и HTML.

#header {
    height: 42px;
}
#logo {
    width: 253px;
    height: 42px;
    background-image:url(logo.png);
    float: left;
}
#nav {
    width: 100%;
    border-bottom: 2px solid #3edff2;
    vertical-align: bottom;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 4px;
    text-align: right;
    font-size: 1.25em;
}
#nav ul li {
    display: inline;
    background-color: #3edff2;
    padding: 5px;
}

    <div id="header">
        <div id="logo"><a href="/"></a></div>
        <div id="nav">
            <ul>
            <li><a href="#">*****</a></li>
                            [...]
            </ul>
        </div>
    </div>

Заранее спасибо.

13.12.2008 03:02:25
3 ОТВЕТА

Внизу слева? Если это так - начните с установки clear: both;в вашем блоке #nav.

Кроме этого, я не очень понимаю ваш вопрос - вы можете сделать JPG, как вы хотели бы, чтобы он выглядел?

0
13.12.2008 03:08:07

Попробуй это. Кажется, работает в Firefox / Mac

#header {
    height: 42px;
}
#logo {
    width: 253px;
    height: 42px;
    background: #00ffff;
    float: left;
}
#nav {
    width: 100%;
    border-bottom: 2px solid #3edff2;
    height: 42px;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding-top: 18px;
    margin-bottom: 4px;
    text-align: right;
    font-size: 1.25em;
}
#nav ul li {
    display: inline;
    background-color: #3edff2;
    padding: 5px;
}
1
13.12.2008 03:31:31
Это работает на FF / XP. Для IE мне пришлось добавить атрибут margin-top: -20px к элементу страницы.
phpscriptcoder 13.12.2008 13:29:50
Хотя, если бы пользовательские шрифты были немного другими (Linux?), Это не было бы немного смещено?
phpscriptcoder 13.12.2008 13:30:25

Вы можете использовать абсолютное позиционирование следующим образом:

#header {
    position: relative;

    height: 42px;
}
#nav {
    position: absolute;
    bottom: 0px;

    width: 100%;
    border-bottom: 2px solid #3edff2;
    height: 42px;
}

в этом методе вы делаете "nav" с абсолютным позиционированием, связанным с разделением "header".

0
15.12.2008 10:01:28