- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
До этого верстал только таблицами. И вот решил попробовать 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>
padding-top:3px; padding-left:3px; padding-right:3px; padding-bottom:3px
можно сократить до padding 3px 3px 3px 3px;
ТС, забыли сделать min-width, который работал бы во всеми горячо любимом IE6.
можно сократить до padding 3px 3px 3px 3px;
По идее, можно еще короче=)
уж, если сокращать, то сокращать: padding: 3px;
По идее, можно еще короче=)
я на тот случай, если отступы будут все таки разными-)
я на тот случай, если отступы будут все таки разными-)
не что так увильнул:D
Тс вы бы лучше залили на хост и скинули ссылку а так на код ваш смотреть даже не хочется, оформите как полагается.
ТС, забыли сделать min-width, который работал бы во всеми горячо любимом IE6.
Не забыл :) Просто решил не загромождать код (тут все вроде расписано).
Evlampiy добавил 10.08.2009 в 15:07
... лучше залили на хост и скинули ссылку а так на код ваш смотреть даже не хочется, оформите как полагается.
Прошу прощения. Не подумал, что так будет удобнее :(
Просматриваемая страничка тут.
можно сократить до padding 3px 3px 3px 3px;
А можно до padding: 3px 3px;☝
Evlampiy, молоток, только что-то слишком много контейнеров, как минимум container0, по моем беглому взгляду на код, можно выкинуть, и еще без пары обойтись, хотя Ваш макет - Вам виднее.
У меня только один вопрос - а если сайт будет, скажем, про рентгеноэлектрокардиографические кабинеты, в левой колонке Вы их тоже не пощадите? :)
Я его нежно руками перенесу :)
ТС вы веткой форума не ошиблись ? :)