| |
|
|
| | подскажите чайнику (мне), как сделать болванку (шаблон) для страницы в три колонки на дивах. Имею только общее представление о них, и немного практики - например, третья колонка у меня постоянно "валится" вниз, несмотря на то, что места её хватает.
Подскажите, пожалуйста, примерчиком - как это сделать.
А требования такие:
Левая колонка - ширина фиксированная.
Правая колонка - ширина фиксированная.
Среднаяя колонка - ширина на все оставшееся пространство.
Сжатие нужно ограничить для разрешения 1024, т.е. дальше появляется скроллбар, а страница прекращает ужиматься.
Как я понимаю - называтеся это резиновая верстка. | |
| |
|
|
| |
|
|
| |
для: Zilog
(17.12.2006 в 02:38)
| | | <table border="1" width="100%">
<tr>
<td width="200" valign-"top"></td>
<td width="100%" valign-"top"></td>
<td width="200" valign-"top"></td>
</tr>
</table> | |
| |
|
|
| |
|
|
| |
для: [ alien ]
(17.12.2006 в 03:38)
| | | Дивная - имеется ввиду DIVная, т.е без таблиц. Таблицами и сам могу.... | |
| |
|
|
| |
|
|
| |
для: Zilog
(17.12.2006 в 04:17)
| | | Привет!
Вот лови...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width: 199px;
height: 100%;
background:#fff;
border:1px solid #000;
}
html>body {
height:39px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#rightcontent p {
font-size:10px
}
</style>
</head><body>
<div id="leftcontent">
<h1>leftcontent</h1>
<pre>Твоя левая колонка...</pre>
</div>
<div id="centercontent">
<h1>centercontent</h1>
<pre>Центральная колонка...</pre>
</div>
<div id="rightcontent">
<h1>rightcontent</h1>
<pre>Правая колонка...</pre>
</div>
<br style="clear:both;" />
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Vados
(17.12.2006 в 06:55)
| | | с сжатием несскоько сложнее. Все что выше надо заключить в
<body>
<div id=outer>
<div class=minwidth>
<div class=layout>
<div class=container>
<div class=content>
,,,,,,,,
</div>
</div>
</div>
</div>
</div>
|
и стили:
HTML,BODY {
PADDING: 0px;
MARGIN: 0px;
cursor:default;
}
BODY {
text-align:center;
padding:0;
margin:0 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333333;
font-size:11px;
}
.outer {
PADDING: 0px;
MARGIN: 0px auto;
WIDTH: 95%;
HEIGHT: 100%;
TEXT-ALIGN: left;
min-width: 1000px
}
HTML .minwidth {
PADDING-LEFT: 1000px
}
HTML .minwidth {
HEIGHT: 1px
}
HTML .layout {
HEIGHT: 1px
}
HTML .container {
MARGIN-LEFT: -1000px;
POSITION: relative;
HEIGHT: 1px;
}
HTML .content {
HEIGHT: 1px
PADDING: 0;
}
|
***только проверь, чтобы название классов с вышеуказанным не пересекались | |
| |
|
|
| |
|
|
| |
для: Zilog
(17.12.2006 в 02:38)
| | | Может это подойдет. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<style tyle="text/css">
* { margin: 0; padding: 0;}
body { color: #000; font: normal 1.2em Verdana, Sans-serif; background: #fff;}
div { padding: 10px;}
#header { background: #eee;}
#menuLeft { float: left; background: #ddd; width: 180px; height: 400px;}
#menuRight { float: right; background: #ddd; width: 180px; height: 400px;}
#content { background: #ccc; margin: 0 200px; height: 200px; }
#footer { clear: both; background: #bbb; }
</style>
<body>
<div id="header">
"ШАПКА"
</div>
<div id="menuLeft">
ЛЕВОЕ МЕНЮ
</div>
<div id="menuRight">
ПРАВОЕ МЕНЮ
</div>
<div id="content">
КОНТЕНТ страницы<br />
</div>
<div id="footer">
"ПОДВАЛ"
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Wita1y
(17.12.2006 в 12:49)
| | | Спасибо, товарищи!
Сейчас попробую!... | |
| |
|
|
| |
|
|
| |
для: Wita1y
(17.12.2006 в 12:49)
| | | 2Wita1y при сжатии сначала середина, потом правая колонка сваливаются вниз. пробуем дальше... | |
| |
|
|
| |
|
|
| |
для: Zilog
(18.12.2006 в 12:29)
| | | Не внимательно Ваш первый пост прочитал. :) | |
| |
|
|
| |
|
|
| |
для: Wita1y
(17.12.2006 в 12:49)
| | | 2AlexSol ! с твоими попправками ничено не съезжает!
Спасибо, вам, ребята!
Только вот вопрос к AlexSol: как мне регулировать ширину средней колонки? Другими словами, хочу контроллировать расстояние от средней до боковых колонок. | |
| |
|
|
| |
|
|
| |
для: Zilog
(18.12.2006 в 12:55)
| | | не понял... приаттач что получилось.
кстати про ширину http://cssing.org.ua/2005/09/02/min-width-for-ie/ - попробуйте вариант 2 и доложите о результатах! | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.12.2006 в 12:59)
| | | В целом - получилось. Но есть недостаток. При сжатии/расширении - при определённых (!) позициях ширины окна, средний див (content) начинает падать вниз; чуть сдвинули - опять на месте. Если делать быстро - получается мерцание. Как убрать этот глюк?
СТИЛИ:
HTML,BODY { padding: 0px; margin: 0px; cursor:default; transparent 50px top no-repeat; }
BODY { padding:0; margin:0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#333333; font-size:12px; }
.outer { padding: 0px; margin: 0px auto; width: 95%; height: 100%; text-align: left; min-width: 1000px }
HTML .minwidth { padding-left: 1000px }
HTML .minwidth { height: 1px }
HTML .layout { height: 1px }
HTML .container { margin-left: -1000px; position: relative; height: 1px; }
HTML .content { height: 1px padding: 0; margin : 0px;}
#header {}
.headpic1 { width: 100%; background: url(/images/top01.jpg) no-repeat top left; }
.headpic2 { background: url(/images/top02.jpg) no-repeat top right; text-align: center;}
#headline1 { background: #E5E5E5; height:15px;} /* серая полоса под заголовком на гл. странице*/
#headline2 {height:15px;};
#footer { clear: both; border-top: 1px dotted #CCCCCC; text-align: right; padding-top: 0px;}
#menuLeft { float: left; width: 200px; height: 400px;}
#menuRight { float: right; width: 250px; height: 400px; padding:15px;}
#content { margin: 0; height: 200px; padding:15px;}
|
КОД:
<div class=minwidth>
<div class=layout>
<div class=container>
<div class=content>
<div id="header">
<table class="headpic1" cellpadding="0" cellspacing="0">
<tr valign="top">
<td><img src="images/logo.gif" alt="" /></td>
<td class="headpic2" align="center"><img align="center" src="images/people.gif" alt="" /></td>
</tr>
</table>
</div>
<div id="headline1">
</div>
<div id="menuLeft">
<?include "templates/mainmenu_verical.html";?>
</div>
<div id="menuRight">
<? include "part1.html";?>
<? include "part2.html";?>
</div>
<div id="content">
<? include "part3.html";?>
</div>
<div id="footer">
<?include "footer.html";?>
</div>
</div>
</div>
</div>
</div>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: Zilog
(18.12.2006 в 18:06)
| | | завтра проверю. в каком браузере мерцает? | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.12.2006 в 19:55)
| | | IE | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.12.2006 в 19:55)
| | | Ребята, подскажите почему так происходит? (см. чуть выше) | |
| |
|
|
| |
|
|
| |
для: Zilog
(19.12.2006 в 18:45)
| | | В каком-то своём блоге один дизайнер очень серёзно исследовал таким образом построенный двух- и 3-колоночный див. (На русском.) а мерцает скорее всего из-за постоянной перерисовки при ресайзе и есть особенность браузера. Если бы скрипты, то можно что-то сделать, а так - вшито в браузер. | |
| |
|
|
| |
|
|
| |
для: Zilog
(19.12.2006 в 18:45)
| | | ie теперь как минимум2....
в 6 не прыгает. прикрепите файл со всеми данными (в том числе картинками) - посмотрю.
--------
как вариант - заменить width: 100% на 99%
--------
а зачем заморачиваться на контейнеры, если в шапке таблицу делаете? | |
| |
|
|
| |
|
|
| |
для: AlexSol
(19.12.2006 в 19:47)
| | |
>а зачем заморачиваться на контейнеры, если в шапке таблицу делаете?
|
так я же сказал - что чайник, как написал - так и делаю :)
Как правильно?
И где про все эти контейнеры можно почитать? | |
| |
|
|
| |
|
|
| |
для: Zilog
(19.12.2006 в 23:51)
| | | даже чайники могут таблицу от контейнера отличить :)
как правильно - не скажу, поскольку не знаю что вы хотите.
вообщето нету 'всех этих контейнеров' а есть элементы div, p, span, h1...6которые позиционируются при помощи стилей css.
почитать тут: http://css-info.narod.ru/
берете лювой пример с http://www.csszengarden.com/tr/russian/, скачиваете таблицу стилей и смотрите что значит каждое свойство. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(20.12.2006 в 10:06)
| | |
>даже чайники могут таблицу от контейнера отличить :)
|
я заварочный ;)
Вобщем, забил я на дивы, и колонки сделал на таблицах. Работают прекрасно :) и без геморроя. Хотя, всё же очень интересно узнать, как правильно сделать на дивах. | |
| |
|
|
| |
|
|
| |
для: Zilog
(20.12.2006 в 11:59)
| | | все вышеперечисленные варианты были правильными :) | |
| |
|
|
| |
автор: Spairos (03.03.2007 в 06:36) |
|
| |
для: AlexSol
(20.12.2006 в 12:16)
| | | как раз наоборот все были неправильными. Центр не тянется по вертикали | |
| |
|
|
| |
автор: Spairos (03.03.2007 в 06:38) |
|
| |
для: Spairos
(03.03.2007 в 06:36)
| | | Всю ночь не спал.... не заметил что растяжение по вертикали не критично.... | |
| |
|
|
| |
|
|
| |
для: Spairos
(03.03.2007 в 06:38)
| | | Уважаемый Zilog для начала не "на дивах", а вёрстка с помощью слоёв. Див - это всего лишь контейнер, и то куда вы его приткнёте ему безразлично. Если вы хотите чему-то научиться то начинайте с самого начала. Извеняюсь за туфтологию :)
А теперь собственно говоря к делу.
Около месяца назад мы с Хром'ом вели обстоятельную беседу на данную тему (если найду скину ссылку) Я немного подчистил, то что я сварганил для Хрома, это должно вам подойти, до ума доведёте сами, короче пища для размышления (т.е. головной боли, без этого слои не победить!)
Одно из главных правил работы со слоями то, что их надо "вкладывать" их друг в друга (это применимо и к таблицам). Тогда не будет ничего никуда сваливаться)
См. прикреплённый файл.. критика приветствуется. | |
| |
|
|
| |
|
|
| |
для: Valick
(03.03.2007 в 21:53)
| | | Вот нашёл. http://softtime.ru/forum/read.php?id_forum=4&id_theme=30128&page=16
Кстати рекомендую просматривать темы которые создаёт Хром, он один из немногих кто умеет правильно сформулировать вопрос, а от этого зависит точность, да и собсно наличие ответа. | |
| |
|
|
