<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 15px;
background-color: #B5BD8C;
font-family: arial;
font-size: 80%
}
#mainbox {
border: 3px solid orange;
padding-bottom: 5px;
position: relative;
overflow: hidden;
}
#left {
border: 3px solid green;
width: 220px;
float: left
}
#content {
border: 3px solid green;
margin: 0px 235px 0px 235px;
}
#right {
border: 3px solid green;
width: 220px;
float: right
}
div.subcontent
{
border: 2px solid red;
background-color: #FFF;
overflow:hidden;
margin-bottom: 15px
}
.subcontent p
{
margin: 10px;
font-size: 100%;
color: black;
}
#bottom
{
background-color: #EFE29C;
height: 50px;
border: 3px solid #FFF;
text-align: right;
font-size: 85%;
}
#bottom p
{
padding: 10px;
}
</style>
</head>
<div id="mainbox">
<div id="left">
<div class="subcontent">
<p>hello</p>
</div>
</div>
<div id="right">
<div class="subcontent">
<p>hello</p>
</div>
<div class="subcontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</div>
<div id="content">
<div class="subcontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>
</div>
</div>
<div id="bottom">
<p>(c) 2008, «Тракторный завод тополёк»</p>
</div>
</body>
</html>
Как сверстать макет: три колонки с footer'ом?
Требуется сделать макет, состоящий из трех колонок и нижнего блока.
Ширина левой и правой колонки фиксирована, средний блок - резиновый.
Между колонками небольшие отступы.
Необходимо, чтобы нижний блок располагался снизу за колонками, т.е. по сути, за самой длинной из колонок.
Пол ночи ковырялся, опробовал несколько способов, безуспешно.
Кто через этот ад уже прошел, поделитесь идеей, плиииииз :)
Ширина левой и правой колонки фиксирована, средний блок - резиновый.
Между колонками небольшие отступы.
Необходимо, чтобы нижний блок располагался снизу за колонками, т.е. по сути, за самой длинной из колонок.
Пол ночи ковырялся, опробовал несколько способов, безуспешно.
Кто через этот ад уже прошел, поделитесь идеей, плиииииз :)
самое простое - сделать таблицей, а блоками - в гуголь. Я когда задавался этим вопросом именно там и нашел ответ. Сейчас к сожалению не помню как.
На Google аллергия началась уже.
С помощью перемещаемых блоков получается, однако, смущает тот факт, что центральный блок идет самым последним...
Это не дело.
С помощью перемещаемых блоков получается, однако, смущает тот факт, что центральный блок идет самым последним...
Это не дело.
да таблицей вообще легко имхо. устанавливаешь фиксированный width у первой и третьих колонок, а у таблицы - 100%. В результате средний будет резиновым. Ну отступы, там в свойствах таблицы пороешься да и всё
Вот заготовочка:
[highlight=html]
<html>
<head>
<title>Титлы :)</title>
</head>
<body>
<? include "custom_pages/top.php" ?>
<table height="100%" border="0" width="100%">
<tr>
<td valign=top bgcolor="#000000" width="27%">
</td>
<td bgcolor="#ffffff" width="53%">
<iframe name=baseframe src="" width="100%" height="100%" frameborder=no></iframe>
</td>
<td valign=top bgcolor="#000000" width="20%">
</td>
</tr>
</table>
<? include "custom_pages/bottom.php"; ?>
</body>
</html>
[/highlight]
P.S. почемуто html код не подсвечивается
[highlight=html]
<html>
<head>
<title>Титлы :)</title>
</head>
<body>
<? include "custom_pages/top.php" ?>
<table height="100%" border="0" width="100%">
<tr>
<td valign=top bgcolor="#000000" width="27%">
</td>
<td bgcolor="#ffffff" width="53%">
<iframe name=baseframe src="" width="100%" height="100%" frameborder=no></iframe>
</td>
<td valign=top bgcolor="#000000" width="20%">
</td>
</tr>
</table>
<? include "custom_pages/bottom.php"; ?>
</body>
</html>
[/highlight]
P.S. почемуто html код не подсвечивается
Спасибо, но вариант с таблицами не интересен.
В таблицах я уже крут.
Вот пример с перемещаемыми блоками:
Однако, как я уже говорил, самый важный блок(центральный) располагается в теле html-кода последним.
Есть у кого-нибудь еще мысли?
В таблицах я уже крут.
Вот пример с перемещаемыми блоками:
Код:
Однако, как я уже говорил, самый важный блок(центральный) располагается в теле html-кода последним.
Есть у кого-нибудь еще мысли?
Сео - штука хорошая. Только не забывайте о тех, у кого цсс не поддерживается или изменены, а так же о слепых. Меню должно быть сверху.
Цитата:
Меню должно быть сверху.
Бесспорно!
Однако, основное содержание должно быть выше, чем правая колонка.
А в этом примере это не так.
А в чем тогда проблема? Задавайте для центральной части float:left
http://dev.kurepin.com/test/bpwd2-code/chapter8/ вот здесь примеры. И ещё выше по директориям. Да и сам мой сайт foxweb.net.ru так как тебе надо свёрстан.
Цитата:
А в чем тогда проблема? Задавайте для центральной части float:left
Видимо в том, что это не решает проблему.
Цитата:
http://foxweb.net.ru/test/bpwd2-code/chapter8/ вот здесь примеры
Пример хороший. Только последовательность блоков не совсем та. Тут Ц-Л-Р, т.е. меню после основного содержания.
Цитата:
Да и сам мой сайт foxweb.net.ru так как тебе надо свёрстан
К сожалению, не так как мне надо. Порядок такой (Л-Ц-П). Но вот хитрость твоей верстки в том, что правая колонка у тебя никогда не меняется по высоте, и держится лишь из-за свойства min-height: 700px. Убери его и в том случае, где центральный блок короче, пипец верстке. С левым та же ситуация. IE6 вроде вообще такого свойства не вдупляет.
Если у тебя все три колонки будут по 30px, то footer будет с отступом 670px (пустоты), а мне надо, чтобы footer следовал сразу за самым длинным блоком.
Странно, у меня решает.
Какие требования к столбцам?
Какие требования к столбцам?
Цитата:
Странно, у меня решает.
Какие требования к столбцам?
Какие требования к столбцам?
Центральный столбец резиновый, между столбцами зазоры, footer размещается за самым длинным из них снизу.
Если у вас это получилось, можно исходник посмотреть?
Цитата:
Создание резиновой трехколоночной верстки с использованием отрицательных полей
Спасибо.
Этот вариант решает задачу.
Обязательно напишу, только чуть погодя. Зазоры в пикселях или процентах?
верстаю верстаю... везде все нормально, а долбаный IE все корявит. нихера не ровно.. какие-то отступы появляются.
Вы покажите макет, напишем.
Зазоры в пикселях.
С отрицательными полями у мну получилось то, что хотел.
Интересно, а без них можно?
С отрицательными полями у мну получилось то, что хотел.
Интересно, а без них можно?
Чем отрицательные поля не угодили?
Цитата:
Чем отрицательные поля не угодили?
Угодили.
А без них можно? :)
Не знаю, Вы нам никак макет не показываете.
Смотреть макет
При изменении размера (на большом экране) видно, как нижний блок располагается то за средним, то за левым блоком. А если надо, то и за правым :)
При изменении размера (на большом экране) видно, как нижний блок располагается то за средним, то за левым блоком. А если надо, то и за правым :)
Экран у меня маловат, первое, что приходит в голову - попробуйте задать размеры блоков чуть меньше (имеется ввиду ширина). Тогда колонки ехать не должны.
А еще, Вы как-то очень странно вкладываете блоки...
Не прописано значение clear:both для #clear
Цитата:
А еще, Вы как-то очень странно вкладываете блоки...
Опыта бестабличной верстки, как понимаете, не много.
Так в чем странность?
Цитата:
Тогда колонки ехать не должны.
Так вроде не едут. Или едут?
Цитата:
Не прописано значение clear:both для #clear
Там вообще не описан стиль #clear. Есть #clearbox. Просто не правильно указан id. Этот блок в данном случае и не нужен вовсе, надо удалить...
Ну, в том примере что я приводил блок #clear отвечал за сбрасывание float-ов для колонок. В таком случае пропишите clear:both для #bottom, а то как-то смотрится в ИЕ6 не очень ) И min-width тоже следовало бы указать.
Цитата:
Ну, в том примере что я приводил блок #clear отвечал за сбрасывание float-ов для колонок. В таком случае пропишите clear:both для #bottom, а то как-то смотрится в ИЕ6 не очень ) И min-width тоже следовало бы указать.
Ах да. Спасибо. В IE6 так и не посмотрел.
"clear: both" добавил.
Жеееесть. IE6 всё вдохновение испортил.
Во первых, в IE6 название и телефон (сверху) имеют отступ (слева, справа), в два раза больший, чем надо.
Во вторых, у зеленых заголовков (средний блок) почему-то отступает левая картинка, даже представить сложно, в чем косяк.
В третьих, серые разрывы под заголовками блоков, что, наверное, самое неприятное.
Ааааааа.
Цитата:
Ах да. Спасибо. В IE6 так и не посмотрел.
Ну я думаю в нем стоит смотреть в первую очередь, так как доля этого браузера, к сожалению, все еще больше других.
Цитата:
Во первых ...
Во вторых ...
В третьих ...
А вот сдесь уже читайте матчасть ))
Цитата:
А вот сдесь уже читайте матчасть ))
Читаю. Почти все исправил.
Кстати, min-width в IE6 не работает. Неужели кроме js ничего не поможет?
Может кто подскажет как "во вторых" иправить?
Какие способы есть сделать такие блоки (greenheader, redheader)?
У меня это div c фоном, в него вложен еще один с левой картинкой (no-repeat), в него, в свою очередь, еще один с правой картинкой. И вот в этот последний собственно текст идет.
likeopera возможно это имел ввиду, когда говорил про странность вкладывания блоков?
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Заголовок</title>
<!--[if lte IE 6]>
<style type="text/css">
#container {
min-width: 1000px;
width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 1000)? "1000px" : "100%")
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
Остальной код страницы.
</div>
</body>
</html>
[/HTML]
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Заголовок</title>
<!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent('onload',mmwidth);
window.attachEvent('onresize',mmwidth);
function mmwidth(){
document.getElementById('container').style.width = (((document.documentElement.clientWidth || document.body.clientWidth) > 1440)? "1440px" : (((document.documentElement.clientWidth || document.body.clientWidth) < 1000)? "1000px" : "100%"));
};
</script>
<![endif]-->
</head>
<body>
<div id="container">
Остальной код страницы.
</div>
</body>
</html>
[/HTML]
http://cssing.org.ua/2005/09/02/min-width-for-ie/
Это для минимальной ширины.
А все остальное попробуйте посмотреть используя девелопер тулбар для ИЕ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Заголовок</title>
<!--[if lte IE 6]>
<style type="text/css">
#container {
min-width: 1000px;
width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 1000)? "1000px" : "100%")
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
Остальной код страницы.
</div>
</body>
</html>
[/HTML]
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Заголовок</title>
<!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent('onload',mmwidth);
window.attachEvent('onresize',mmwidth);
function mmwidth(){
document.getElementById('container').style.width = (((document.documentElement.clientWidth || document.body.clientWidth) > 1440)? "1440px" : (((document.documentElement.clientWidth || document.body.clientWidth) < 1000)? "1000px" : "100%"));
};
</script>
<![endif]-->
</head>
<body>
<div id="container">
Остальной код страницы.
</div>
</body>
</html>
[/HTML]
http://cssing.org.ua/2005/09/02/min-width-for-ie/
Это для минимальной ширины.
А все остальное попробуйте посмотреть используя девелопер тулбар для ИЕ
Цитата:
http://html-coder.org.ru/method/min-width.php
Это для минимальной ширины.
Это для минимальной ширины.
Спасибо!
Если кто-то знает, почему в IE6 у зеленых блоков левая картинка смещается вправо (верстка), буду очень признателен.