Максим Покровский

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.

Сейчас работаю над:


  • Разработка одного стартапа

    Текущий статус - разработка дизайн.

  • Много всего для popsop.com

 Заказать мне работу

Рубрики / Теги

Последние записи

RSS лента 320 читателей
16.08

Центрирование “плавающего” меню
Комментарии (5) CSS

Потрясающее в своей элегантности решение. Обязательно должно быть на заметке у каждого.

html, body {
    margin: 0; padding: 0;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    background-color: #fff;
}

.navi {
    width: 775px; /*Устанавливаем фиксированную ширину*/
    position: relative;
    overflow: hidden;
    font-size: .8em;
    border: 1px dotted red;
    text-align: center;
    margin: 5px auto;
}

.navicontainer {
    float: left;
    left: 50%; /*Сдвигаем влево на 50%*/
    position: relative;
    text-align: center;
    border: 1px dotted green;
}

.wrpr {
    position: relative;
    left: -50%; /*Возврашаем меню точно в центр*/
    float: left;
    list-style: none;
    margin: 0; padding: 0;
    border: 1px dotted blue;
}

.navi a, .navi li  {
    float: left;
    padding: 10px; margin: 0;
    color: #3B6783;
    font-weight: bold;
    text-decoration: none;
}

.navi li {padding: 0; margin: 0;}

.navi a:hover {
    text-decoration:none;
    background: lightblue url(navirobg.gif) repeat-x 0 0;
}

.navi li a:hover {
    background: lightblue url(navirobg.gif) repeat-x 0 0;
}

Раскладка включает в себя два блока для позиционирования и собственно меню

<div class="navi">
    <div class="navicontainer">
        <ul class="wrpr">
            <li><a href="#">Item # 1</a></li>
            <li><a href="#">Next item (# 2)</a></li>
            <li><a href="#">Do you have another item?</a></li>
            <li><a href="#">#4</a></li>
            <li><a href="#">What about more</a></li>
            <li><a href="#">Done</a></li>
        </ul>
    </div>
</div>

Рабочий пример
Автор: Alex Mauzon

Добавить в закладки
Метки:,

Комментарии

  1. 1
    Alex Mauzon (10.11.2007) #

    Вас не затруднит ссылку на источник залинковать? Буду весьма благодарен.

    Спасибо.

  2. 2
    le`Mur (10.11.2007) #

    Запросто :)

  3. 3
    Vladimir (10.03.2008) #

    По поводу авторства… Я могу ошибаться, но имхо оригинал статьи здесь: http://pmob.co.uk/pob/centred-float.htm

  4. 4
    Максим Покровский (10.03.2008) #

    Ну я именно оттуда взял )
    Может же человек придумать уже существующий метод. Кстати, не факт что на автор pmob.co.uk придумал метод первым :)

  5. 5
    Vladimir (11.03.2008) #

    Кстати, не факт что на автор pmob.co.uk придумал метод первым

    Я сегодня с ним связывался (я нашел решение для центрирования многострочных меню; если интересно, оно здесь), попутно задал вопрос об авторстве. Он мне ответил: “The centred floats is my invention but I don’t think anyone can really claim to invent anything in CSS as other people may well have used the same technique but just not published it.” :-)

Оставить комментарий

Вы можете использовать простые теги форматирования HTML (вроде <a>, <ul> and others). Чтобы вставить пример код, используйте
<code lang="php">$a = "hello";</code> (поддерживаемые языки: ruby, php, yaml, html, css, csharp, javascript). Также Вы можете использовать <code>$a = "hello";</code>, синтаксис не будет подсвечен. Если вы не хотите использовать тег <code>, замените символ < на &lt;


!

Самое обсуждаемое

Они читают меня, я читаю их

— Как предоплата мобилизует отоношения - так и и гибкость в отношениях позволяет зарабатывать больше
комментарий заказчика к статье http://pokrovskii.com/predoplata-i-druzya

Rambler's Top100