Всех с новым годом.
Одна из страниц сайта который верстаю должна быть сделна такВеб мастеринг средствами CSS Михаил Дубаков
Страница 424
"Отсюда вытекает, что с помощью стилей невозможно сверстать сайт, у которого есть шапка, центральная часть и так называемый футер.
Причем в центральной части должен быть элемент, который согласно дизайну должен соприкосаться и с шапкой, и с футером, например..."
| ШАпка высота 181 ширина 100% |
|Меню ширина 300px, высота все доступное|Вывод текста. ширина все доступное, высота все доступное |
| Подвал. высота 20px ширина 100% |
Вы неподскажете решение этой проблемы?
К сожелению возникает проблема. Блок 4 и 5 не растягиваються вниз при высоте более 750px. Это принципиально.Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} html {height: 100%; background: #FFFFFF;} body {background: url(bg.gif) repeat-y; min-width: 1000px; min-height: 100%;} * html body {height: 100%;} #block1 {background: #FFFFCC; width: 100%; height: 161px; overflow: hidden;} #left {width: 600px; float: left;} * html #left {margin-right: -3px;} #block2 {background: #CCFFCC; width: 600px; height: 400px; overflow: hidden;} #block4 {width: 300px; min-height: 350px; float: left;} #block5 {width: 300px; min-height: 350px; float: right;} #right {min-height: 750px; margin-left: 600px;} * html #right {margin-left: 597px; height: 1%;} </style> </head> <body> <div id="left"> * * * * * * </div> </body> </html>
Сегодня просмотрел Ваш код основательно. Неподходит к тому что я писал. Но идея мной понята. Хотя не понятно с высотой че делать.Block 4
По ширине 300px и неизменна.
По высоте 350 и растягиваеться вниз на полный экран
Block 5
По ширине 300px и неизменна.
По высоте 350 и растягиваеться вниз на полный экран
Наткнулся вчера в сети на такой пост:
Не будем спорить. Я не гуру верстки, а пока только учусь. Понимаю что таблицы для табличных данных.Мои пять копеек размышлизмов. ИМХО, в постановке вопроса не озвучена одна из основных проблем css-вёрстки.
Шаблон из 1-2 колонок вообще никаких проблем не составляет. Сложности возникают потом. И зависят они
1. от количества вертикальных колонок, которые в нём должны быть.
2. от того, есть ли среди них фиксированные колонки (ширина жёстко задана в px) или все колонки резиновые (в %).
3. ещё сильнее ситуацию усложняет необходимость фиксированной min-width (с которой в IE большие проблемы).
Первое резюме такое: если в резиновом шаблоне колонок 3 и более, без хорошего прошлого опыта вёрстки браться за div не советую (а если быть ещё более точным, вообще не стоит это делать на div'ах - сделать можно, но будет это только глумлением над хорошей идеей).
В 3-хколоночной вёрсте, если крайние фиксированные по ширине, а средняя резиновая, сложно соблюсти оптимальный порядок вывода контента в потоке. Если все "резиновые" - таких проблем нет. Будет проблема с min-width.
С 4-мя колонками проблем, по крайней мере, не меньше.
Но самое главное ИМХО даже не это. Всё равно при многоколоночной вёрстке сложно или вообще невозможно соблюсти ГЛАВНЫЙ принцип css-вёрстки: полное отделение контента от его представления: вложенность тэгов <table><tr><td> просто заменится на <div><div><div>. Т.е. исключительно в целях оформления контента придётся создавать дополнительные контейнеры (тем самым добавлять в конетент [в html] лишние div, не несущие совершенно никакой смысловой нагрузки, кроме оформительской). А редька (вложение* <div> в <div> ) ничем не слаще хрена (вложения <td> в <tr>). Какая разница, каким способом мы будем издеваться над хорошей идеей, если придерживаться её невозможно?
Второе резюме: многоколоночная резиновая вёрста (3 и более) с идеологией css2 не дружит или дружит плохо. Следовательно, такое сочетание смысла не имеет (отказывайтесь или от колонок или от div).
ЗЫ: Всё сказанное относится только к РЕЗИНОВОМУ шаблону. Фиксаж делать на порядок проще, но вопрос о нём не стоял.
