В сотый раз об одном и том же...

В этом весь ум, честь и совесть нашей эпохи... Как однажды было сказано: высота блока в IE известна практически всегда... и равна одному проценту... ©

Вопросик:

Вот есть например куча вложенных списков, и все они с разными точками(буковками/цыферками).

при этом не очень хочестя каждый раз писать <li class="Class">, а хочется так:

Код:

---

<ul class="Class1">
****[*]

****[*]
 *<ul class="Class2">
 *****[*]

 *[/list]
****[/list]

---

Как в таком случае писать таблицу стилей, если заранее не известно какой список в каком будет (т.е. нумерованный в не нумерованном или наоборот)?

Заранее Спасибо [Only registered and activated users can see links. Click Here To Register...].

если нужны циферки, то используем

1. ...

а если в целом, то для установки буллетов я использую наследование.. хотя это зависит от конкретной задачи..

На данный момент у меня есть 4 варианта: точечки, буковки, цыферки и пустой.
Поэтому просто ол не хватит...

Если в таблице стилей написать

Код:

---

ul.Class1 li {list-style:none;}
ul.Class2 li {list-style:circle;}

---

то такой список

Код:

---

<ul class="Class2">
 *[*]

 *[*]
 * *<ul class="Class1">
 * * *[*]

 * *[/list]
 *[/list]

---

будет показываться целиком кружочками, так как li вложенного списка будут наследовать класс внешнего.

можно написать так:

Цитата:

---

ul{
* * list-style:none;
}
ul ul{
* * list-style:circle;
}
ul ul.square{
* * list-style:square;
}
ul ul ul{
* * list-style:disc;
}
ul ul{
* * list-style:circle;
}
и т.д.

---

я думаю, что схема действий ясна..
хотя возможно есть и другой какой-нибудь способ избавиться от лишних классов, но я делаю так.. )

Xepec
Там, где цифры – по семантическим соображениям в любом случае должно быть [list=1].

garA
Прально)
Контекстные селекторы в данном случае – самый оптимальный вариант)

Не красиво получается.
И, если как я говорил "заранее не известно какой список в каком будет", то придется все варианты описывать, т.е. типа такого:

Код:

---

ul.Class1 {}
ul.Class2 {}
ul.Class1 ul.Class2 {}
ul.Class2 ul.Class1 {}

---

Что совсем нету способа присвоить жестко нужный класс или класс непосредственного родителя?

Не определяйте классы для[*]. Определяйте их просто для [list]. Возможно, получится... )

Точно [Only registered and activated users can see links. Click Here To Register...].
Я просто сначала так и попробывал, но не получилось, видать какой-то баг был, ну я и подумал, что к ul это не пременимо [Only registered and activated users can see links. Click Here To Register...].

Спасибо!

Новая задачка [Only registered and activated users can see links. Click Here To Register...]

В ие динамически созданым дивам почему-то не присваивается position: relative;

Подробнее:
Есть формочка заказа, там по строчкам ниаменование и поле для ввода количества. Делаю две маленькие кнопочки "+1" и "-1" (одна над другой) и размещаю их с помощью absolute. Каждая строчка создается динамически (по клавшке) и имеет параметр position:relative;
В ff и опере все ок, но эксплорер как буд-то бы не видит этого релатива и вешает кнопочки на самый верх.

Чего с ним можно сделать?

Заранее спасибо [Only registered and activated users can see links. Click Here To Register...].

Xepec, покажите код.

Ну как-то так

Код:

---

