Выравнивание меню навигации с помощью CSS - PullRequest
Новая
       23

Выравнивание меню навигации с помощью CSS

0 голосов
/ 21 марта 2012

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

Таким образом, меню состоит из 3 пунктов.

  1. Логотип
  2. Верхний ряд меню навигации (2 пункта, язык и специальная кнопка)
  3. Нижний ряд меню навигации (5 пунктов)

Цель:
Моя конечная цельчтобы получить два ряда друг над другом, чтобы выровнять по правой стороне (что я уже успел) и логотип с левой стороны.Далее логотип должен быть выровнен снизу с нижним рядом меню навигации.

См. Изображение: http://i39.tinypic.com/2qa2zys.png

КОД HTML: 

  <nav>
      <ul> 
      <li>
           <img src="images/lang.png" alt="Language" /></a>
        </li>
        <li>
         <a href="#" class="lang">NEDERLANDS</a>
        </li>
        <li>
           <a href="#" class="special">SPECIAL</a>
        </li>
    </ul>
        <a href="#"> <img src="images/logo.png" alt="Logo" class="logo"/></a>
      <ul>

        <li>
           <a href="#" class="selected">HOME</a>
        </li>
        <li>
           <a href="#" >HOE WERKT HET?</a>
        </li>
        <li>
           <a href="#">HELP</a>
        </li>
        <li>
           <a href="#">PRIJZEN & AANMELDEN</a>
        </li>
        <li>
           <a href="#">INLOGGEN</a>
        </li>
     </ul>
  </nav>

CSS: 

body { 
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background: #f2f2f2;
    font-family: Droid Sans ,Arial,'Liberation Sans',FreeSans,sans-serif;
    line-height: 14px;
    display:block; }


header nav li {
float:left;
margin-right:50px;
list-style: none;
text-decoration: none;
vertical-align: text-bottom;
}


header nav a {
font-weight: bold;
font-family: PT Sans;
text-decoration: none;
font-size: 14px;
color: #333333;
text-shadow: white 1px 1px 1px;
}

header nav a:hover, a:active {
color: #0065f5;
}
header nav  .selected {
text-decoration:underline;
}

header nav ul {
float: right;
margin-top:10px;
margin-bottom:10px;
}

.special {
text-decoration:none;
color: white;
background: #0065f5;
padding:5px 15px;
text-shadow: #333333 1px 1px 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.special:hover {
 color: #fed000;
}

.logo {
float:left;
margin-top: 30px;
}

1 Ответ

0 голосов
/ 21 марта 2012

Вы можете плавать влево от логотипа и дать margin-top с тем же количеством пикселей, что и высота языкового меню.Или используйте position: absolute.

Но что именно вы не достигли? jsFiddle выглядит нормально, но, возможно, изображения (которые отсутствуют) расположены неправильно.

...