Резиновый дизайн на DIV`ах

97

-K-

28 ноября 2006, 08:55

2324

Подскажите можно ли сделать резиновый дизайн на дивах без таблиц? Нашел шаблон:

Полностью подходит, но вот в чем проблема, если в среднем блоке текст растянуть что бы появилась горизонтальная прокрутка, то верхний и нижний DIVы быдут шириной с экран и при прокрутке справа будет пустота. Такая же ситуация если растянуть шапку - средний и нижние блоки остануться шириной с экран.

Вот 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>



	<title>CSS Page Template - Three Column Pixel Perfect - Header &amp; Footer</title>



	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



	<meta name="Robots" content="NOINDEX" />



	<meta http-equiv="PRAGMA" content="NO-CACHE" /><!--



  Web Site: www.ssi-developer.net



  Comments: Copyright 2003 www.ssi-developer.net



  Licence:  Creative Commons - Non-commercial Share-Alike



-->



	<link rel="stylesheet" type="text/css" href="3c-hd-ft-flex-layout.css" />



</head>



<body>



<!-- header div -->



<div id="hdr">Header Content Here</div>



<!-- center column -->



<div id="c-block">



<div id="c-col">



<h3 align="center">Three Column Pixel Perfect with Header &amp;



Footer - MK 1</h3>



<div align="center" style="color:red;">Ver 2.3</div>



<p>I have intended this to be my most complete page template.</p>



<p>The left and right columns are positioned absolutly, as in



previous template examples. But now we have a header and footer.



One problem we first have to overcome is that it's impossible to



get the left and right columns to always match the height of the



content column. If the L&amp;R columns are too short we see the



page background and quite simply it looks awful. If the L&amp;R



columns are too long they overlap the page footer.</p>



<p>To overcome the first problem we enclose the main content div



in an outer div. This unfortunatly has to be the same colour as



the L&amp;R columns which must be the same colour as each



other.</p>



<p>The overlap? All I think we can do is to stack the footer



higher than the L&amp;R columns and risk losing content. :(</p>



<p>One good thing about this method is that we can set the



margins of the center content div much larger than the width of



the left and right columns and therefore should not need to worry



about IE5x PC's stupidity. And it still gives the appearance of



being pixel perfect.</p>



<p>Note also, no need for the box hack as we have built some



flexibility into the template!! IMO. Does this hold true in your



browser? Please let me know.</p>



<p>Also, one potential problem. If you set position:relative for



the #c-block it completely hides the left and right columns. So



just leave it out? In IE6 yes or else nest ALL the blocks within



this div, including the header div.</p>



<br />



 



<p>This template has been tested in:</p>



<ul>



<li>Mozilla 1.5b &amp; Firebird 0.6.1</li>



<li>Internet Explorer 6</li>



<li>Netscape 7.1</li>



<li>Opera 7.11</li>



</ul>



<p>Changes in this version:</p>



<ol>



<li>Defined zero for the body to fix a problem in Opera.</li>



<li>specified padding for h3 which was the title in the content



div, this forces the top of the div up to where it should be (it



seems to collapse??)</li>



</ol>



<br />



<p style="font-weight: bold;">Filler Content</p>



<p lang="ga">D&#225;ig alta in mac sin i tig a athar &amp; a mathar



icon airdig i m-Maig Muirthemne, ocus adfeta d&#243; sc&#233;la na maccaemi



i n-Emain. D&#225;ig is amlaid domeill Conchobar in rigi, o ro gab



r&#237;gi in r&#237;, .i. mar atraig f&#243;chet&#243;ir c&#233;sta &amp; cangni in



choicid d'ordugud. In l&#225; do raind i tr&#237; asa athlil: cetna trian



de f&#243;chet&#243;ir ic fegad na maccaem ic imbirt chless cluchi &amp;



immanae, in trian tanaise dond l&#243; ic imbirt brandub &amp;



fidchell, &amp; in trian dedenach ic tochathim b&#237;d &amp; lenna,



con-dageib cotlud for c&#225;ch, aes c&#237;uil &amp; airfitid dia thalgud



fri sodain. Ciataim ane ar longais riam reme dabiur br&#233;thir, ar



Fergus, na fuil in hErind no i n-Albain &#243;clach macsamla



Conchobair.</p>



<p lang="ga">Ocus adfeta don mac sin sc&#233;la na mace&#225;em &amp; na



maccraide i n-Emain, &amp; radis in mac bec ria mathair ar co



n-digsed d&#225; chluchi do chluchemaig na Emna. Romoch duitsiu sain a



meic bic, ar a mathair, co n-deoch anruth do anrothaib. Ulad lett



no choimthecht ecin do chaimthechtaib Conchobair, do chor th'



aesma &amp; t'imdegla for in maccraid. C&#237;an lim-sa di sodain a



mathair, ar in mac bec, &amp; ni biu-sa oca idnaide acht



tecoisc-siu dam-sa cia airm it&#225; Emain. Is c&#237;an uait, ar a



mathair, airm in-das-fil. Sliab F&#250;ait etrut &amp; Emain. Dob&#233;r-sa



ardmes furri amne, ar esium.</p>



<br />



</div>



<!-- end of center column --></div>



<!-- end c-block -->



<div id="ftr" align="center">Footer Div - Copyright Information 



</div>



<!-- left column -->



<div id="lh-col"><br />



<h4 align="center">Left Column</h4>



<p align="center">The left col can be used for navigation links,



search box etc.</p>



<br />



<br />



<p align="center"><a



href="http://www.ssi-developer.net/main/templates/">View more



templates.</a></p>



</div>



<!-- end of left column -->



<!-- right column -->



<div id="rh-col"><br />



<h4 align="center">Right Column</h4>



<p align="center">More links?<br />



Advertisements?</p>



</div>



<!-- end of right column -->



</body>



</html>

Вот таблица стилей style.css:

/* Layout Stylesheet */ 



body{



 margin: 0;



 padding:0; 



 background:#808080;



 color: #333333;



 }	 



	 



#lh-col{



 position:absolute;



 top:62px;



 left:0;



 width:140px;



 z-index:3;



 background:#c0c0c0;



 color: #333333;}







#rh-col{



 position:absolute;



 top:62px;



 right:0;



 width:140px;



 z-index:2;



 background:#c0c0c0;



 color: #333333;}







#c-block {



 width:100%;



 z-index:1;



 background:#c0c0c0;



 color: #333333;



 height:80%;}







#hdr{



 height:60px; 



 border-bottom:1px solid #000000; 



 width:100%; 



 background:#eeeeee;



 color: #333333; 



 margin:0;



  }







#c-col{



 margin:0 142px 0 142px;



 position:relative;



 background:#ffffff;



 color: #333333;



 z-index:5;



 border: solid #000000;



 border-width:0 1px;



 }







#ftr {



 width:100%;



 height:35px;



 border: solid #000000; 



 border-width:1px 0;



 background:#eeeeee;



 color: #333333;



 margin:0;



 }





/* Presentation Stylesheet */ 

p {

 padding: 0 15px;

 }



h4, h3 {

 margin:0; 

 padding: 5px 0;

 }



p:first-letter {

 font-size: 80%; 

 font-weight: bold;

 color:blue;

 }

Кто знает как связать эти 3 блока, как можно было бы сделать таблицей, посоветуйте плиз.

98

SMM

28 ноября 2006, 09:32

#1

я свой диз на дивах построил - megaobzor.com

Размещение статей (/ru/forum/728008) - 30 wmz (1300\5 ЯК Дмоз. 2006 год. Посещ.~60000. MR-100. Яндекс. Гугл новости.). Траст. Написание+6 wmz.

16

Ёжик В Тумане

28 ноября 2006, 09:42

#2

-K-:
Подскажите можно ли сделать резиновый дизайн на дивах без таблиц? Нашел шаблон:

Полностью подходит, но вот в чем проблема, если в среднем блоке текст растянуть что бы появилась горизонтальная прокрутка, то верхний и нижний DIVы быдут шириной с экран и при прокрутке справа будет пустота. Такая же ситуация если растянуть шапку - средний и нижние блоки остануться шириной с экран.

А зачем растягивать? Нельзя ли просто обойтись установкой в css overflow?

SMM:
я свой диз на дивах построил - megaobzor.com

вот вообще есть: Генератор шаблона 1–3 колонки (X)HTML+CSS..

Ушел в себя, забыл про форум.
Вернусь ли? Не знаю... Если нужен, пишите в аську...

328

K. Ermakov

28 ноября 2006, 09:50

#3

-K-, должно помочь изучение http://softwaremaniacs.org/blog/category/web/primer/

С уважением, Константин Ермаков, absite.ru: онлайн кроссворды (http://absite.ru/); searchsuggest.ru: поисковые подсказки доставляют (http://searchsuggest.ru/).

98

SMM

28 ноября 2006, 09:54

#4

вот вообще есть

к чему это?

основа и построение у меня на дивах+css. менюшка на таблице, окно последнего с форума также на таблице.

мне построение на DIV больше по душе.

DU

105

DIMON-UA

28 ноября 2006, 10:01

#5

Конечно, на div-ах код получится более компактный, но в Мозиле при нажатом Ctrl скролингом меняется размер шрифта. И тогда весь дизайн построеный только на div-ах просто разваливается. Есть ли в этом смысл? Все должно быть в меру. Я считаю что идеально - это каркас сверстаный в таблицах, а внутринние элементы можна и на div-ах делать.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

98

SMM

28 ноября 2006, 10:28

#6

у меня как раз колонки построенны на таблице, делал без задней мысли, а оказывается не прогадал

Г0

27

Георгий_01

28 ноября 2006, 17:15

#7

SMM:
я свой диз на дивах построил - megaobzor.com

слишком простой диз - чтобы говорить о серьёзной дивной вёрстке - это можно было бы и в таблицах сделать без проблем

K. Ermakov:
-K-, должно помочь изучение http://softwaremaniacs.org/blog/category/web/primer/

здесь есть не всё - порекомендуйте ещё сайт с примерами на xhml - на русском

DIMON-UA:
Конечно, на div-ах код получится более компактный, но в Мозиле при нажатом Ctrl скролингом меняется размер шрифта. И тогда весь дизайн построеный только на div-ах просто разваливается. Есть ли в этом смысл? Все должно быть в меру. Я считаю что идеально - это каркас сверстаный в таблицах, а внутринние элементы можна и на div-ах делать.

и в таблице и в дивах и даже если у вас ie - при указании динамического размера шрифта при нажатом ctrl - меняется размер шрифта - в этом и загвоздка вёрстки сложных дизайнов, для людей с ограниченными зрительными способностями и с большими мониторами

Поедушки, попереваривашки, потягушки и посрашки. (http://www.artlebedev.ru/kovodstvo/business-lynch/2007/10/15/)

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

108

Bush

28 ноября 2006, 17:58

#8

Георгий_01:
здесь есть не всё - порекомендуйте ещё сайт с примерами на xhml - на русском

там достаточно для изучения темы топика.

Добавочные русурсы:

Конечно, на div-ах код получится более компактный, но в Мозиле при нажатом Ctrl скролингом меняется размер шрифта. И тогда весь дизайн построеный только на div-ах просто разваливается. ...

Все от рук зависит.

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Что делать, если ваша email-рассылка попала в спам