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

Моя разметка выглядит следующим образом:Как это сделать в CSS

<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 оказал это так, как я имел в виду.

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

источник

2011-01-20 jcuenod

Если вы используете div '# wrap' с шириной набора (например,' 860px' или что-то еще), тогда вы не столкнетесь с этой проблемой, так как всегда будет достаточно места. Затем просто используйте «margin: 0 auto;», и ваш макет всегда будет центрироваться на странице. – Andrew

Я не хочу фиксированной ширины. – jcuenod

делают тег в качестве элемента блока:

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

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

источник

2011-01-20 19:31:40 Abudayah

Это ничего не делало. – jcuenod

попробуйте еще раз с 100px – Abudayah

мои ссылки не фиксированные ширины - «Disney Land» и «Home» не нужны 100px. – jcuenod

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

источник

2011-01-24 12:07:02 Mahima

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

ответ

Смежные вопросы