| |
|
|
| | Я не очень силен в css, в основном делаю из Dreamweaver. Хочу вывести иерархическую структуру, а вместо маркера выводить изображение "+" и "-" в зависимости от вложенности рубрики. Изображение появляется вместе с маркером списка. Прописываю в стиле list-s tyle-type: none;, но непомогает. Привожу весь код
<style>
li {
list-style-type: none;
list-style-image:url(image/ch.gif); # кружок
margin: 0px;
padding: 0px;
list-style-position: inside;
}
ul.closed {
display:none;
}
ul.open {
display:block;
}
/* Для узлов с потомками: */
li.nodclosed {
list-style-type: none;
list-style-image:url(image/fldclose.png); # плюс
}
li.nodopen {
list-style-type: none;
list-style-image:url(image/fldopen.png); # минус
}
</style>
<script language="javascript">
function displayitem(thisobj,xid){ // показ/сокрытие подсписков
thisobj.className=='nodopen'?
thisobj.className='nodclosed':thisobj.className='nodopen';
document.getElementById(xid).className =
document.getElementById(xid).className=="closed"? "open": "closed";
}
</script>
<ul><b>Мой список</b>
<li>Один</li>
<li>Два</li>
<li class="nodclosed" onclick="displayitem(this,'p3')">Три
<ul class="closed" id="p3" onclick="event.cancelBubble=true">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="nodclosed" onclick="displayitem(this,'p4')">Четыре
<ul class="closed" id="p4" onclick="event.cancelBubble=true">
<li class="nodclosed" onclick="displayitem(this,'p41')">4.1
<ul class="closed" id="p41" onclick="event.cancelBubble=true">
<li>4.1.1</li>
<li>4.1.2</li>
<li>4.1.3</li>
</ul>
</li>
<li>4.2</li>
</ul>
</li>
<li>Пять</li>
<li>Шесть</li>
</ul>
|
Помогите пожалуйста | |
| |
|
|
| |
|
|
| |
для: Diman
(20.02.2010 в 15:32)
| | | Проблема у вас в маргине.
Нельзя его обнулять, ибо: "If the left margin of the list item is set to 0 using one of the margin properties, the list-item markers do not show. The margin should be set to a minimum of 30 points."
Потому укажите
margin-top: 0; margin-bottom: 0; margin-right: 0;
|
а левый маргин вовсе не трогайте (и не надо прописывать значение auto, как кое-где советуют).
Обязательно укажите list-style-type: none; для родительского тега - для <UL>.
Ну а для тега <LI> у вас всё в порядке.
Первым должен быть указан list-style-type: none;, а вторым list-style-image: url(...);.
Как у вас и сделано. Ибо если вдруг картинка не подгрузится, то будет использовано правило для list-style-type. | |
| |
|
|
| |
|
|
| |
для: АЯ
(20.02.2010 в 22:24)
| | | Также всё осталось. Надо было раньше написать. Ну да ладно, пишу сейчас. Этот файл у меня подгружается include из основного, где присоединены внешние стили для сайта. Может быть они как-то перебивают эти стили? Но как я знаю, глобальные стили которые я указываю в выше указанном файле всегда пребивают внешние. Вроде бы проблем не должно было бы быть. Проверил как отдельный файл html, а не php формат, то всё работает. А при вызове из основного как php не работает. Хотя все ваши замечания принял. Вроде всё должно идти как по маслу, но не идет.
Приведу еще раз полностью стили, что у меня получилось
<style>
li {
list-style-type: none;
list-style-image:url(image/ch.gif); # кружок
list-style-position: inside;
margin-top: 0; margin-bottom: 0; margin-right: 0;
}
ul{
list-style-type: none;
}
/* Для узлов с потомками: */
li.nodclosed {
list-style-type: none;
list-style-image:url(image/maximize.gif); # плюс
}
li.nodopen {
list-style-type: none;
list-style-image:url(image/minimize.gif); # минус}
ul.closed {
list-style-type: none;
display:none;
}
ul.open {
list-style-type: none;
display:block;
}
</style>
|
| |
| |
|
|
| |
|
|
| |
для: diman
(21.02.2010 в 13:43)
| | | >"как я знаю, глобальные стили которые я указываю в выше указанном файле всегда пребивают внешние."
Неправильно "знаете".
Правильным будет следующее: CSS (также как и JS) исполняются последовательно - правило за правилом (строчка за строчкой).
И совершенно НЕ ВАЖНО - какой из способов прописывания правил (скриптов) вы используете - из внешнего файла, в блоке <STYLE> (<SCRIPT>) или прямо в теге.
Исполняться будет ПОСЛЕДНЕЕ из правил. Все предыдущие будут отменены.
Так что нужные вам правила CSS в HTML-коде должны быть прописаны НИЖЕ, чем те, которые вы хотите проигнорировать.
Пример:
<head>
<link rel="StyleSheet" type="text/css" href="first.css"> <!-- где указано div {font-size: 30px} -->
<style>
span {color: red}
div {font-size: 10px}
</style>
<link rel="StyleSheet" type="text/css" href="second.css"> <!-- где указано span {color: green} -->
</head>
<body>
<span>Шрифт будет зеленым</span>
<div>Шрифт будет размером 10 пикселей</div>
<span style="color: blue">Шрифт будет голубым</span>
<div style="font-size: 20px">Шрифт будет размером 20 пикселей</div>
</body>
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(21.02.2010 в 16:58)
| | | Спасибо за помощь. Теперь буду работать по правилу "Исполняется всегда последнее правило".
Но то, что я написал выше, я взял из книги А.А. Кожемякин "HTML и CSS в примерах. Создание Web-страниц", стр. 291-292. Сбило с толку. Теперь буду знать в каком направлении работать | |
| |
|
|
