|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
20.02.2010, 22:35 | #1 |
Пользователь
Регистрация: 12.02.2010
Сообщений: 11
|
Интересный дизайн с div
Доброго времени суток уважаемые верстальщики, пишу впервые на этом форуме, нужна помощь, есть вот такая расстановка блоков
Делал делал, делал делал в общем всё равно блок 6 не опускается ниже всех а должен если не писать float,вот код PHP код:
Но ещё есть второй вопрос, в такой структуре как сделать такой же стиль как тут между ячейками http://g230101.dax.ru/ (мой сайт не несущий рекламы и выгоды) получается нужно использовать таблицы? Но ведь совмещать <div> с кучей таблиц вроде считается плохим тоном. Подскажите пожалуйста, буду очень признателен! |
20.02.2010, 22:46 | #2 |
Участник клуба
Регистрация: 19.01.2009
Сообщений: 1,453
|
Ну во первых, думаю только на дивах сверстать целую страницу не есть хорошо, так как в ИЕ будет криво и не только ИЕ! Могу реализовать этоже, используя др подход.
По второму, вид таблицы можно сделать так: border:1px solid#000; |
20.02.2010, 23:29 | #3 | |
Пользователь
Регистрация: 12.02.2010
Сообщений: 11
|
Хм
Цитата:
Если можешь то расскажи как 6 блок сделать чисто внизу не зависимо от длины верхних) |
|
21.02.2010, 00:13 | #5 |
Пользователь
Регистрация: 12.02.2010
Сообщений: 11
|
)
Да, было бы не плохо, если можно всё таки объясните как сделать то что на картинке при помощи div
|
21.02.2010, 00:57 | #6 |
Пользователь
Регистрация: 11.11.2009
Сообщений: 66
|
исправь position: absolute; для копирайта на clear: both;
|
21.02.2010, 01:08 | #7 |
Участник клуба
Регистрация: 19.01.2009
Сообщений: 1,453
|
Ща подожди, набрасаю...
с таблицей: Код 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> © 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> Цвета сам подберешь какие надо. Поисковики будут нормально индексировать, во первых сайты нормальные всегда пишутся на таблицах, а индексация зависит от правильного написания кода и оптимизации его, ну ещё конечно от релевантности контента, которым вы будете наполнять сайт, ключевым словам расставленным по контенту сайта и метатегах! З.Ы. Метатеги в данный момент Яндекс игнорирует, так что для этого и надо расставлять ключевые слова в контенте сайта, ну а др. поисковики к метатегам относятся еще пока нормально. Последний раз редактировалось uberchel; 21.02.2010 в 15:58. Причина: Забыл закрыть тег </head> |
21.02.2010, 11:32 | #8 |
Пользователь
Регистрация: 12.02.2010
Сообщений: 11
|
uberchel - Огромное тебе человеческое спасибо за блочную вёрстку) ты действительно очень помог, а про таблицу я не знаю, сем всю жизнь пользовался ей, даже моя общественная сеть на ней, но когда почитал несколько сайтов про css 2008 года то там уже было написано что табличная вёрстка потихоньку изживает себя из-за своей сложной структуры а div действительно простой выход, вот я и не взлюбил таблицы хотя конечно никогда не откажусь от них!
А по поводу второго вопроса, в div если применить табличную вёрстку чтобы от углов по углам и сверху тень была это нормально? Ничего не стандартного не случится? Заранее благодарен за ответ! |
21.02.2010, 11:41 | #9 | |
Участник клуба
Регистрация: 19.01.2009
Сообщений: 1,453
|
Цитата:
А все же, я бы советовал на табличной верстке взять, даже проверь - табличная отображается везде и без глюков, а на дивах - в опере немного кривит, ну это еще можно поправить, но вот в ИЕ полный отстой. А таблицы думаю никогда не устареют, на то они и таблицы, без них нормально не сделать сайт, просто переусердствовать с количеством не надо. |
|
21.02.2010, 12:19 | #10 |
Пользователь
Регистрация: 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 |