<script language="javascript">
OrderDivCount=0;
function AddOrderDiv(i)
{
****NewDivRow="<select>\n"+
****
****<?
****$InfectionsGroup=&#39;&#39;;
****$result=mysql_query("SELECT * FROM ImmunoCombInfo");
****while ($row = mysql_fetch_array($result)) {
 *echo "\"<option value=&#39;$row[Name]&#39; class=&#39;$row[InfectionsGroup]&#39;>$row[Name]</option>\\n\"+\n";
****}
****?>
****"</select>\n"+
****"<input type=&#39;text&#39; id=&#39;Order"+i+"Text&#39; class=&#39;Text&#39; size=&#39;10&#39; maxlength=&#39;10&#39; value=&#39;0&#39; onkeypress=&#39;javascript: return numbersOnly(event);&#39;>\n"+
****"<input type=&#39;button&#39; class=&#39;OrderPlusMinusButtons&#39; onclick=&#39;javascript: document.getElementById(\"Order"+i+"Text\").value=Math.round(document.getElementById(\"Order"+i+"Text\").value)+1&#39;>\n"+
****"<input type=&#39;button&#39; class=&#39;OrderPlusMinusButtons OrderMinusButton&#39; onclick=&#39;javascript: document.getElementById(\"Order"+i+"Text\").value=Math.max(Math.round(document.getElementById(\"Order"+i+"Text\").value)-1,0)&#39;>\n"+
****"<input type=&#39;button&#39; class=&#39;Button&#39; value=&#39;+&#39; onclick=&#39;javascript: AddOrderDiv(OrderDivCount);&#39;>";
****if (i!=0)
****{
 *NewDivRow+=
 *
 *"<input type=&#39;button&#39; class=&#39;Button&#39; value=&#39;-&#39; onclick=&#39;javascript: document.getElementById(\"Order\").removeChild(document.getElementById(\"Order_"+i+"\"));&#39;>";
****}
****var order = document.getElementById(&#39;Order&#39;);
****var newdiv = document.createElement(&#39;div&#39;);
****newdiv.setAttribute(&#39;id&#39;,&#39;Order_&#39;+i);
****newdiv.setAttribute(&#39;class&#39;,&#39;OrderDiv&#39;);
****newdiv.innerHTML = NewDivRow;
****document.getElementById(&#39;Order&#39;).appendChild(newdiv);
 *
****OrderDivCount++;
}
AddOrderDiv(OrderDivCount);
</script>

---

В итоге добавляет такой див:

Код:

---

<div id="Order_0" class="OrderDiv"><select>
<option class="HIV" value="ВИЧ 1+2 БиСпот">ВИЧ 1+2 БиСпот</option>
...
<option class="Helicobacter" value="Helicobacter Pylori IgG">Helicobacter Pylori IgG</option>
</select>


<input type="text" onkeypress="javascript: return numbersOnly(event);" value="0" maxlength="10" size="10" class="Text" id="Order0Text"/>

<input type="button" onclick="javascript: document.getElementById("Order0Text").value=Math.round(document.getElementById("Order0Text").value)+1" class="OrderPlusMinusButtons"/>

<input type="button" onclick="javascript: document.getElementById("Order0Text").value=Math.max(Math.round(document.getElementById("Order0Text").value)-1,0)" class="OrderPlusMinusButtons OrderMinusButton"/>

<input type="button" onclick="javascript: AddOrderDiv(OrderDivCount);" value="+" class="Button"/>

</div>

---

вот стили:

Код:

---

div.OrderDiv
{
****position: relative;
****margin: 0px 0px 3px 0px;
}

.OrderPlusMinusButtons {
background:#eeeeee *url('/test/img/common/plusone.png') 0 0;
width:19px;
height:9px;
border: 0px;
position: absolute;
left: 360px;
top: 0px;
}

.OrderMinusButton{
background:#eeeeee *url('/test/img/common/minusone.png') 0 0;
top: 11px;
}

* html .OrderPlusMinusButtons{top: 2px;}
* html .OrderMinusButton{top: 13px;}

---

Да, и еще вопрос, как-нибудь можно ускориь обработку событий чекбокса?

Ситуация такая: есть чекбокс у него onchange (или onclick), по которому выполняются вычисления, и обновляется кусочек формочки.
Но, если по нему быстро кликнуть 2 раза, то вычисления выполнятся только один раз и эффект от чекбокса будет в итоге отрицательным. (т.е. он включен, а посчитанно как будто бы выключен.)

С ним что-нибудь можно сделать?

1. Вобщем, судя по симптомам, придется писать в onclick= для input.OrderPlusMinusButtons код, изменяющий позицию элемента. Я бы попробовал так...

2. OnDoubleClick (ondblclick=)?

2. dblclick пробывал - в ие и фф работает, но в опере - нет. Еще варианты [Only registered and activated users can see links. Click Here To Register...]?

1. решилось добавлением строчки: newdiv.style.position=&#39;relative&#39;;
т.е. походу ие не читает таблицу стилей для динамически созданых дивов.

Вопрос по ФФ:
есть код типа:

Код:

---

<div>
<div style="float:right; width:100px;">
[Only registered and activated users can see links. Click Here To Register...]
</div>


text - text - text</p>
</div>

---

ФФ отображает текст в

грамотно (т.е. обтекает флоатнутый див), но сам

занимает по ширине все пространство и находится над div&#39;ом, а главное над <a>. И соответственно на ссылку не нажать.

ИМХО флоатнутый див должен быть сверху, но что-то не работает...

Цитата:

---

Originally posted by Xepec@Jul 19 2007, 13:22
[b]ИМХО флоатнутый див должен быть сверху...

---

Почему?

Ну он и по коду сверху стоит, да и текста там нет?
Так, а что, он должен быть снизу?
И как его наверх пихнуть?

Цитата:

---

Originally posted by Xepec@Jul 19 2007, 15:06
И как его наверх пихнуть?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Никак. Потому что он и так наверху. Ерунду какую-то пишете...
Ищите ошибку в других стилевых правилах (как всегда)...

АЛИЛУЯ!!!
Нашел! Все дело в position:relative; у

. Добавил флоату тоже самое и все работает.
Только не понятной все равно осталась причина такого поведения...

ЗЫ Спасибо [Only registered and activated users can see links. Click Here To Register...]!

Вот сначала понапишите всяких стилевых правил непонятно где и непонятно зачем, а потом и пожинаете всякие побочные эффекты... Какая необходимость вообще назначать параграфу position:relative;?

Ну это затем, чтобы кажндому параграффу можно было коммент написать, т.е. просто в параграфе <div class="Commnet"> и все что хотим. А этот див справа от параграфа появляется и никому не мешает.

Внутри параграфа дивы не допускаются...

Код:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>

body{****font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #343f45;}
a{****color: #b4106b;****text-decoration: underline;}
a:hover{****text-decoration: none;}

.model{****width: 980px;****padding: 0 20px;}
.model ul li{****display: inline;****margin: 0 2px 20px 2px; text-align: center; color: #000; font-size: 13px; font-weight: bold; width: 241px; float: left;}
.model ul li img{****border: 1px solid #292929;}

</style>
</head>

<body>
****<div id="all">
 *<div class="model">
 *****

• * *
• <a href="#">[img]images/img1.jpg[/img]
  Pictures</a> *& *[Only registered and activated users can see links. Click Here To Register...]
   * *
• <a href="#">[img]images/img1.jpg[/img]
  Pictures</a> *& *[Only registered and activated users can see links. Click Here To Register...]
   * *
• <a href="#">[img]images/img1.jpg[/img]
  Pictures</a> *& *[Only registered and activated users can see links. Click Here To Register...]
   *****

 *</div>
****</div>
</body>

---

[attachment=7293:attachment]

Собственно сабж: Нужно убрать подчеркивание картинки в браузере FireFox...

А в остальных браузерах оставить? :crazy:

Aykroyd

Цитата:

---

А в остальных браузерах оставить? crazy.gif

---

А в остальных сам убереться [Only registered and activated users can see links. Click Here To Register...]

А почему тогда в Firefox сам не убирается?

Цитата:

---

А почему тогда в Firefox сам не убирается?

---

Вот и спрашиваю у знающих, почему в лисе не убираеться подчеркивание картинок... [Only registered and activated users can see links. Click Here To Register...]

Так потому что оно задано. Поэтому и не убирается. [Only registered and activated users can see links. Click Here To Register...]

Aykroyd

[Only registered and activated users can see links. Click Here To Register...] окей... буду разбираться а не задавать глупых вопросов...

по предыдушему вопросы, решил с помошью border-bottom...

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

Абсолютом не получаеться, потому что высота предыдуший блок изменяеться...

Как такое можно замутить?

Цитата:

---

Originally posted by sweedbes@Jan 22 2008, 10:06
Как такое можно замутить?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Честно говоря, вряд ли это возможно. Менять порядок следования элементов в разметке позволяет, как правило, только абсолютное позиционирование. В некоторых случаях можно воспользоваться отрицательными полями (negative margins), но возможность их применения зависит от конкретного макета...

Цитата:

---

Менять порядок следования элементов в разметке позволяет, как правило, только абсолютное позиционирование.

---

Я тоже так думаю, но вот Шеф не хочет этому верить... [Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by sweedbes@Jan 22 2008, 15:07
Я тоже так думаю, но вот Шеф не хочет этому верить... [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Тогда пусть сам попробует)
Хороший шеф должен подавать пример своим подчиненным)

Есть вот такой вот кусок рисунка, название категрии например. Таких категорий очень много, шрифт не стандартый. Как его правильно нарезать?

Раньше я просто сохранял как показано на рисунке, теперь чтобы оптимизировать как вариант хотел попробовать повторяющиеся фон и отдельно сверху названия категории (тоже риссуноком). Только ровно текст вырезать не получаеться.

[Only registered and activated users can see links. Click Here To Register...]

Цитата:

---

Originally posted by sweedbes@Mar 22 2008, 10:36
Раньше я просто сохранял как показано на рисунке
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]
Вот и продолжайте в том же духе.