"резиновые" округленые блоки
Имею таблицу которая растягивается в зависимости от разрешения экрана, в ней 9 ячеек. То есть 9 блоков, хотелось бы чтоб содержимое ячеек выводилось на "округлом фоне" по ширине растягивается нормально а вот по высоте не тянется 8 ( , возможно ли реализовать такой дизайн не прибегая к созданию внутри блока(ячейки) таблицы?то есть делал через CSS
|
то есть по сути мне нужно чтоб DIV вытянулся на всю высоту ячейки
|
Если браузер работает в стандартном режиме т.е. если указан DOCTYPE, то свойство height заданное в % начинает глючить. Почему? Лично для меня загадка...
|
какой браузер???желательно чтоб на всех работало 8 ) ...видимо придёться делать кучу таблиц 8( плохо, стока трафика в никуда
|
Таблицы для этого лучше вообще не использовать, ибо не по стандарту (таблицы для табличных данных а не для вёрстки). Лучше использовать список.
Мой вариант решения проблемы в mega_box.zip. |
спасибо счас опробую.....
пнуть на статью по стандартам не можете? |
Возможно со стандартами я поторопился. Не думаю, что там есть чёткие правила применения таблиц, но всё же для вёрстки лучше их не использовать. Таблицами верстали когда не было CSS (тем более CSS2), сейчас от этого нужно отходить.
Могу порекомендовать книгу Энди Бадда "Профессиональное применение WEB-стандартов" |
ничего не могу понять .....не работает ваш пример под 1024 а под 1600 всё выглядит изумительно, а высота задана 800!!!!! 8(((( %) а почему высоты вы не делали в процентах??
* { padding: 0; margin: 0; } Из-за этой волшебной записи форматирование внутри блоков рушится 8 (. А еще можно вопрос...резиновый дизайн утопия да?? всё таки хороший примерчик 8 ) вот ещё когда есть фоновый рисунок то он вообще не подходит. Спасибо за идею!!!а почему вы не делали структура из 9 блоков? что-то FF не ловит бакграунды ячеек 8( вру..ловит, но класс обозначен в тд и в стайл описан в ИЕ всё работает в ФФ не работает 8( |
моё разрешение 1280*1024 в Opere, IE и FF всё нормально.
Высоту можно задать и в процентах, но только если не указывать тип документа: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Как только вы добавите нечто одобное, процентное задание высоты начинает глючить. Если "нечто одобное" не добавлять то вы рискуете получить много других интересных вешей. Например IE начинает использовать свою собственную глючную модель контейнеров. Валидатору отсутствие DOCTYPE тоже не понравится. Запись * { padding: 0; margin: 0; } и правда волшебная. Лично я её всегда использую. Дело в том, что в браузерах есть стили по дефолту. При чём в каждом браузере разные. "Благодаря" этим стилям у некоторых элементов появляются внутренние и внешние отступы которых вы не планировали. Селектор * совпадает со всеми элементами и отменяет эти отступы. Что касается разрушения дизайна - я ведь не знаю что у вас там понаписано. Я лишь подал идею. Присылайте вашу страничку, попробуем разобраться. Возможно я не очень хороший верстальщик, но резиновый дизайн для меня антиутопия. Я ставлю ширину в 1000px. На 19" с нормальным разрешением смотрится идеально, на 17" в притык но горизонтальная прокрутка не появляется. Если делать слишком широко, то читать будет не удобно. Даже на 1000px (без боковой навигации) не удобно. |
ну я имел в виду рушение как раз таки отступов, то есть было у меня в блоке <blockquote> что обеспечивало отступ и красную строку в результате тег "не работет".
я брал разрешение на 1024 на 768, тогда конечно уезжает. А зачем мне валидность эта???я проверил в 4 браузерах- работает, что еще надо? |
красную строку можно установить css свойством text-indent
отступы свойствами padding и margin при проверке в браузерах ориентируйтесь прежде всего на FF и Oper-у. В IE много ошибок, ели будете настраивать дизайн сначала под него, то потратите много времени на поиск ошибок в своём коде которых скорее всего нет. Для настройки под IE можно использовать его же ошибки - напимер IE 6 не понимает селекторы атрибутов. Пример: есть DIV c class="my_div" код для ИЕ div.my_div { color: red; } Переопределяем цвет текста для нормальных браузеров (IE это не увидит) div[class="my_div"] { color: blue; } Как вариант можно использовать JS для определения ширины окна браузера и настройки ширины блоков, но не советую. |
Да спасибо, ваш пример помог вникнуть в суть вопрос.Но рисование блоков всё таки думается мне лучше делать через таблицу, потому как она является готовой блочной структурой и не придётся замарачиватся по поводу позицирования , отсупов и кто знает что ещё ждёт.....
Плюсы дива в данном случае(как мне кажется) это частый ре-дизайн и наверное когда браузер встречает таблицу то создаёт в памяти объект таблицу с кучей всяких свойств в отличие от дива, впрочем у меня ловить сто таблицы без тормозов. Ещё я не очень понел почему вы использовали нумерованный список когда есть специальный список |
Цитата:
У таблиц есть нодостаток проявляющийся в том, что они не отображаются пока не загрузится всё их содержимое. Если у посетителя медленное соединение то ему придётся подождать польной загрузки прежде чем он что-то увидит. С дивами это не так. а, что за такой специальный список? |
не нумерованный и не маркированный я имел в виду, точно не помню ну что то типа <DD> <DL>.
Полной загрузки документа или таблицы? |
DL - список определений
DT - определяемый термин DD - определение Вообщето можно и его. Не знаю как валидность будет, если например элемент DD отсутствует. Мне всё таки хочется чтобы разметка со стандартами дружила. |
а документ будет ждать полной загрузки таблицы????
|
то есть всех таблиц или только одной?
|
документ не должен. а вот вложенные таблицы будут ждать загрузки родительской. Правда это из умных книжек, на практике проверять не доводилось - скорость соединения достаточно большая, на глаз не заметно.
Сильно по этому поводу не беспокойтесь. Я статаюсь не ориентироваться на публику с мониторами 15" и нетом косячным - нафиг их. |
нет вложенных таблиц я реализовал саму структуру, по вашему совету через списки, а блоки через таблицы.
|
ну и нормально :yes:
|
:thanks:
|
<table border=1 width=100% cellspacing="0" cellpadding="0" align=left height=100%> <tr height=1%> <td height=1%><img src="../kar/fon1.gif" border=0></td> <td style="background:#CCCCCC;" rowspan=0 width=10000%>fgh <a href=/foto/48.jpg target="about"> fghfghfh <img src=../fotosize.php?ris=48 height=250px></a> </td> <td><img src="../kar/fon2.gif"> </td></tr> <tr><td style="background:#CCCCCC;" heigth=1000%> </td> <td style="background:#CCCCCC;"> </td></tr> <tr><td height=1><img src="../kar/fon3.gif"></td> <td><img src="../kar/fon4.gif"></td></tr> </table> когда рисунок есть дизайн уезжает..проблема в роуспан и только в ИЕ |
решил проблему через атрибут valign.
|
нет не решил 8 ( ХЕЛП!:cray:
|
<div id="container">
<div id="left"><img src="../kar/fon1.gif"></div>
<div id="right"><img src="../kar/fon2.gif"></div>
<div id="content">Контент</div>
</div>
<style type="text/css">
#container {
height: 100%;
background: #cccccc;
}
#left {
height: 100%;
float: left; /* Выравниваем элемент влево, другие
элементы будут обтекать его с правой стороны */
background: url('../kar/fon3.gif') no-repeat left bottom;
}
#right {
height: 100%;
float: right; /* Выравниваем элемент вправо, другие
элементы будут обтекать его с левой стороны */
background: url('../kar/fon4.gif') no-repeat left bottom;
}
/* Внутренние поля для контейнера с содержимым */
#content {
padding: 10px 50px 10px 50px; /* Верхнее, правое, нижнее, левое */
}
</style>
Внимание полезная книга: http://www.kodges.ru/17128-mastreska...nenie-web.html |
нижние округления не видно 8( и делал это потому что есть момент когда вставляются две картинки что называется "от и до " (от верха до низа вплотную) поэтом отступов сверху и низу не должно быть.
|
Цитата:
/* Внутренние поля для контейнера с содержимым */
#content {
padding: 10px 50px 10px 50px; /* Верхнее, правое, нижнее, левое */
}
вот это удалите Цитата:
|
тестировал в ИЕ просто скопировал ваш текст..
|
странно, у меня всё работает
|
там картинки в принципе нет 8 (
|
в ФФ тоже....
|
так оказывается есть разница между картинка не вывелась и картитнка вывелась.. (вместо верхних выводился значок отсутсвия картинки счас их добавил стали выводиться и нижние ) тока у вас фон первого контенйра квадратный и перекрывает фоновое изображение страницы
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:27. |