Первый "блин" блочной верстки

Evlampiy · 2009-08-10T09:55:41.0000000Z

До этого верстал только таблицами. И вот решил попробовать DIVы... Посмотрите, пожалуйста, получившийся шаблон. Может что нужно добавить или исправить, дабы блоки не разъезжались и не наезжали друг на друга, в общем, чтобы все выглядело нормально в различных браузерах. Я явных косяков не вижу, но... Итак, код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd "> <html> <head> <title>Шаблон верстки страницы</title> <style type="text/css"> * { margin:0px; padding:0px; } html { height:100%; } body { min-height:100%; position:relative; min-width:800px; max-width:1278px; margin:auto; background-color:gray; } #container0 { width:100%; overflow:hidden; } #container01 { width:100%; float:right; margin-left:-306px; } #container { width:100%; overflow:hidden; } #container1 { width:100%; float:left; margin-right:-188px; } #container2 { margin-right:188px; } #container3 { width:100%; float:right; margin-left:-206px; } #logo { background:yellow; width:300px; float:left; overflow:hidden; padding-top:3px; padding-left:3px; padding-right:3px; padding-bottom:3px; } #header { background:lightyellow; margin-left:308px; overflow:hidden; padding-top:3px; padding-left:3px; padding-right:3px; padding-bottom:3px; } #left { background:lightgreen; width:200px; float:left; overflow:hidden; padding-top:3px; padding-left:3px; padding-right:3px; padding-bottom:3px; } #center { background:lightcyan; margin-left:208px; overflow:hidden; padding-top:3px; padding-left:3px; padding-right:3px; padding-bottom:3px; } #right { background:lightblue; float:right; width:180px; overflow:hidden; padding-top:3px; padding-left:3px; padding-right:3px; padding-bottom:3px; } #footer { bottom:0px; background:white; width:100%; } </style> </head> <body> <div id="container0"> <div id="container01"> <div id="header">"Шапка"<br> ширина auto</div> </div> <div id="logo">"Лого"<br> ширина 300px<br></div> </div> <div id="container"> <div id="container1"> <div id="container2"> <div id="container3"> <div id="center">"Центральная колонка"<br> ширина auto</div> </div> <div id="left">"Левая колонка"<br>ширина 200px<br>Оченьдлинноесловопкотороериходитсяобрезать</div> </div> </div> <div id="right">"Правая колонка"<br> ширина 180px</div> </div> <div id="footer"><center>"Копирайт" ширина auto</center></div> </body> </html>

95

Ткач

12 августа 2009, 18:51

#31

GtSwan:
Это я чтоб в рекламе не обвинили... :)

тут запрещено оставлять ссылки? здесь все ссылки в noindex

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)

116

Evlampiy

13 августа 2009, 18:15

#32

GtSwan, спасибо за ссылку.

Evlampiy добавил 13.08.2009 в 22:16

vandamme:
а представьте себе что в теле страницы будет рисунок с выравниванием слева типа <div align=left> как это обычно делается в DLE а потом с вашим шаблоном такое сотворится, мама не горюй

И как мне подправить код, чтобы такого не случилось?

Все будет хорошо... или может быть даже еще лучше :)

[Удален]

13 августа 2009, 18:23

#33

Ткач:
здесь все ссылки в noindex

Это ошибка.

Однако, GtSwan, замените ссылку на нормальную - это правило.

156

GtSwan

13 августа 2009, 18:52

#34

Прошу прощения! Ссылка на полезные советы: websovet.com

P.s. Сначала так и написал, а потом зачем-то изменил :(

Прошу уважаемых форумчан поверить, что я не сектант... Видимо seo-бес попутал...

Из личного опыта рекомендую качественный хостинг (http://timeweb.com/ru/?i=1889), который не разочарует.

116

Evlampiy

15 августа 2009, 08:26

#35

По-моему, немножко ушли от темы... :)

116

Evlampiy

18 августа 2009, 19:10

#36

Видимо развернутых советов, таких как от Californiy, я не дождусь...

В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи

Все что нужно знать о DDоS-атаках грамотному менеджеру