Помощник
|
Проблема резинового дизайна |
DreamShark
|
Сообщение
#1
|
||
|
|
||
|
|||
locky-yotu |
21.7.2010, 20:17;
Ответить: locky-yotu
Сообщение
#2
|
|
DreamShark, что-то не правильно значит. Вот, посмотрите:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Простой трехколоночный макет</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> body {margin:0;color:#fff;font:bold 17px Tahoma;text-align:center} .all {min-width:800px;margin:0 50px} .left {width:195px;float:left;background:#555} .right {width:195px;float:right;background:#555} .content {margin:0 200px;background:#999} .left, .right, .content {min-height:500px} </style> </head> <body> <div class="all"> <div class="left">Лево</div> <div class="right">Право</div> <div class="content">Центр</div> </div> </body> </html> |
|
|
DreamShark
|
Сообщение
#3
|
|
locky-yotun, а как сделать то же самое, но чтобы сначала грузился div с контентом, а уже затем левый и правый сайдбары?
|
|
|
locky-yotu |
11.8.2010, 20:33;
Ответить: locky-yotu
Сообщение
#4
|
|
DreamShark, ну первое, что приходит в голову, это вот так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Простой трехколоночный макет</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> body {margin:0;color:#fff;font:bold 17px Tahoma;text-align:center} .all {min-width:800px;margin:0 50px;position:relative} .left {width:195px;background:#555;position:absolute;top:0;left:0} .right {width:195px;background:#555;position:absolute;top:0;right:0} .content {margin:0 200px;background:#999} .left, .right, .content {min-height:500px} </style> </head> <body> <div class="all"> <div class="content">Центр</div> <div class="left">Лево</div> <div class="right">Право</div> </div> </body> </html> |
|
|
DreamShark
|
Сообщение
#5
|
|
Спасибо, locky-yotun!
Угу, мне тоже абсолютное позиционирование первое в голову приходит, кстати почему многие пытаются его игнорировать? |
|
|
locky-yotu |
11.8.2010, 21:12;
Ответить: locky-yotu
Сообщение
#6
|
|
DreamShark, фиг знает, мне по работе приходится делать в основном сайты фиксированной ширины, так что с резиной как-то никогда особо не заморачивался) Может, кто подскажет более оптимальное решение. Я, кстати, тоже с удовольствием посмотрел бы.
|
|
|
DreamShark
|
Сообщение
#7
|
|
locky-yotun,а как бы ты делал, если бы сайт был фиксированной ширины?
|
|
|
InviS |
12.8.2010, 1:46;
Ответить: InviS
Сообщение
#8
|
|
DreamShark, при фиксированной ширине спокойно можно абсолютно позиционировать элементы. Думаю, поэтому он так и сказал :) Т.к. тебе всегда известна ширина блока. Мне тоже, если честно, нравятся больше сайты с фиксированной шириной :)
Вот, посмотри в FireBug или в Opera Dragonfly как я организовывал у себя это: ссылка Обратить внимание стоит на блок с телефонными номерами в header'е страницы. Ты все правильно делал, только минимальную ширину стоит задавать родительскому блоку. Например, если бы было так: <div class='wrapper'> <div class='right'></div> </div> То пишем так: .wrapper {min-width: 1000px; margin: 0 auto; height: 500px; float: left;} .right {float: right; margin-right: 10px; width: 200px;} И твой блок в 200px будет выравниваться в правую сторону только при условии, что основной блок шире 1000px :) |
|
|
DreamShark
|
Сообщение
#9
|
|
|
InviS, спасибо большое! Очень интересный пример, давно искал, как такое можно сделать!
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
WEB и SMM дизайн — решение ваших бизнес задач с помощью дизайна | 8 | justburger | 5297 | 6.7.2020, 9:18 автор: justburger |
|
Разработка дизайна сайтов, не дорого! | Продажа готовых PSD макетов | 19 | Ancitrus | 14557 | 16.12.2019, 13:25 автор: Seo-optimist |
|
Проблема с админкой | 5 | Prok | 2314 | 29.7.2019, 20:04 автор: dvakarandasha |
|
Проблема с таблицей, которая выводится через скрипт | 7 | vanchester | 1335 | 15.2.2019, 19:06 автор: Artos_mw |
|
Услуги дизайна для web сайтов и мобильных приложений | 1 | svetakaplaukh | 2424 | 9.2.2019, 0:01 автор: svetakaplaukh |
Текстовая версия | Сейчас: 28.3.2024, 18:31 |