SpyLive
-
Posts
2 -
Joined
-
Last visited
SpyLive's Achievements
Explorer (1/14)
0
Reputation
-
Ну помогите хоть ктонибудь, очень надо. А то я уже начинаю думать, что так сделать невозможно. И тогда придется блок aunt помещать в left_blok, но хотелось бы сделать как написано.
-
Есть следующий код страницы: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Заголовок</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="container"> <div id="head"> Это заголовок. Он должен быть вверху. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. </div> <div id="main"> <div id="aunt"> Это меню должно быть слева самым верхним. Шириной в 25% экрана. Вниз увеличиваться с увеличением колличества текста. Вниз увеличиваться с увеличением колличества текста. Вниз увеличиваться с увеличением колличества текста. Вниз увеличиваться с увеличением колличества текста. <div class="blok"> Это блок который находится внутри блока меню. Он должен быть по ширине во весь левый блок и идти после текста блока меню. </div> </div> <div id="main_info"> Тут может быть очень много текста. Блок должен быть посередине. Шириной 50% экрана. Вниз увеличиваться с увеличением колличества текста. А дальше идет очень много текста. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. <div class="main_blok"> Это блок который находится. внутри главного блока. Он должен быть по ширине во весь главный блок и идти после текста главного блока.Таких блоков может быть несколько. </div> <div class="main_blok"> Это блок который находится. внутри главного блока. Он должен быть по ширине во весь главный блок и идти после текста главного блока.Таких блоков может быть несколько. </div> <div class="main_blok"> Это блок который находится. внутри главного блока. Он должен быть по ширине во весь главный блок и идти после текста главного блока.Таких блоков может быть несколько. </div> <div class="main_blok"> Это блок который находится. внутри главного блока. Он должен быть по ширине во весь главный блок и идти после текста главного блока.Таких блоков может быть несколько. </div> </div> <div id="left_blok"> Этот блок будет идти после блока aunt слева. Внутри него будут содержаться другие блоки. <div class="blok"> Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> <div class="blok"> Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> <div class="blok"> Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> <div class="blok"> Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> <div class="blok"> Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> </div> <div id="right_blok"> Этот блок будет идти справа от блока main_info. Шириной в 25% экрана. Внутри него будут содержаться другие блоки. <div class="blok"> Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> <div class="blok"> Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> <div class="blok"> Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> <div class="blok"> Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> <div class="blok"> Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько. </div> </div> </div> <div id="meta"> Это подвал. Он должен быть внизу. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. </div> </div> </body> </html> И код CSS файла: /* index ******************/ html,body{ margin: 0; padding: 0; } /*Боди это вся страничка, здесь задаются параметры на всю страницу сразу...че и как в ней будет.(боковые отступы, центрирование и т.д.)*/ body { font: 76% arial,sans-serif; text-align: center; } #container{ text-align: left; width: 1024px; margin: 0 auto; } /*id="head" тут пишешь где и как должна находится шапка*/ #head { position:relative } /*id="main" тут пишешь где и как должен находится весь главный блок который идет после шапки и перед подвалом*/ #main { width: 100%; } /*Дальше идут 4 блока которые отвечают за всю информацию внутри главного блока(и если их правильно расположить то последние 2 класса можно просто оставить пустыми....они и так должны правильно отобразиться)*/ #aunt { float: left; width: 20%; } #main_info { float: left; width: 60%; } #left_blok { float: left; width: 20%; margin-left:-80% } #right_blok { float: right; width: 20%; } /*id="meta" тут пишешь где и как должен находится подвал(сразу после главного блока)*/ #meta { position: absolute; bottom: 0; width: 100%; } /*2 класса которые отвечают за отображение инфы в отдельных блоках главного блока (main_blok) и всех боковых блоков (blok)*/ .main_blok { } .blok { } По содержанию страницы впринципе понятно как должны следовать блоки. Но напишу отдельно: 1.Шапка 2.Блок основного содержания состоящий из 3 колонок. 2.1. В первой колонке должен идти вначале блок aunt, а за ним left_blok со всеми вложенными подблоками 2.2. Во второй колонке идет блок main_info с его подблоками 2.3. В третьей колонке блок right_blok соответственно с его подблоками. 3. Идет подлвал со всякой ерундой. Так вот необходимо не изменяя порядок следования блоков в html сделать такую верстку, уже все перепробовал но никак не получается. ЗЫ. Хотелось бы чтоб блоки получились резиновыми как сделано в http://forum.htmlbook.ru/index.php?showtopic=9199 ЗЫЫ. Заранее всм спасибо!