27 февр. 2012 г.

Меню с картинками (blogger)

Мой blogger. Seo оптимизация

tweetn

Горизонтальное меню с картинками

HTML kod:
<ul class="navigation">
<li class="uwblogger"><a href="#">Uwblogger</a></li>
<li class="uwblogger1"><a href="#">Uwblogger1</a></li>
<li class="uwblogger2"><a href="#">Uwblogger2</a></li>
</ul>
CSS:
    .navigation {
        list-style: none; /* прячем маркеры */
        margin: 30px;
    }
    .navigation li {
        float: left; /* выстраиваем элементы списка в один ряд */
        margin-right: 15px; /* делаем отступ чтобы пункты меню не сливались */
    }
    .navigation li a {
        display: block;
        text-align: center;
        padding-top: 100px; /* внутренний остту чтобы текст был вне фона */
        color:  #585858;
        background-position: center top; /* выравниваем фон вверх и по центру */
        background-repeat: no-repeat;
        width: 120px; /* размеры указываем чтобы картинки полностью отобразились */
        height: 50px;
    }
    * html .navigation li a { /* хак для IE6, который иначе трактует блочную модель */
        height: 150px;
    }
    .navigation .uwblogger a {
        background-image: url(http://4.bp.blogspot.com/-WnoclRgd08o/T0uRKcY990I/AAAAAAAAA6M/avh6fH_zAzQ/s200/uwblogger.png);
    }
    .navigation .uwblogger1 a {
        background-image: url(http://3.bp.blogspot.com/-aquRkr_6gA0/T0uRK07WTcI/AAAAAAAAA6g/ET562j_ztr8/s1600/uwblogger1.png);
    }
    .navigation .uwblogger2 a {
        background-image: url(http://4.bp.blogspot.com/-MJQp36Mc_Yk/T0uRKusQ5SI/AAAAAAAAA6Y/ZXI3e9oL64A/s200/uwblogger2.png);
    }
    .navigation li a:hover {
        color: #0000CC;
    }

CSS код вставляем как обычно выше  ]]></b:skin>

    Попробуем убрать обтекание текста. Надписи должны быть примерно одинакового размера, чтобы эстетично выглядеть Код CSS будет выглядеть так (выделено, то что изменилось (добавилось)):

    .navigation {
        list-style: none; /* прячем маркеры */
        margin: 30px;
    }
    .navigation li {
        float: left; /* выстраиваем элементы списка в один ряд */
        margin-right: 15px; /* делаем отступ чтобы пункты меню не сливались */
    }
    .navigation li a {
        display: block;
        text-align: center;
        padding-top: 100px; /* внутренний остту чтобы текст был вне фона */
        color:     #585858;
        background-position: center top; /* выравниваем фон вверх и по центру */
        background-repeat: no-repeat;
        width: 120px; /* размеры указываем чтобы картинки полностью отобразились */
        height: 100px;
    overflow:hidden;
    zoom:1; /* для IE6*/
    }
    * html .navigation li a { /* хак для IE6, который иначе трактует блочную модель */
        height: 150px;
    }
    .navigation .uwblogger a {
        background-image: url(http://4.bp.blogspot.com/-WnoclRgd08o/T0uRKcY990I/AAAAAAAAA6M/avh6fH_zAzQ/s200/uwblogger.png);
    }
    .navigation .uwblogger1 a {
        background-image: url(http://3.bp.blogspot.com/-aquRkr_6gA0/T0uRK07WTcI/AAAAAAAAA6g/ET562j_ztr8/s1600/uwblogger1.png);
    }
    .navigation .uwblogger2 a {
        background-image: url(http://4.bp.blogspot.com/-MJQp36Mc_Yk/T0uRKusQ5SI/AAAAAAAAA6Y/ZXI3e9oL64A/s200/uwblogger2.png);
    }
    .navigation li a:hover {
        color: #0000CC;
    }

Можно добавить text-decoration:none;  , чтобы не было подчеркивания при наведении мышки
Для обводки блоков  border: solid 1px #FF931E;  можно скруглить края, но так как это не работает в IE, то нет особого смысла
Обвести блоки можно интерессней, задав стиль обводки например так:
       border: solid 1px #FF931E;
       border-style:outset;
Если мы не хотим центрировать текст, то можем его расположить выравнивая по левому краю text-align: left;
и тогда(если вы используете обводку) можно сделать отступ от левого края блока:

padding-left: 10px;

Можно поменять размер шрифта в блоке:font-size: 90%;


Поменяю код на нижеприведенный, изменения выделены цветом, пример как это выглядит вверху, разумеется что там вы видите последний вариант:

    .navigation {
        list-style: none; /* прячем маркеры */
        margin: 30px;
    }
    .navigation li {
        float: left; /* выстраиваем элементы списка в один ряд */
        margin-right: 15px; /* делаем отступ чтобы пункты меню не сливались */
    }
    .navigation li a {
        display: block;
       border: solid 1px #FF931E;
       border-style:outset;
        text-align: left;
         /* padding-top: 100px; внутренний оступ чтобы текст был вне фона */
       padding-left: 120px;
       font-size: 70%;
        color:     #585858;
        text-decoration:none;
        background-position: left top; /* выравниваем фон вверх и по центру */
        background-repeat: no-repeat;
        width: 100px; /* размеры указываем чтобы картинки полностью отобразились */
        height: 90px;
    overflow:hidden;
    zoom:1; /* для IE6*/
    }
    * html .navigation li a { /* хак для IE6, который иначе трактует блочную модель */
        height: 150px;
    }
    .navigation .uwblogger a {
        background-image: url(http://4.bp.blogspot.com/-WnoclRgd08o/T0uRKcY990I/AAAAAAAAA6M/avh6fH_zAzQ/s200/uwblogger.png);
    }
    .navigation .uwblogger1 a {
        background-image: url(http://3.bp.blogspot.com/-aquRkr_6gA0/T0uRK07WTcI/AAAAAAAAA6g/ET562j_ztr8/s1600/uwblogger1.png);
    }
    .navigation .uwblogger2 a {
        background-image: url(http://4.bp.blogspot.com/-MJQp36Mc_Yk/T0uRKusQ5SI/AAAAAAAAA6Y/ZXI3e9oL64A/s200/uwblogger2.png);
    }
    .navigation li a:hover {
        color: #0000CC;
    }

]]></b:skin>
Похожие сообщения в конце поста