PDA

Показать полную графическую версию : блочная верстка часть 1 (DIV)

Страниц : [1] 2
Vlad Drakula
06-06-2006, 00:17
вот решил начать вереницу тем посвещенную блочной верстке...

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

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

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

какие есть идеи???
GoDleSS
06-06-2006, 01:48
Насколько я понял идея такая:

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

Старый метод, который применялся при табличной вестке:
левый - 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
GoDleSS

к вопросу о распорках: http://forum.oszone.net/thread-61904.html
benya
06-06-2006, 13:27
Vlad Drakula,
Как раз своевременно, потому как я сегодня думал поискать что-то на эту тему. Эксплорер виснет таки, приходтся его периодически переоткрывать. ;( Хочу структуру там где таблицы заменить дивами, а там где маленькие таблицы, ну так уже и оставить..
Vlad Drakula
06-06-2006, 14:14
GoDleSS
а как вы хотите заставить эти три блока стоять на одной линии???
benya
06-06-2006, 16:11
Vlad Drakula,
Посмотри пожалуйста. Не могу понять почему див вылазит за пределы таблицы и не становится высотой в 5 пикс.

<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
benya
а в каком броузере вылазит? наверное в FF ?
benya
06-06-2006, 16:31
Vlad Drakula,
В ie 6.0 не становится див (как я писал выше) 5 пикселями по высоте и при 100% ширине вылазит за край таблицы и перегораживает его (край). А в firefox по высоте нормально, а вот опять по ширине тоже видно что ближе к правому краю чем к левому. Хотя при 100% вроде отступ должен быть одинаков что слева что справа.
Vlad Drakula
06-06-2006, 16:36
benya
у меня IE6.0 c SP2 все отображается нормально!
benya
06-06-2006, 16:42
Vlad Drakula,
У меня то, что идет по умолчанию с winxp sp1 pro. И отображается неправльно.
Vlad Drakula
06-06-2006, 16:46
benya
ну... что я могу сделать... столкнулся ты с понятием кросброузерность и тем что каждый броужер отображате так как ему хочется!
benya
06-06-2006, 17:04
Vlad Drakula,
Даже если попробовать использовать заместь таблицы дивку, внутренний див при 100% растягивает на несколько пикселей внешний. Интересно что если внутренний див заменить на:

<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
benya
логично... а я ветьговорил что есть баги и то что каждый броузер отображает так как захочет...
GoDleSS
07-06-2006, 04:50
Vlad Drakula, насчет выравнивания по высоте(в ряд) пожалуй будут опять затычкообразные решения :) Что ж, заставляет подумать, тоже неплохо...

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

padding: 0px;
margin: 0px;

возможно и уйдет эффект переполнения.
Vlad Drakula
07-06-2006, 11:01
GoDleSS

возможно и уйдет эффект переполнения.
но и отступ между границей и дивом тоже уйдет...
benya
07-06-2006, 12:59
GoDleSS,
Ничего не изменилось. Высота больше 5 пикс. и западание на правый край. См. http://extremetour.com.ua/div.gif
GoDleSS
07-06-2006, 15:36
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
GoDleSS
читайте более внимательно: http://forum.oszone.net/post-447462-12.html
GoDleSS
07-06-2006, 16:24
Да, моя ошибка!
Самое интересное, что прогнал указанный человеком код(с дивом, а не таблицей) - все норма, отображает как надо...

Тест опять же в опере и ИЕ.
benya
07-06-2006, 17:51
GoDleSS,
Правильно, но не совсем. Где высота в 5 пикселей?
IE 6.0 http://extremetour.com.ua/div.gif
Firefox 1.5.0.2 http://extremetour.com.ua/firefox1_5_0_2-.gif
Opera 6.0 http://extremetour.com.ua/opera6_0.gif

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



© OSzone.net 2001-2012