Вид для печати
У меня немного опыта в создании макетов с помощью дивов. Вот и сейчас делаю и ничего не получается, мой макет при изменении разрешения плывет. Если кто может помогите с 3-х колоночным макетом с помощью дивов. В макете есть хедер, футер, и основной контент, который делится на 3 части: лефтбар, маин контент, и райт бар. Во все дивы будет вставляться картинка, промежутки между дивами 1 пиксель. Буду очень признателен, если кто разъяснит как такое реализовать.
h2so4, делать отступ между блоками картинкой (google: faux columns).
гораздо быстрее можно получить точный ответ разместив фрагмент кода здесь
Посмотри здесь:
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Вот тут хорошо написано, только можете сказать, как сделать, чтоб весь сайт был не на всю ширину, а скажем в ширину 600 пикселей и выравнивался по центру экрана, ну а по бокам был какой-то бэкграунд?
Код:<style type="text/css">
*****{margin: 0;padding: 0;}
****#wrapper{text-align: center;background: #fff;}
****#content{text-align: left; margin: 0 auto; width: 600px;background: #f2f2f2;}
</style>
<div id="wrapper">
****<div id="content">
*text
****</div>
</div>
Вот что получилось, теперь проблема с правым СайдБаром, он и текст, который в нем плавают отдельно, помогите исправитьКод:<!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">
<head>
<style>
* * * *#top{ background: #F0B45F;
****margin-bottom: 2px;
****text-align: center;
****margin: 0 auto;
****width: 600px}
****#bottom{ background: #F0B45F;
* * * *text-align: center;
****margin: 0 auto;
****margin-top: 2px;
****width: 600px}
****#main{ background: #F2D58E;
****width: 100%}
****#lr{
****margin-left: 25%;
****background: #F2D58E}
****#center{
****width: 66%;
****background: #F2F1AF}
****#incenter{
****border-left: 2px solid #FFF;
****border-right: 2px solid #FFF;}
****#lftbar{
****position: absolute;
****width: 25%;
****padding-top: 2px;}
****#rgtbar{
****position: absolute;
****right: 0%;
****width: 25%;
****padding-top: 2px;}
****#wrapper{
****text-align: center;
****background: #fff;}
****#content{
****text-align: left;
****margin: 0 auto;
****width: 600px;
****background: #f2f2f2;}
</style>
</head>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
****<div id="top">Top Side </div>
* * * * <div id="wrapper">
*<div id="content">
*<div id="lftbar"> Left side</div>
*<div id="rgtbar"> Right Side </div>
*<div id="main">
*<div id="lr">
*<div id="center">
*<div id="incenter">
Hello world!!
*</div>
*</div>
*</div>
*</div>
* * * * * * * *</div>
*</div>
****</div>
****<div id="bottom"> Bottom side </div>
</body>
</html>
хм...и левый тоже не в порядке..
люди добрые, пожалуйста, кто чем может ))
[/quote]Цитата:
Originally posted by h2so4@Jul 10 2006, 18:01
люди добрые, пожалуйста, кто чем может ))
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Код:<!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" lang="ru" xml:lang="ru">
<head>
<title>3 колонки DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body {PADDING: 0; MARGIN: 0;}
#box {BACKGROUND: #fff; WIDTH: 600px; MARGIN: 0 auto; POSITION: relative;}
#top {BACKGROUND: #f0b45f; WIDTH: 100%;}
#bottom {BACKGROUND: #f0b45f; WIDTH: 100%;}
#main {BACKGROUND: #f2d58e; WIDTH: 100%;}
#lr {BACKGROUND: #f2d58e; MARGIN-LEFT: 25%;}
#center {BACKGROUND: #f2f1af; WIDTH: 66%;}
#lftbar {WIDTH: 25%; POSITION: absolute;}
#rgtbar {RIGHT: 0%; WIDTH: 25%; POSITION: absolute;}
</style>
</head>
<body>
<div id="box">
<div id="top">Это верхняя часть страницы </div>
<div id="lftbar">Это левая часть страницы </div>
<div id="rgtbar">Это правая часть страницы </div>
<div id="main">
<div id="lr">
<div id="center">Это центральная часть страницы, которая и будет определять высоту
всех колонок, т.к. здесь мы разместим новости, ссылки на новые материалы сайта,
новости наших форумов. Сюда можно добавить какую-нибудь рекламу, обзоры новых
книг, благодарности, выражение возмущения по поводу событий, связанных с
терроризмом и т.д. и т.п. и др. и пр. </div></div></div>
<div id=bottom>Нижняя часть страницы
</div></div></body></html>
спасибо большое, а ещё вопрос, а можно ли сделать чтоб правая и левая колонка была резиновой, а центральная фиксированной, чтоб при уменьшении размера окна правая и левая колонка уменьшались бы в размере, а центральная была статичной
е ещё вопрос, если в левый или правый див, добавть скажем
то это вся прелесть вылазит за пределы колонки и идет просто вниз, как сделать эту часть резиновой, чтоб она динамически меняла размер при добавлении новых записей?Код:<div id="lftbar">
Left Side
Left Side
Left Side
Left Side
Left Side
Left Side
Left Side
Left Side
</div>
h2so4, абсолютно позиционированные дивы никак нельзя подчистить. Их делают только если кол-во контента в одном из столбцов всегда больше, или js (например, google: shaun inman inline absolute).
Если Вы внимательно читали статью по приведенной мной ссылке, то могли бы заметить, что высота зависит от наполнения центральной колонки.
Вот нескоько ссылок, вполне вожможно там найдется, что нибудь подходящее:
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
то есть, я так понял универсального шаблона не получить, надо исходить от решаемой задачи, я про универсальный 2-х колоночный шаблон
сорри, не двух, а 3-х колоночный
Сейчас глянул верстку [Only registered and activated users can see links. Click Here To Register...] Зачем там надо position: absolute; + проценты в фиксированном блоке? Делайте float'ами. В данном конкретном случае.