Резиновый дизайн на Div-ах

Статус
В этой теме нельзя размещать новые ответы.
slavbase

slavbase

Постоялец
Регистрация
21 Мар 2008
Сообщения
33
Реакции
34
288115.jpg

С помощью таблиц и div-ов без проблем такой дизайн сделать реально, вопрос как сделать без применения таблиц? Подскажите кто знает, ваши ответы могут пригодиться не только мне :ay:

--------------------------------------------------------
Все что придумано человеком - достояние всего человечества.
Делитесь Знаниями - это путь к совершенству...
 
Не понятно в чем именно проблема.
Тот же принцип - указать ширину в процентах.

Или ты хочешь что бы тебе сверстали по твоему рисунку ?
 
Тут есть нюансы, дело в том что указать нужно оба дива процентами, тогда проблем не возникнет, но если боковая колонка фиксированная? Как тогда быть? Сам сталкивался с подобным, будет интересно увидеть примеры
 
Ну вот сходу, например, так:

Код: 
<style>
div {border:#333 1px solid;}
#bleft {width:40px; float:left} 
#bright {width:40px; float:right; } 
#big {margin-left:41px; margin-right:41px;} 
#sidebar {width:200px; float:left;}
#content { margin-left:201px;}
#footer {clear:both;}
</style>

<div id=bleft>g1</div>
<div id=bright>g2</div>
<div id=big>
  <div id=top>top</div>
  <div id=sidebar>sidebar</div>
  <div id=content>content </div>
</div>
<div id=footer>footer</div>

Только еще придется их пораскрашивать еще, погугли faux columns.



А лучше сядь и на секундочку подумай, действительно ли нужно на это тратить время?

"Пока в вилларибо верстают дивами, в виллабаджо уже давным-давно все сверстали на таблицах и шпилят в кваку" (с).

Реально, будет у тебя там одна таблица, не будет ни одной - никто и не заметит. Ни поисковики, ни "альтернативные ридеры", все это чес для бедных.

Возьми выдачу гугла по любому слову (не относящемуся к css) и посмотри, как сверстаны сайты из топа.
 
Вот, например, полезные статьи, расказывающие как сделать резиновый дизайн в дивах:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Хорошо. Спасибо за пример :-]
Лучше так:
Код: 
<html>
<head>
<style>
div {border:#333 1px solid;}
#bleft {width:40px; height:100%; float:left} 
#bright {width:40px;height:100%; float:right; } 
#big {margin-left:41px; margin-right:41px;} 
#sidebar {width:200px; float:left;}
#content { margin-left:201px;}
#footer {clear:both;}
</style>
</head>
<body>
<div id=bleft>g1</div>
<div id=bright>g2</div>
<div id=big>
  <div id=top>top</div>
  <div id=sidebar>sidebar</div>
  <div id=content>content </div>
</div>
<div id=footer>footer</div>
</body>
</html>
 
286851.jpg

Ладно все бы хорошо в коде из топика #4 в этой теме но есть одно но как сделать колонки g1 и g2 резиновыми до footer-а
вот код:
Код: 
<html>
<head>
<style>
div {border:#333 1px solid;}
body { margin:0;}
#bleft {width:40px; height:100%; float:left} 
#bright {width:40px;height:100%; float:right; } 
#big {margin-left:41px; margin-right:41px;height:90%;} 
#sidebar {width:200px; float:left;}
#content { margin-left:201px; height:100%;}
#footer {clear:both;}
</style>
</head>
<body>
<div id=bleft>g1</div>
<div id=bright>g2</div>
<div id=big>
  <div id=top>top</div>
  <div id=sidebar>sidebar</div>
  <div id=content>content <br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br></div>
</div>
<div id=footer>footer</div>
</body>
</html>
 
не пойму чем они тебе не резиновые? ты же не будешь их двигать. они в коде резиновые или сделай 100%
 
slavbase написал(а):
286851.jpg

Ладно все бы хорошо в коде из топика #4 в этой теме но есть одно но как сделать колонки g1 и g2 резиновыми до footer-а
вот код:
Код: 
<html>
<head>
<style>
div {border:#333 1px solid;}
body { margin:0;}
#bleft {width:40px; height:100%; float:left} 
#bright {width:40px;height:100%; float:right; } 
#big {margin-left:41px; margin-right:41px;height:90%;} 
#sidebar {width:200px; float:left;}
#content { margin-left:201px; height:100%;}
#footer {clear:both;}
</style>
</head>
<body>
<div id=bleft>g1</div>
<div id=bright>g2</div>
<div id=big>
  <div id=top>top</div>
  <div id=sidebar>sidebar</div>
  <div id=content>content <br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br></div>
</div>
<div id=footer>footer</div>
</body>
</html>
Нажмите для раскрытия...

Ты путаешь. Резиновая верстка - это по ширине. Колонки до футера - это высота. Решение, не такое простое, как может показаться.

_http://www.google.com/search?q=%D0%BF%D1%81%D0%B5%D0%B2%D0%B4%D0%BE+%D0%B2%D1%8B%D1%81%D0%BE%D1%82%D0%B0+%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D0%BE%D0%BA+css&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ru:eek:fficial&client=firefox-a
 
slavbase написал(а):
Ладно все бы хорошо в коде из топика #4 в этой теме но есть одно но как сделать колонки g1 и g2 резиновыми до footer-а
Нажмите для раскрытия...

Вот специально для тебя написал: погугли по faux columns

Выровняет тебе твои колонки по высоте как надо.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху