Интересный дизайн с div - HTML и CSS

Kesha_pptp · 20.02.2010, 22:35

Доброго времени суток уважаемые верстальщики, пишу впервые на этом форуме, нужна помощь, есть вот такая расстановка блоков

Делал делал, делал делал в общем всё равно блок 6 не опускается ниже всех а должен если не писать float,вот код

PHP код:


			
<!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">

  <title>Дивный дизайн</title>

<style type="text/css"> 

body { margin: 0 0 0 0; }



#top_title { width: 100%; height: 150px; background-color: #eee;}  



<!--  !-->



#m_main { width: 100%; }

#main { width: 85%; float: left; margin-top: 10px;}



#information { width: 100%; background-color: #ccc; float: left; }



#inf_1 { width: 20%; background-color: #cec; float: left; margin-top: 10px; }



#inf_2 { width: 80%; background-color: #ecc; marhin-left: 20%; float: left; margin-top: 10px; }



<!--  !-->

#right_mini_info { width: 14%; background-color: #ccc; margin-left: 86%; margin-top: 10px; }

<!--  !-->



#copyright { width: 100%; margin-top: 10px; background-color: #999; position: absolute; }

</style>

</head> 

<body> 



<div id="top_title">1</div>



<div id="m_main">



<div id="main">

<div id="information">1<br><br><br><br><br><br><br><br><br><br><br><br><br></div>



<div id="inf_1">1</div>

<div id="inf_2">1<br><br><br></div>

</div>



<div id="right_mini_info">1<br><br><br><br><br><br><br><br><br><br><br><br></div>



</div>



<div id="copyright">copyright</div>



</body>

</html>

Очень надеюсь на вашу помощь, пример интересный и я думаю стоит того чтобы его разобрать.
Но ещё есть второй вопрос, в такой структуре как сделать такой же стиль как тут между ячейками http://g230101.dax.ru/ (мой сайт не несущий рекламы и выгоды) получается нужно использовать таблицы? Но ведь совмещать <div> с кучей таблиц вроде считается плохим тоном. Подскажите пожалуйста, буду очень признателен!

uberchel · 20.02.2010, 22:46

Ну во первых, думаю только на дивах сверстать целую страницу не есть хорошо, так как в ИЕ будет криво и не только ИЕ! Могу реализовать этоже, используя др подход.
По второму, вид таблицы можно сделать так: border:1px solid#000;

Kesha_pptp · 20.02.2010, 23:29

Цитата:

Сообщение от uberchel

Ну во первых, думаю только на дивах сверстать целую страницу не есть хорошо, так как в ИЕ будет криво и не только ИЕ! Могу реализовать этоже, используя др подход.
По второму, вид таблицы можно сделать так: border:1px solid#000;

Да действительно это можно реализовать таблицей например, но код будет огромен а это дополнительное время загрузки +не есть хорошая индексация у поисковиков!
Если можешь то расскажи как 6 блок сделать чисто внизу не зависимо от длины верхних)

13th · 20.02.2010, 23:59

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

Kesha_pptp · 21.02.2010, 00:13

Да, было бы не плохо, если можно всё таки объясните как сделать то что на картинке при помощи div

cooperOk · 21.02.2010, 00:57

исправь position: absolute; для копирайта на clear: both;

uberchel · 21.02.2010, 01:08

Ща подожди, набрасаю...

с таблицей:

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
body {background-color: #232323; padding:0px; }
a:link {text-decoration:none; color:#FFF200;}
a:visited {text-decoration:none; color:#FFF200;}
a:hover {text-decoration:none; color:#FFFFFF;}
.conteiner {color:#EFEFEF; font-size:8pt; font-family: Tahoma, Verdana;}
.head {background-color:#878778; border:1px solid#000000;}
.cont {background-color:#333333; border:1px solid#000000;}
.logo {font-size:14pt; padding-top:10px; font-weight:bold; color:#345200}
.title {font-size:8pt; font-weight:bold; border:1px solid#000000; padding:2px 0 2px 0; color:#F9E9D9;}
.mess {background-color:#454545; padding:5px 5px 5px 5px; margin:2px;}
.footer {background-color:#121212; border:1px solid#000000; padding:0px; text-align:center; clear: both}
h1, h2, h3 {font-family:Tahoma, Verdana, Helvetica, sans-serif; margin:0 0 0.2em 0; font-weight:bold;}
</style>
</head>
<body>
<div class="conteiner">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="950">
<tr>
<td class="head" colspan="2px" width="950" height="70" valign="top">
<div class="logo" align="center"><h1>SITENAME</h1></div></td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" border="0" align="center" width="950">
<tr>
<td colspan="2" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="cont" colspan="2" width="702" height="220" valign="top">
<div class="title" align="center"><h3>Content</h3></div><div class="mess" align="left">text<br />text</div></td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="cont" colspan="2" width="200" height="200" valign="top">
<div class="title" align="center"><h3>Select</h3></div><div class="mess" align="left">text<br />text</div></td>
<td colspan="2" width="10"></td>
<td class="cont" colspan="2" width="490" height="200" valign="top">
<div class="title" align="center"><h3>Tutorial</h3></div><div class="mess" align="left">text<br />text</div></td>
</tr>
</table>
</td>
<td class="cont" colspan="2" width="220" height="420" valign="top">
<div class="title" align="center"><h3>Menu</h3></div><div class="mess" align="left">text<br />text</div></td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" border="0" align="center" width="950">
<tr>
<td class="footer" colspan="2" width="950" height="48">Copyright <a href="/">SITENAME</a> &copy; 2010</td>
</tr>
</table>
</div>
</body>
</html>

С дивами - ваш переделан немного:

Код HTML:

<!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">
<title>Дивный дизайн</title>
<style type="text/css"> 
body {margin: 0 0 0 0;}
#top_title {width: 100%; height: 150px; background-color: #999;}  
#m_main {width: 100%; padding-bottom:10px;}
#main {width: 85%; float: left;  margin: 0 0 10px 0;}
#information {width: 100%; background-color: #ccc; float: left;}
#inf_1 {width: 20%; background-color: #cec; float: left; margin-top: 10px;}
#inf_2 {width: 79%; background-color: #ecc; marhin-left: 20%; float: right; margin-top: 10px;}
#right_mini_info {width: 14%; background-color: #ccc; margin-left: 86%; margin-top: 10px;}
#copyright {width: 100%; margin-top: 10px; background-color: #999; clear: both;}
</style>
</head> 
<body> 
<div id="top_title">1</div>
<div id="m_main">
<div id="main">
<div id="information">1</div>
<div id="inf_1">1</div>
<div id="inf_2">1</div>
</div>
<div id="right_mini_info">1</div>
</div>
<div id="copyright" align="center">copyright</div>
</body>
</html>

Цвета сам подберешь какие надо. Поисковики будут нормально индексировать, во первых сайты нормальные всегда пишутся на таблицах, а индексация зависит от правильного написания кода и оптимизации его, ну ещё конечно от релевантности контента, которым вы будете наполнять сайт, ключевым словам расставленным по контенту сайта и метатегах!

З.Ы. Метатеги в данный момент Яндекс игнорирует, так что для этого и надо расставлять ключевые слова в контенте сайта, ну а др. поисковики к метатегам относятся еще пока нормально.

Kesha_pptp · 21.02.2010, 11:32

uberchel - Огромное тебе человеческое спасибо за блочную вёрстку) ты действительно очень помог, а про таблицу я не знаю, сем всю жизнь пользовался ей, даже моя общественная сеть на ней, но когда почитал несколько сайтов про css 2008 года то там уже было написано что табличная вёрстка потихоньку изживает себя из-за своей сложной структуры а div действительно простой выход, вот я и не взлюбил таблицы хотя конечно никогда не откажусь от них!
А по поводу второго вопроса, в div если применить табличную вёрстку чтобы от углов по углам и сверху тень была это нормально? Ничего не стандартного не случится? Заранее благодарен за ответ!

uberchel · 21.02.2010, 11:41

Цитата:

А по поводу второго вопроса, в div если применить табличную вёрстку чтобы от углов по углам и сверху тень была это нормально? Ничего не стандартного не случится? Заранее благодарен за ответ!

Нормально, конечно смотря, как оптимизировать.

А все же, я бы советовал на табличной верстке взять, даже проверь - табличная отображается везде и без глюков, а на дивах - в опере немного кривит, ну это еще можно поправить, но вот в ИЕ полный отстой.
А таблицы думаю никогда не устареют, на то они и таблицы, без них нормально не сделать сайт, просто переусердствовать с количеством не надо.

Kesha_pptp · 21.02.2010, 12:19

Спасиб uberchel, можешь сказать ещё кое что, как бы мне поступить, чтоб такое почитать чтобы с индексацией моего проекта всё было хорошо, я этим никогда не занимался поэтому и вопрос такой родился, раньше я просто загонял в поисковики инфу что есть такой +meta и всё, если исходить из того что ya вдруг перестал с meta работать то тут уже непонятного стало больше! Очень расчитываю на ответ с примером! Заранее ОГРОМНОЕ спасибо

21.02.2010, 00:13	#5
Kesha_pptp Пользователь Регистрация: 12.02.2010 Сообщений: 11	) Да, было бы не плохо, если можно всё таки объясните как сделать то что на картинке при помощи div

21.02.2010, 12:19	#10
Kesha_pptp Пользователь Регистрация: 12.02.2010 Сообщений: 11	uberchel'у Спасиб uberchel, можешь сказать ещё кое что, как бы мне поступить, чтоб такое почитать чтобы с индексацией моего проекта всё было хорошо, я этим никогда не занимался поэтому и вопрос такой родился, раньше я просто загонял в поисковики инфу что есть такой +meta и всё, если исходить из того что ya вдруг перестал с meta работать то тут уже непонятного стало больше! Очень расчитываю на ответ с примером! Заранее ОГРОМНОЕ* спасибо*

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
растянуть div в другом div-e	slips	HTML и CSS	2	27.11.2009 15:43
Высота div-a в котором есть другой div	Antoha	HTML и CSS	2	07.08.2009 18:16
Позиционирование двух плавающих DIV внутри одного DIV	allocator	HTML и CSS	5	22.07.2009 13:48
Растягивающийся DIV и толкающий в низ следующий DIV	Суриков	HTML и CSS	6	29.08.2008 12:01
интересный @	LeoN	PHP	3	22.05.2008 16:41

20.02.2010, 22:35	#1
Kesha_pptp Пользователь Регистрация: 12.02.2010 Сообщений: 11	Интересный дизайн с div Доброго времени суток уважаемые верстальщики, пишу впервые на этом форуме, нужна помощь, есть вот такая расстановка блоков Делал делал, делал делал в общем всё равно блок 6 не опускается ниже всех а должен если не писать float,вот код PHP код: <!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"> <title>Дивный дизайн</title> <style type="text/css"> body { margin: 0 0 0 0; } #top_title { width: 100%; height: 150px; background-color: #eee;} <!-- !--> #m_main { width: 100%; } #main { width: 85%; float: left; margin-top: 10px;} #information { width: 100%; background-color: #ccc; float: left; } #inf_1 { width: 20%; background-color: #cec; float: left; margin-top: 10px; } #inf_2 { width: 80%; background-color: #ecc; marhin-left: 20%; float: left; margin-top: 10px; } <!-- !--> #right_mini_info { width: 14%; background-color: #ccc; margin-left: 86%; margin-top: 10px; } <!-- !--> #copyright { width: 100%; margin-top: 10px; background-color: #999; position: absolute; } </style> </head> <body> <div id="top_title">1</div> <div id="m_main"> <div id="main"> <div id="information">1<br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div id="inf_1">1</div> <div id="inf_2">1<br><br><br></div> </div> <div id="right_mini_info">1<br><br><br><br><br><br><br><br><br><br><br><br></div> </div> <div id="copyright">copyright</div> </body> </html> Очень надеюсь на вашу помощь, пример интересный и я думаю стоит того чтобы его разобрать. Но ещё есть второй вопрос, в такой структуре как сделать такой же стиль как тут между ячейками http://g230101.dax.ru/ (мой сайт не несущий рекламы и выгоды) получается нужно использовать таблицы? Но ведь совмещать <div> с кучей таблиц вроде считается плохим тоном. Подскажите пожалуйста, буду очень признателен!

20.02.2010, 22:46	#2
uberchel Участник клуба Регистрация: 19.01.2009 Сообщений: 1,453	Ну во первых, думаю только на дивах сверстать целую страницу не есть хорошо, так как в ИЕ будет криво и не только ИЕ! Могу реализовать этоже, используя др подход. По второму, вид таблицы можно сделать так: border:1px solid#000;

20.02.2010, 23:59	#4
13th Форумчанин Регистрация: 31.12.2008 Сообщений: 634	на таблицах надо делать инфо, а не структукру документа. если интересно, то завтра напишу гнотовый пример Возможно всё Пишу обо всем

21.02.2010, 00:57	#6
cooperOk Пользователь Регистрация: 11.11.2009 Сообщений: 66	исправь position: absolute; для копирайта на clear: both;

21.02.2010, 11:32	#8
Kesha_pptp Пользователь Регистрация: 12.02.2010 Сообщений: 11	uberchel - Огромное тебе человеческое спасибо за блочную вёрстку) ты действительно очень помог, а про таблицу я не знаю, сем всю жизнь пользовался ей, даже моя общественная сеть на ней, но когда почитал несколько сайтов про css 2008 года то там уже было написано что табличная вёрстка потихоньку изживает себя из-за своей сложной структуры а div действительно простой выход, вот я и не взлюбил таблицы хотя конечно никогда не откажусь от них! А по поводу второго вопроса, в div если применить табличную вёрстку чтобы от углов по углам и сверху тень была это нормально? Ничего не стандартного не случится? Заранее благодарен за ответ!