блочная верстка часть 1 (DIV) - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - блочная верстка часть 1 (DIV) (http://forum.oszone.net/showthread.php?t=66843)

Vlad Drakula

06-06-2006 00:17 447094

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

вот решил начать вереницу тем посвещенную блочной верстке...

для начала предлагаю обсудить седующий элемент верстки:

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

и есть очень большое желание сделать это без использования позиционирования!
при использовании позиционирования это сделать просто...

какие есть идеи???

GoDleSS

06-06-2006 01:48 447123

Насколько я понял идея такая:

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

Старый метод, который применялся при табличной вестке:
левый - width: Npx
центральный - width: 100%
правый - width: Mpx

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

Код:

<div width="100" title="left-block"><img src="" width="100" height="0"></div>

Vlad Drakula

06-06-2006 10:55 447248

GoDleSS

к вопросу о распорках: http://forum.oszone.net/thread-61904.html

benya

06-06-2006 13:27 447331

Vlad Drakula,
Как раз своевременно, потому как я сегодня думал поискать что-то на эту тему. Эксплорер виснет таки, приходтся его периодически переоткрывать. ;( Хочу структуру там где таблицы заменить дивами, а там где маленькие таблицы, ну так уже и оставить..

Vlad Drakula

06-06-2006 14:14 447373

GoDleSS
а как вы хотите заставить эти три блока стоять на одной линии???

benya

06-06-2006 16:11 447422

Vlad Drakula,
Посмотри пожалуйста. Не могу понять почему див вылазит за пределы таблицы и не становится высотой в 5 пикс.

HTML код:

<table width="100" border="0" cellspacing="2" cellpadding="0" style="border:#000000 1px solid">

  <tr>

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

  </tr>

</table>

Vlad Drakula

06-06-2006 16:16 447427

benya
а в каком броузере вылазит? наверное в FF ?

benya

06-06-2006 16:31 447438

Vlad Drakula,
В ie 6.0 не становится див (как я писал выше) 5 пикселями по высоте и при 100% ширине вылазит за край таблицы и перегораживает его (край). А в firefox по высоте нормально, а вот опять по ширине тоже видно что ближе к правому краю чем к левому. Хотя при 100% вроде отступ должен быть одинаков что слева что справа.

Vlad Drakula

06-06-2006 16:36 447441

benya
у меня IE6.0 c SP2 все отображается нормально!

benya

06-06-2006 16:42 447443

Vlad Drakula,
У меня то, что идет по умолчанию с winxp sp1 pro. И отображается неправльно.

Vlad Drakula

06-06-2006 16:46 447446

benya
ну... что я могу сделать... столкнулся ты с понятием кросброузерность и тем что каждый броужер отображате так как ему хочется!

benya

06-06-2006 17:04 447462

Vlad Drakula,
Даже если попробовать использовать заместь таблицы дивку, внутренний див при 100% растягивает на несколько пикселей внешний. Интересно что если внутренний див заменить на:

HTML код:

<table cellpadding="0" cellspacing="0" style="border:#333333 1px solid; width:100%">

<tr>

<td style="background-color: #006666; height:5px;"></td>

</tr>

</table>

Все вроде нормально ;)

Vlad Drakula

06-06-2006 17:13 447467

benya
логично... а я ветьговорил что есть баги и то что каждый броузер отображает так как захочет...

GoDleSS

07-06-2006 04:50 447741

Vlad Drakula, насчет выравнивания по высоте(в ряд) пожалуй будут опять затычкообразные решения :) Что ж, заставляет подумать, тоже неплохо...

benya, попробуйте для div и table высставить в стилевых таблицах

Код:

 padding: 0px;

 margin: 0px;

возможно и уйдет эффект переполнения.

Vlad Drakula

07-06-2006 11:01 447830

GoDleSS

Цитата:

возможно и уйдет эффект переполнения.

но и отступ между границей и дивом тоже уйдет...

benya

07-06-2006 12:59 447908

GoDleSS,
Ничего не изменилось. Высота больше 5 пикс. и западание на правый край. См.

GoDleSS

07-06-2006 15:36 448011

benya, тогда трогаем в стилях body:

Код:

<html>

<head>

<style>

body {

        margin:0px;

        padding:0px;

}

</style

</head>

<body><! leftmargin="0" topmargin="0">



<table cellpadding="0" cellspacing="0" style="border:#333333 1px solid; width:100%">

<tr>

<td style="background-color: #006666; height:5px;"></td>

</tr>

</table>

</body></html>

Opera -> ok
IE -> ok

Vlad Drakula

07-06-2006 15:55 448017

GoDleSS
читайте более внимательно: http://forum.oszone.net/post-447462-12.html

GoDleSS

07-06-2006 16:24 448030

Вложений: 1

Да, моя ошибка!
Самое интересное, что прогнал указанный человеком код(с дивом, а не таблицей) - все норма, отображает как надо...

Тест опять же в опере и ИЕ.

benya

07-06-2006 17:51 448090

GoDleSS,
Правильно, но не совсем. Где высота в 5 пикселей?
IE 6.0

Firefox 1.5.0.2

Opera 6.0

Мне нужно так, как отобразила Опера

Vlad Drakula

07-06-2006 18:18 448108

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

PHP код:


		
			
<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;">&#160;</div>        

        </div>

Vlad Drakula

08-06-2006 11:53 448357

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

benya

08-06-2006 12:42 448382

Вложений: 1

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

HTML код:

<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

08-06-2006 13:05 448392

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

PHP код:


		
			
<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

08-06-2006 13:20 448400

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

Vlad Drakula

08-06-2006 14:01 448422

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

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

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

benya

08-06-2006 14:07 448423

Вложений: 1

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

HTML код:

<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

08-06-2006 14:20 448432

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

benya

09-06-2006 13:09 448901

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

HTML код:

<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

09-06-2006 13:41 448923

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

.DO {
right:0px;
}

.DR{
right:30px;
}

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

benya

09-06-2006 20:14 449097

Вложений: 1

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

Цитата:

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

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

Vlad Drakula

09-06-2006 23:32 449143

benya

Цитата:

Да какая разница. Внешним блоком может быть и див. Это ничего не меняет.

я тоже так думал пока не столкнулся с ошибками IE из-за этого...

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

benya

10-06-2006 15:37 449297

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

Vlad Drakula

08-07-2006 10:37 459111

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

Время: 18:36.