Горизонтальное меню с картинками
HTML kod:<ul class="navigation">CSS:
<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>
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHF6YrXuXe-uH28tlYak-B1Bx0PB0t0NXnNHeL5A3d-mL3iqe3znDhDyrUC1-IY9iOipceIFf90bIO_8hmDT48ZpcL7J1hKjIPHLMIwX9qQ9Z4eS_JocT-X_pubz_UH4cGekt8yXiC7FwU/s200/uwblogger.png);
}
.navigation .uwblogger1 a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMOtR10u44ga67Bp2jWKpha29qI87zpdjbg2lD-zHKYs4yo7A3e62Z7iJtPVxwXCyLUKQ8YZnC5nMYVv3UjI9olLcHLOfbgRfUaHlM64HWwcrLVDfXD_m3Z2mC2l0eV0Tr8BhFVU8OodP/s1600/uwblogger1.png);
}
.navigation .uwblogger2 a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdsr8y4O96k6OOdQEp01isjCj5AGj841_8OzvREudr2pYDNh5FE0TdNFGf27mugjrZ9NhqbugiTj12JmzNgGpKcefD-GQ593yGEo7Fqg6HGQH94im8dIFCCxCmc6xBnXfQZFoN0HErVqa/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHF6YrXuXe-uH28tlYak-B1Bx0PB0t0NXnNHeL5A3d-mL3iqe3znDhDyrUC1-IY9iOipceIFf90bIO_8hmDT48ZpcL7J1hKjIPHLMIwX9qQ9Z4eS_JocT-X_pubz_UH4cGekt8yXiC7FwU/s200/uwblogger.png);
}
.navigation .uwblogger1 a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMOtR10u44ga67Bp2jWKpha29qI87zpdjbg2lD-zHKYs4yo7A3e62Z7iJtPVxwXCyLUKQ8YZnC5nMYVv3UjI9olLcHLOfbgRfUaHlM64HWwcrLVDfXD_m3Z2mC2l0eV0Tr8BhFVU8OodP/s1600/uwblogger1.png);
}
.navigation .uwblogger2 a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdsr8y4O96k6OOdQEp01isjCj5AGj841_8OzvREudr2pYDNh5FE0TdNFGf27mugjrZ9NhqbugiTj12JmzNgGpKcefD-GQ593yGEo7Fqg6HGQH94im8dIFCCxCmc6xBnXfQZFoN0HErVqa/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHF6YrXuXe-uH28tlYak-B1Bx0PB0t0NXnNHeL5A3d-mL3iqe3znDhDyrUC1-IY9iOipceIFf90bIO_8hmDT48ZpcL7J1hKjIPHLMIwX9qQ9Z4eS_JocT-X_pubz_UH4cGekt8yXiC7FwU/s200/uwblogger.png);
}
.navigation .uwblogger1 a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMOtR10u44ga67Bp2jWKpha29qI87zpdjbg2lD-zHKYs4yo7A3e62Z7iJtPVxwXCyLUKQ8YZnC5nMYVv3UjI9olLcHLOfbgRfUaHlM64HWwcrLVDfXD_m3Z2mC2l0eV0Tr8BhFVU8OodP/s1600/uwblogger1.png);
}
.navigation .uwblogger2 a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdsr8y4O96k6OOdQEp01isjCj5AGj841_8OzvREudr2pYDNh5FE0TdNFGf27mugjrZ9NhqbugiTj12JmzNgGpKcefD-GQ593yGEo7Fqg6HGQH94im8dIFCCxCmc6xBnXfQZFoN0HErVqa/s200/uwblogger2.png);
}
.navigation li a:hover {
color: #0000CC;
}
]]></b:skin>
