<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; }
/*id="head" тут пишешь где и как должна находится шапка*/ #head { position:relative }
/*id="main" тут пишешь где и как должен находится весь главный блок который идет после шапки и перед подвалом*/ #main { width: 100%; } /*Дальше идут 4 блока которые отвечают за всю информацию внутри главного блока(и если их правильно расположить то последние 2 класса можно просто оставить пустыми....они и так должны правильно отобразиться)*/ #aunt { float: left; width: 20%; }
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке.
Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
Question
SpyLive
Есть следующий код страницы:
И код CSS файла:
По содержанию страницы впринципе понятно как должны следовать блоки.
Но напишу отдельно:
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
ЗЫЫ. Заранее всм спасибо!
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.