Верстка DIVами

rus · August 19, 2008

Вот, думал будет легко сверстать на дивах, ан нет, в разных браузерах все по разному.

В основном футер едет вниз (его контент тянет по высоте), а левый и правый блоки не тянутся вместе с контентом.

Если контент определенной высоты, то проблем вроде как и нет, но стоит его объем увеличить, (тоесть он тянется по высоте) - то сразу лезут косяки.

HTML:

<body>
<div id="top_bg">
<div id="shapka_left"><img src="shapka_left.jpg" usemap="#Map" alt=""></div>
<div id="shapka_right"><img src="shapka_right.jpg"></div>
</div>
<div id="top_nav"></div>
<div id="speiser"><img src="speiser.gif" height="5px" width="100%"></div>
<map name="Map"><area shape="rect" coords="-1,-1,230,190" href="index.html">
</map>
<div id="left_blok">
<ul>
<li >
Test
</li>
</ul>
</div>
<div id="right_blok">
</div>
<div id="content">
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<div id="box">
</div>
</div>
<div id="footer">
</div>
</body>

CSS:

body {
margin:0;
padding:0;
width:100%;
height:100%;
scrollbar-3dlight-color: White;
scrollbar-arrow-color: #38708D;
scrollbar-base-color: White;
scrollbar-darkshadow-color: White;
scrollbar-face-color: White;
scrollbar-highlight-color: #38708D;
scrollbar-shadow-color: #38708D;
scrollbar-track-color: White;
}
html {
margin:0;
padding:0;
width:100%;
height:100%;
}
* html #content {
height: 100%;
}
#top_bg {
width:100%;
background:url(../images/shapka_background.jpg);
background-repeat:repeat-x;
position:absolute;
top:0;
}
#shapka_left {
top:0;
left:0;
}
#shapka_right {
position:absolute;
top:0;
right:0;
}
#top_nav {
position:absolute;
top:160px;
background:url(../images/background.gif);
background-repeat:repeat-x;
width:100%;
height:25px;
border:#E2E2E2 solid 2px;
}
#speiser {
position:absolute;
top:185px;
width:100%;
height:5px;
}
#content {
position: relative;
padding:200px 10px 10px 10px;
left:15%;
right:15%;
min-height: 100%;
width:70%;
}
#box {
padding: 15px 5px 50px 15px;
overflow-y:scroll;
height: 800px;
}
#left_blok {
border:#E2E2E2 solid 2px;
background: #72BBDB;
width:15%;
height: 100%;
position:absolute;
margin-top:190px;
left:0px;
}
#right_blok {
border:#E2E2E2 solid 2px;
background: #72BBDB;
width:15%;
height: 100%;
position:absolute;
margin-top:190px;
right:0;
}
#footer {
position: relative;
margin-top: -30px;
height: 50px;
border:#E2E2E2 solid 2px;
background: #72BBDB;
bottom:0;
}
ul {
padding:5px 5px 5px 0px;
margin-left:5px;
}
li {
margin:5px 2px 5px 2px;
}
#left_nav a {
display: block;
background-color:#72BBDB;
font: bold 12px Verdana;
text-decoration: none;
color: #FFFFFF;
}
#left_nav a:hover {
background-color:#A8D5EC;
color: #FFFFFF;
}
P {
font: 12px  Arial, Helvetica, sans-serif; 
color: #333333;
}

И скролл в ИЕ показывает, а в остальных браузерах нет.

Vlad · August 19, 2008

А что с доктайпом, какой стоит?

rus · August 19, 2008

А что с доктайпом, какой стоит?

А он что при таком:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Что при таком:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Все одно выдает.

Azadi · August 19, 2008

Пока что кину в вас ссылкой, а вечером уже детально посмотрю. И еще. У вас в коде куча ссылок на разные картинки, может быть уберёте лишнюю разметку? Было бы проще вникнуть в суть проблемы.

rus · August 19, 2008

Пока что кину в вас ссылкой, а вечером уже детально посмотрю. И еще. У вас в коде куча ссылок на разные картинки, может быть уберёте лишнюю разметку? Было бы проще вникнуть в суть проблемы.

Ссылка очень хорошая и полезная - спасибо!

Но кидаться в меня ею не надо.

Azadi · August 19, 2008

Посмотрел. Естественно, левая и правая колонки не будут тянуться за #content, так как они спозиционированы абсолютно и вообще не влияют на другие элементы страницы. Смотрите мой способ или вариант Gordi, ссылку я вам уже давал Насчет разукрашивания скролла могу сказать лишь то, что посмотреть на это смогут только пользователи IE. С overflow-y:scroll тоже не все так просто, так как опять же не все браузеры понимают данное свойство.

P.S. а как данный макет должен выглядеть в идеале? Картинки приветствуются.

rus · August 20, 2008

Посмотрел. Естественно, левая и правая колонки не будут тянуться за #content, так как они спозиционированы абсолютно и вообще не влияют на другие элементы страницы. Смотрите мой способ или вариант Gordi, ссылку я вам уже давал Насчет разукрашивания скролла могу сказать лишь то, что посмотреть на это смогут только пользователи IE. С overflow-y:scroll тоже не все так просто, так как опять же не все браузеры понимают данное свойство.
P.S. а как данный макет должен выглядеть в идеале? Картинки приветствуются.

я могу ссылку дать:

http://webbeginner.ru/

Azadi · August 20, 2008

index.html :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Описание программ, изучение html, css, php и MSQL" />
<meta name="description" content="Развивающийся, информационный сайт для новичков по web программированию и сайтостроению." />
<title>Информационный сайт Novichok: html, css, php, mysqul, программы</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
<style type="text/css">
BODY {
	width: expression(documentElement.clientWidth < 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 800 ? "800px" : "auto") : "800px") : "auto");
}
#left_blok,#right_blok {
	height:expression(document.body.clientHeight-245);
}
#top_nav {
	width:expression(document.body.clientWidth-4);
}
</style>
<![endif]-->

</head>
<body>
<div id="wrap">
	  <!--Подключение шапки сайта вместе с навигацией-->
	<div id="top_bg">
	<div id="shapka_left"><img src="img/shapka_left.jpg" usemap="#Map" alt="Webbeginner - для начинающих сайтостроителей" /></div>
	<div id="shapka_right"><img src="img/shapka_right.jpg" alt="" /></div>

	</div>
	<div id="top_nav"></div>
	<div id="speiser"><img src="img/speiser.gif" alt=""/></div>
	<div>
	<map name="Map" id="Map"><area shape="rect" coords="-1,-1,230,190" href="index.html" />
	</map>
	</div>
	<!--Подключение левой части сайта вместе с навигацией-->
	<div id="left_blok">
	<ul id="left_nav">
		<li><a href="index.html" title="Главная">Главная</a></li>
		<li><a href="spravka.html" title="Справочники">Справочники</a></li>
		<li><a href="img/novichok2.jpg">Обзор статей</a></li>

		<li><a href="lessons.php" title="PHP и HTML в примерах">PHP и HTML в примерах</a></li>
		<li><a href="specials.html" title="Специальная рубрика Стихи">Спецрубрика</a></li>
		<li><a href="guest.html" title="Гостевая-отзывы">Гостевая-отзывы</a></li>
		<li><a href="contakts.html" title="Контакты, связь с администрацией">Контакты</a></li>
	  </ul>
	  <p style="padding-left:10px"><!--LiveInternet counter--><script type="text/javascript"><!--
	document.write("<a href='http://www.liveinternet.ru/click' "+
	"target=_blank><img src='http://counter.yadro.ru/hit?t27.20;r"+
	escape(document.referrer)+((typeof(screen)=="undefined")?"":
	";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
	screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
	";"+Math.random()+
	"' alt='' title='LiveInternet: показано количество просмотров и"+
	" посетителей' "+
	"border=0 width=88 height=120><\/a>")//--></script><!--/LiveInternet--></p>

	</div><!--Подключение правой части сайта-->
			  <div id="right_blok"></div>
	<!--Подключение контентной части сайта-->
	<div id="content">
	<div id="box"><h3>Добро  пожаловать на информационный сайт для начинающих пользователей интернет и  сайтостроителей!</h3>
	<p>Данный сайт создан для начинающих пользователей и хоть  подобных сайтов немало во всемирной паутине интернета, я постараюсь чтобы вся  информация, представленная на моем сайте была представленна пользователю как  можно понятнеее и доступна к ее осмыслению!
	Сразу перейду к описанию страниц моего интернет  ресурса, чтоб вам было понятнее какую инфомацию и с какой страницы вы сможете  почерпнуть.</p>
	<h2>Главная</h2>
	<p>Это можно сказать лицо моего сайта. На  главной странице вы увидете последние новости моего сайта, которые будут обновлятьсяпо мере моей занятности.</p>
	<h2>Специальная рубрика</h2>
	<p>Этот раздел никак не относится к  моей деятельности и к направлению моего сайта, так как данный раздел относится скорее к творческой деятельности и культуре. Я считаю, что этой рубрике каждый  кто хоть когда-нибудь брал в руки томик со стихами какого-нибудь известного  писателя, обязательно найдет и здесь для себя понравившееся стихотворение. Вы  наверное спросите, почему я их здесь разместил? Чтож, я отвечу, просто эти  стихи написаны моей мамой и я таким образом просто пиарю их, и это еще не все  стихи…</p>

	<h2>Форум</h2>
	<p>Ну, здесь все намного проще. На форуме в  обязательном порядке будет обсуждаться все ресурсы этого сайта, помимо этого  принимается любая критика и тем более пожелания по улучшению сайта, то есть  всех желающих принять участие в развитии сайта – милости просим!</p>
	<h2>Гостевая книга</h2>
	<p>Почти тоже самое что и форум, только  что регистрироваться нет нужды и сообщение оставить владельцу сайта, то есть  мне намного проще и быстрее.</p>
	<h2>Контакты</h2>
	<p>Единственные мои контакты это рабочий e-mail  и isq, так что как видите для связи со мной есть масса способов, главное чтобы было желание и повод.</p>
	<h2>Программы</h2>
	<p>В этом разделе вашему вниманию будут  представлены программы различного характера, такие которые должны быть у  каждого пользователя и те которые должны быть у начинающего сайтостроителя, так  как сайт все-таки расчитан на целевую аудиторию, а именно сайтостроителей.</p>
	<h2>Справочники</h2>

	<p>В этом разделе вы сможете скачать  скомпилированные в один файл одного определенного формата справочники. Все  справочники абсолютно разной тематики. Здесь представлена информация об  операционных системах и их настройках, о браузерах, о понятии биос, что это  такое и какую функцию он выполняет, есть справочники и по html - языку разметки текстовой и графической информации на сайте.</p>
	<p>Большая  просьба всем кому понравилась моя идея связанная с созданием данного сайтаи  если есть какие-либо предложения пишите мне либо в "Гостевую", либо  на "Форум", я обязательно с вами свяжусь.</p>
	<em>Желающие принять участие в  развитии данного сайта, с точки зрения познавательных целей милости просим к  нам на форум!</em>
	</div>
	</div>	<!--Подключение нижней части сайта-->
		<div id="footer">
	</div>
</div>
</body>
</html>

style.css :

html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#wrap {
	height:auto !important;
	min-height:100%;
	height:100%;
	position:relative;
	min-width:800px;
}
#top_bg {
width:100%;
background:url(img/shapka_background.jpg) repeat-x;
position:absolute;
top:0;
}
#shapka_left {
top:0;
left:0;
}
#shapka_right {
position:absolute;
top:0;
right:0;
}
#top_nav {
position:absolute;
top:160px;
left:0;
right:0;
background:url(img/background.gif);
background-repeat:repeat-x;
height:25px;
border:#E2E2E2 solid 2px;
}
#speiser IMG{
position:absolute;
top:189px;
width:100%;
height:5px;
}
#content {
position: relative;
padding:200px 10px 50px 10px;
left:15%;
right:15%;
min-height: 100%;
width:70%;
}
#left_blok {
border:#E2E2E2 solid 2px;
background: #72BBDB;
width:15%;
position:absolute;
top:195px;
left:0;
bottom:0;
}
#right_blok {
border:#E2E2E2 solid 2px;
background: #72BBDB;
width:15%;
position:absolute;
top:195px;
right:0;
bottom:0;
}
#box {
padding-bottom:50px;
padding-right:10px;
margin-right:15px;
padding-top:15px;
overflow:auto;
overflow-y:scroll;
height: 800px;
}
#footer {
position: relative;
margin-top: -50px;
height: 50px;
border:#E2E2E2 solid 2px;
background: #72BBDB;
bottom:0;
}
#footer_guest {
position: relative;
margin-top: 0px;
height: 50px;
border:#E2E2E2 solid 2px;
background: #72BBDB;
bottom:0;
}
ul {
padding:5px 5px 5px 0px;
margin-left:5px;
}
li {
margin:5px 2px 5px 2px;
}
#left_nav LI a {
display: block;
background-color:#72BBDB;
font: bold 12px Verdana;
text-decoration: none;
color: #FFFFFF;
height:1%;
}
#left_nav LI a:hover {
background-color:#A8D5EC;
color: #FFFFFF;
}
h3 {
font: bold 12px Verdana;
text-decoration: underline;
color:#014D8B;
}

h2
{
font: bold 12px  Arial, Helvetica, sans-serif;
text-decoration: none;
color:#883C3E;
}

P {
font: 12px  Arial, Helvetica, sans-serif; 
color: #333333;
margin:1em 0;
}

img {
border:none;
}
.divlink a {
font: bold 12px  Arial, Helvetica, sans-serif;
text-decoration: none;
color:#883C3E;
}
.divlink a:hover {
font: bold 12px  Arial, Helvetica, sans-serif;
text-decoration: underline;
color:#883C3E;
}
pre {
display: block;
padding: 10px;
font-size : 12px;
white-space: normal;
background-color: #EEEEEE;
line-height: 16px;
overflow-y:scroll;
height:400px;
width:800px;
}
H3 {
	text-align:center;
}

Прошу прощения за то, что выкладываю весь код целиком, просто уже футбол начинается

И еще хотел написать несколько критических замечаний относительно вашей верстки, но не буду, т.к. смотрите выше.

rus · August 20, 2008

Спасибо конечно за потраченное время, но ваш вариант не пашет!

Отдельное спасибо за сцылочку, дальше сам попробую разобраться.

P.S. - да уж, код конечно не стоило приводить, а по верстке с удовольствием приму ваши замечания!

Azadi · August 21, 2008

Спасибо конечно за потраченное время, но ваш вариант не пашет!
Отдельное спасибо за сцылочку, дальше сам попробую разобраться.
P.S. - да уж, код конечно не стоило приводить, а по верстке с удовольствием приму ваши замечания!

Нет уж, давайте закончим Еще раз выкладываю свой вариант - что не так, где не пашет? В каких браузерах неправильно отображается и как надо, чтобы отображалось?

Замечания по верстке:

1. Контструкции вида <div id="shapka_left"><img src="" alt="" /></div> лучше делать так:

<h1 id="logo"><a href="#" title="">Text<span></span></a></h1>

и

#logo A {
				position:relative;
				top:0;
				left:0;
				width:157px;
				height:139px;
				overflow:hidden;
				color:#fff;
				font-size:180%;
				display:block;
				text-align:center;				
			}
				#logo A SPAN {
					position:absolute;
					top:0;
					left:0;
					width:157px;
					height:139px;
					background:url(../img/logo.png) no-repeat;
					cursor:pointer;
				}

То есть теперь у нас логотип заключен в тег H1 - заголовок первого уровня (рекомендуется для главной страницы, не обязательно для внутренних), у картинки можно задать текстовое описание, которое будет доступно как при отключенных картинках, так и при отключенном CSS. Все это лишь для того, чтобы сделать документ логичнее и упростить разметку путем вывода декоративных изображений не через тег IMG, а бэкграундом. Тогда и карты-изображения (MAP) не понадобятся.

2. В коде нельзя писать несколько одинаковых идентификаторов (id), как это у вас сделано, допустим, для списка left_nav. Идентификатор должен быть уникальным, поэтому проще всего не городить его для LI, а просто добавить к UL и в CSS уже обращаться к нужному пункту через каскад (в моем примере я так и сделал).

3. Проверяйте код валидатором. Всегда. Это поможет вам избежать глупых ошибок.

<offtop>Футбол вчера удался на славу, поэтому я такой добрый </offtop>

rus · August 21, 2008

Ты прав, все отображается нормально, как и должно быть косяк мой.

Ты молодчина, а мне по ходу многому еще учиться надо, спасибо!

Просто дивами я впервые пробую верстать, так как говорят что табличная верстка уже "не в моде" да и некоторые вещи на таблице не сдалать.

Вот только с гостевой в ИЕ траблы, а так все в поряде!

P.S. первый раз вижу такую запись:

<h1 id="logo"><a href="#" title="">Text<span></span></a></h1>

Она точно будет валидная?

P.P.S. - еще раз огромное спасибо, с меня пиво.

Edited August 21, 2008 by rus

rus · August 21, 2008

to Azadi: Все, с гостевой разобрался!

Тему можно закрыть.

Azadi · August 21, 2008

P.S. первый раз вижу такую запись:
<h1 id="logo"><a href="#" title="">Text<span></span></a></h1>
Она точно будет валидная?

Она полностью валидна и даже почти что соблюдена семантика. Только вот лишний пустой SPAN выглядит нелепо... Но без него никак не добиться красивого эффекта. Кстати, этот способ придумал не я, он был подсмотрен у Юрия Артюха.

Sign In

Верстка DIVами

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information