| |
|
|
| | Как правильно сделать список чтобы у каждого элемента списка была своя картинка-маркер?
создал Вот такой список:
http://img-fotki.yandex.ru/get/4510/myguest2011.0/0_38f25_b58e875e_M.jpg
<div id="menu8">
<ul>
<li><a href="#1"><span id="one"> Подсолнух</span></a></li>
<li><a href="#2"><span id="two"> Лютик</span></a></li>
<li><a href="#3"><span id="three"> Ромашка</span></a></li>
</ul>
</div>
|
сss-код:
#menu {
/** background: #333333; **/
float: left;
width: 250px;
height: 624px;
margin-top: 10px;
margin-right: 10px;
border: 1 solid black;
padding-right: 20px;
}
/* =-=-=-=-=-=-=-[Menu]-=-=-=-=-=-=-=- */
#menu a { clear:both;
}
#menu li a {
text-decoration: none;
}
#menu li a:link, #menu8 li a:visited {
color: #777;
display: block;
padding: 17px 0 0 20px;
margin: 0px 0px 10px 0px;
}
#menu li a:hover {
padding: 17px 0 0 20px;
margin: 0px 0px 10px 0px;
}
#menu li a:active {
color: #777;
padding: 17px 0 0 20px;
margin: 0px 0px 10px 0px;
}
#menu ul {
list-style-type: none;
border : 1px solid yellow;
}
#menu li {
border : 0px solid yellow;
}
/** добавление маленьких иконок возле элементов списка-меню **/
#one {
background: url(img/yelowflower.png) no-repeat;
border : 1px solid black;
padding: 10px 10px 10px 30px;
text-align : center;
}
#two {
background: url(img/redflower.png) no-repeat;
border : 1px solid black;
padding: 10px 10px 10px 30px;
}
#three {
background: url(img/blueflower.png) no-repeat;
border : 1px solid black;
padding: 10px 10px 10px 30px;
}
|
но почему-то при нажатии на эти ссылки-элементы списка они смещаются таким образом:
http://img-fotki.yandex.ru/get/4505/myguest2011.0/0_38f26_85b38d12_M.jpg
даже добавил #menu a { clear:both; } все равно элементы наезжают друг на друга
Подскажите, пожалуйста, может что-нибудь надо подправить, где может быть ошибка. и как её исправить. | |
| |
|
|
| |
|
|
| |
для: Newbie256
(28.08.2010 в 16:53)
| | | Зачем такие сложности?
Пользуйте list-style-image для пунктов меню и будет Вам Щастье :-)
<ul>
<li style="list-style-image: url(http://www.kolobok.us/smiles/standart/blush.gif)"><a href="#1"><span id="one">First</span></a></li>
<li style="list-style-image: url(http://www.kolobok.us/smiles/standart/bad.gif)"><a href="#2"><span id="two"Second</span></a></li>
<li style="list-style-image: url(http://www.kolobok.us/smiles/standart/dirol.gif)"><a href="#3"><span id="three">Third</span></a></li>
</ul>
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(28.08.2010 в 17:05)
| | | С list-style-image до кроссбраузерности ой как далеко - в разных браузерах и в разных версиях одного браузеоа маркеры начинают вести себя непредсказуемо. Зависит от многих факторов, в том числе и от Doctype и режима рендеринга.
Поэтому проще, чем background-image ничего нет. | |
| |
|
|
| |
|
|
| |
для: mihdan
(29.08.2010 в 00:55)
| | | >"С list-style-image до кроссбраузерности ой как далеко - в разных браузерах и в разных версиях одного браузеоа маркеры начинают вести себя непредсказуемо. Зависит от многих факторов, в том числе и от Doctype и режима рендеринга."
Слов много.
Среди множества слов много "умных".
Но, к сожалению, НИ ОДНОГО правильного слова НЕТ.
Свойство list-style-image - одно из самых "старых" и стабильных с точки зрения кроссбраузерности свойств.
Понимают ОДИНАКОВО браузеры его со следующих версий (коих уже практически НЕТ в реале):
Internet Explorer - с 4-й
Firefox (Gecko) - с 1.0 (1.0)
Opera - с 3.5-й
Safari (WebKit) - с 1-й
Любой Doctype и, соответственно, любые "режимы рендеринга" НИКАКИХ изменений в реализацию этого свойства не вносят.
Так что... "выстрел" Ваш - вхолостую. Не по делу.
Но - ГРОМКИЙ.
Ибо - "много умных слов". | |
| |
|
|
| |
|
|
| |
для: Newbie256
(28.08.2010 в 16:53)
| | |
<div id="menu">
<ul>
<li><a href="#1" id="one">Подсолнух</a></li>
<li><a href="#2" id="two">Лютик</a></li>
<li><a href="#3" id="three">Ромашка</a></li>
</ul>
</div>
|
.menu a {
display: block;
padding: 10px 10px 10px 30px;
background-repeat: no-repeat;
background-position: 0px 50%;
text-align: center;
border : 1px solid #000;
}
.menu a#one {
background-image: url(img/yelowflower.png);
}
.menu a#two {
background-image: url(img/redflower.png);
}
.menu a#three {
background-image: url(img/blueflower.png);
}
|
| |
| |
|
|
| |
|
|
| |
для: mihdan
(29.08.2010 в 01:00)
| | | Спасибо. | |
| |
|
|
