блочная верстка часть 1 (DIV)

[Vlad Drakula]

я думаю что капать нужно в эту сторону:


<div style="border:#333333 1px solid; width:100%;padding:2px;">
<div style="border:#333333 1px solid;background-color: #006666; height:5px;width:100%;overflow:hidden;"> </div>
</div>

[Vlad Drakula]

что? все идеии уже иссякли????

[benya]

Vlad Drakula,
Кстати, у меня же точно же такая задача. (если я правильно понял). Сделать 3 дива. По краям фиксированной ширины 2 пикс. Середина пустая, должна растягиваться от общей ширины. Нужно для полоски голосования.
Но че-то у меня нихера не получилось. Средина без указания ширины ну никак не заполняется.
Сделал что-то типа (только с одним дивом и спозиционировал 2 имиджа) :

<style type="text/css">
<!--
.DC{
float:left;
height:11px;
width:100%;
background-image: url(/images/vote/c.gif);
}
-->
</style>
<div class="DC" style="width:54%"><img src="/images/vote/l.gif" width="1" align=left><img src="/images/vote/r.gif" width="1" align="right"></div>

Вышло см. вложение. Но хотелось бы что бы цифры с процентами были около полоски и растягивались в месте с ней, а не в отдельной ячейке.

[Vlad Drakula]

benya
подобную конструкцию пробовал?



<div style="position:relative;width:%;height:20px;">
<div style="position:absolute;top:0;left:0;width:2px;height:20px;">*</div>
<div style="position:absolute;top:0;right:0;width:2px;height:20px;">*</div>
<div style="margin-left:2px;margin-right:2px:width:100%;">*</div>
</div>

[benya]

Vlad Drakula,
Ну ты гений ;) Отписать осталось только классы ;)

[Vlad Drakula]

benya
это то известно мне давно... так сказать одино из стандартных решений...
у меня вот было жилание написать такой шаблон, где не нужно будет использовать обсолютное и релятивное позиционирование!

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

а вообще я в очень много рабочего времени трачу на разработку всякого вида шаблонов верстки...

[benya]

Vlad Drakula,
Немного таки не подходит :tease:


<style type="text/css">
<!--
.DO {
position:absolute;
top:-2px;
right:-28px;
height:11px;
font-size:11px;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.DL{
position:absolute;
top:0;
left:1px;
width:1px;
height:11px;
background-image: url(/images/vote/l.gif);
overflow:hidden;
}
.DC{
margin-left:2px;
margin-right:2px;
width:100%;
height:11px;
background-image: url(/images/vote/c.gif);
overflow:hidden;
}
.DR{
position:absolute;
top:0;
right:1px;
width:1px;
height:11px;
background-image: url(/images/vote/r.gif);
overflow:hidden
}
-->
</style>

<table width="100" cellpadding="2" cellspacing="0" border="1">
<tr><td>
<div style="position:relative;width:100%; ">
<div class="DL"></div>
<div class="DC"></div>
<div class="DR"></div>
<div class="DO">12%</div>
</div>
</tr></td></table>


Цифры с процентами вылазят за пределы внещнего блока (таблицы) :sorry:
Чего не должно быть. 100% должно быть учтено с цифрами.

[Vlad Drakula]

benya
1) не нужно использовать служную верстку дивами внутри таблиц!!! это сильно глючит в IE !!!
2) баг с вылизанием текста очень просто... попробуйте исправить сами... если не получится то я помогу вам...

[benya]

Vlad Drakula,
Да ничего не получается. цифры эти плавают поверх таблицы. А как их воткнуть внутрь..


<style type="text/css">
<!--
.DO {

position:absolute;
height:11px;
font-size:9px;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding-left:2px;
left: 100%;
top: -1px;
}
.DL{
position:absolute;
top:0;
left:-1px;
width:1px;
height:11px;
background-image: url(/images/vote/l.gif);
overflow:hidden;
}
.DC{

width:100%;
height:11px;
background-image: url(/images/vote/c.gif);
overflow:hidden;
}
.DR{
position:absolute;

top:0;
right:-1px;
width:1px;
height:11px;
background-image: url(/images/vote/r.gif);
overflow:hidden
}
-->
</style>

<table width="100" cellpadding="2" cellspacing="0" border="1">
<tr><td style="padding:3px;">
<div style="position:relative;width:100%;">
<div class="DL"></div>
<div class="DC"></div>
<div class="DR"></div>
<div class="DO">12%</div>
</div>
</tr></td></table>

[Vlad Drakula]

benya
1) вы уж извените, но сначала почитаю вам немного морали...
у вас не получается т.к. вы просто не корерктно сформулировали то что вы хотите сделать... возможно вы еще не готовы чтобы мыслить блоками а не таблицами... для этого нужно много стараться и уяснить несколько простых вещей по блочной верстке...
2) вы не учли мое замечание о том что не нужно комбинировать дивы и таблицы... (просто лирическое отступление...)
3) а вы такую конструкцию не пробовали делать:

.DO {
right:0px;
}

.DR{
right:30px;
}

.DC{
margin-left:2px;
margin-right:32px;
}

[benya]

Vlad Drakula,
Да какая разница. Внешним блоком может быть и див. Это ничего не меняет. Если есть другой способ создать график для голосования, поделись. Я другого не знаю.

вы просто не корерктно сформулировали то что вы хотите сделать...

По-мойму вполне корректно. Если словами непонятно. То должно быть см. вложение.

[Vlad Drakula]

benya
Да какая разница. Внешним блоком может быть и див. Это ничего не меняет.
я тоже так думал пока не столкнулся с ошибками IE из-за этого...

код который вам нужен приведу позже...

[benya]

Vlad Drakula,
В принципе уже решено. Во внешнем блоке поставил отступ примерно равный ширине строки "100%".
Вроде работает.

[Vlad Drakula]

предлагаю начать новый "урок" по блочной верстке:
http://forum.oszone.net/thread-68247.html