Как это сделать в CSS - PullRequest
Новая
       4

Как это сделать в CSS

0 голосов
/ 20 января 2011

Моя разметка выглядит так: 

<div class="header-section">
    <a href="#" class="logo"><img src="logo.png" /></a>
    <div class="navigation">
        <ul>
            <li><a href=# class="active">Home</a></li>
            <li><a href=#>Bakery</a></li>
            <li><a href=#>Fishery</a></li>
            <li><a href=#>Casino</a></li>
            <li><a href=#>Disney Land</a></li>
        </ul>
    </div>
    <div style="clear:both" />
</div>

и css имеет значение: 

.header-section {
    margin: 30px 0;
}

.header-section .logo {
    float: left;
}
.header-section .logo img{
    border: 0;
}
.header-section .navigation {
    float: right;
    margin-top: 23px;
}
.header-section .navigation ul {
    list-style: none;
}
.header-section .navigation ul li{
    font-size: 18px;
    font-family: Tahoma, Arial, Verdana;
    float: left;
    margin: 0 20px;
}

Таким образом, ссылки отформатированы в горизонтальной линии справа от логотипа. Первоначально у меня была идея сделать так, чтобы они просто переносились, когда экранная область не позволяла им находиться в одной строке, но потом произошло то, что перед переносом они оказались ниже логотипа. Я был доволен этим, пока не увидел - по иронии судьбы - IE изобразил это так, как я думал.

Итак, мой вопрос - как получить ссылки для переноса, прежде чем просто щелкнуть под изображением логотипа?

Ответы [ 2 ]

0 голосов
/ 24 января 2011

Попробуйте поставить <a href="#" class="logo"><img src="logo.png" /></a> после navigation div end и исправить ширину обеих секций ... Это должно работать

0 голосов
/ 20 января 2011

сделать тег как элемент блока:

и добавьте ширину и высоту .. 

.header-section a {
display:block;
width:100px;
height:100px;
}
...