Верстка меню разделенного по центру логотипом

Тема в разделе "Верстка", создана пользователем Drunk Monkey, 3 ноя 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Drunk Monkey

    Drunk Monkey Постоялец

    Регистр.:
    7 июн 2012
    Сообщения:
    105
    Симпатии:
    17
    Джентльмены и немногие леди, подскажите как правильно верстать список навигации разделенный логотипом?

    Примеры:

     
  2. qpPeW

    qpPeW Постоялец

    Регистр.:
    5 окт 2009
    Сообщения:
    80
    Симпатии:
    31
    один из вариантов
    HTML:
    <div class="header">
    <ul class="nav-left">
    <li><a href="#">Первый пункт</a></li>
    <li><a href="#">Второй пункт</a></li>
    <li><a href="#">Третий пункт</a></li>
    </ul>
    <a href="#" class="logotype">LOGOTYPE</a>
    <ul class="nav-right">
    <li><a href="#">Четвертый пункт</a></li>
    <li><a href="#">Пятый пункт</a></li>
    <li><a href="#">Шестой пункт</a></li>
    </ul>
    </div>
    HTML:
    .header {
    position: relative;
    height: 100px;
    }
    .header .nav-left {
    float: left;
    }
    .header .nav-right {
    float: right;
    }
    .header .logotype {
    background: url("logo.png") no-repeat;
    position: absolute;
    top: 0;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-left: -100px;
    }
    вообще много способ реализации есть )
     
    Последнее редактирование: 3 ноя 2014
    Qurste и Drunk Monkey нравится это.
  3. Drunk Monkey

    Drunk Monkey Постоялец

    Регистр.:
    7 июн 2012
    Сообщения:
    105
    Симпатии:
    17

    Этот вариант напрашивается в первую очередь, но насколько это семантическая верстка?


    Понравился этот вариант предложенный на htmlbook http://codepen.io/wolfcry911/pen/HyLdg
     
  4. qpPeW

    qpPeW Постоялец

    Регистр.:
    5 окт 2009
    Сообщения:
    80
    Симпатии:
    31
    тогда уж лучше так
    HTML:
    <div class="header">
    <ul>
    <li><a href="#">Первый пункт</a></li>
    <li><a href="#">Второй пункт</a></li>
    <li><a href="#">Третий пункт</a></li>
    <li><a href="#" class="logotype">LOGOTYPE</a></li>
    <li><a href="#">Четвертый пункт</a></li>
    <li><a href="#">Пятый пункт</a></li>
    <li><a href="#">Шестой пункт</a></li>
    </ul>
    </div>
    HTML:
    .header .logotype {
    display: block;
    width: 200px;
    height: 100px;
    }
     
  5. mindnomind

    mindnomind Писатель

    Регистр.:
    11 ноя 2014
    Сообщения:
    6
    Симпатии:
    1
    Код:
    <div class="header">
    <ul>
    <li><a href="#">Первый пункт</a></li>
    <li><a href="#">Второй пункт</a></li>
    <li><a href="#">Третий пункт</a></li>
    <li><a href="#">Четвертый пункт</a></li>
    <li><a href="#">Пятый пункт</a></li>
    <li><a href="#">Шестой пункт</a></li>
    </ul>
    <img id="logo" src="logo.png" />
    </div>
    Код:
    .header {position:relative;}
    .header ul {z-index:10;}
    .header ul > li:nth-child(3)
    {
       margin-right:100px;
    }
    .header ul > li:nth-child(4)
    {
       margin-left:100px;
    }
    #logo {position:absolute;left:50%;display:block;z-index:20;}
    
    ну и остальные стили классически прописать. можно img в див завернуть еще
     
  6. qpPeW

    qpPeW Постоялец

    Регистр.:
    5 окт 2009
    Сообщения:
    80
    Симпатии:
    31
    не верно, в ваших стилях нету выравнивания лого по центру...
     
Статус темы:
Закрыта.