Нужна помощь с css, меню на css

stylus83 · 05.04.2013

Привет всем, есть меню, как его сделать чтобы оно ниже было и правее, т.е. ЦЕНЫ рядом с монетами, ВАЖНАЯ ИНФОРМАЦИЯ - рядом с рупором, Сертификаты - рядом с кубком, если всё двигать, то получается криво. CSS прилагаю ниже

/* CSS Document */
body {
font-size:14px;
font-family: Arial, Helvetica, sans-serif;
width:100%;
min-width:1000px;
margin:0;
padding:0;
position:fixed;
background-color: #fff;
background-image: url(image/top-menu.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#img {
background:url(image/header.jpg) no-repeat center;
weight:100%;
height:299px;
}
#top-menu{
height:89px;
padding-top:298px;
background-image: url(image/top-menu.jpg);
background-repeat: no-repeat;
background-position: center bottom;
width:100%;
list-style-position: outside;
top: 50px;
}
#top-menu a {
color:red;
padding-left: 290px;
padding-top: 100px;
text-decoration:underline;
}
#top-menu a:hover {
text-decoration:none;
}

motek · 05.04.2013

добавьте html код самого меню

stylus83 · 05.04.2013

motek сказал(а):
добавьте html код самого меню

<body>
<div id="img">
<div id="top-menu">
<div align="justify">
<span class="стиль3">
<a href="http://www.google.ru" >Цены</a>
<a href="http://www.yandex.ru" >Важная информация </a>
<a href="http://www.yandex.ru" >Сертификаты</a> </span> </div>
<div id="main">
<div id="main-inner">
</div>
</div>
</div>
</div>

</body>

motek · 05.04.2013

используйте кнопку "код" в редакторе

html

Код:

<body>

<div id="img">
<div id="top-menu">
<a href="http://www.google.ru" >Цены</a>
<a href="http://www.yandex.ru" >Важная информация </a>
<a href="http://www.yandex.ru" >Сертификаты</a>
<div id="main">

<div id="main-inner">
</div>
</div>
</div>
</div>

</body>

css

Код:

body {
font-size:14px;
font-family: Arial, Helvetica, sans-serif;
width:100%;
min-width:1000px;
margin:0;
padding:0;
position:fixed;
background-color: #fff;
}
#img {
background:url(image/header.jpg) no-repeat center;
weight:100%;
height:299px;
}
#top-menu{
height:89px;
padding-top:298px;
background-image: url(image/top-menu.jpg);
background-repeat: no-repeat;
background-position: center bottom;
width:100%;
list-style-position: outside;
top: 50px;
}
#top-menu a {
color:red;
float:left;
margin-left: 290px;
text-decoration:underline;
}
#top-menu a:hover {
text-decoration:none;
}

но грамотнее вырезать иконку и подгрузить фоном самой ссылке, а не подгонять ссылку под иконку

stylus83 · 05.04.2013

motek сказал(а):
но грамотнее вырезать иконку и подгрузить фоном самой ссылке, а не подгонять ссылку под иконку

Попробую так сделать

stylus83 · 05.04.2013

motek сказал(а):
но грамотнее вырезать иконку и подгрузить фоном самой ссылке, а не подгонять ссылку под иконку

Что то у меня не получается, это нужно к каждой картинке приделать <div>? Или как лучше сделать?

motek · 05.04.2013

stylus83 сказал(а):
motek сказал(а):

но грамотнее вырезать иконку и подгрузить фоном самой ссылке, а не подгонять ссылку под иконку

Нажмите, чтобы раскрыть...

Что то у меня не получается, это нужно к каждой картинке приделать <div>? Или как лучше сделать?

задаем ссылке размеры, добавляем Id и назначаем display: inline-block; , подгружаем картинку в левую часть ссылки и смещаем паддингом текст вправо, чтобы он не перекрывал картинку

Нужна помощь с css, меню на css

stylus83

New Member

motek

злой как @

stylus83

New Member

motek

злой как @

stylus83

New Member

stylus83

New Member

motek

злой как @

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей