Jump to content
  • 0

Проблема с блочной версткой.


SpyLive
 Share

Question

Есть следующий код страницы:

<!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

ЗЫЫ. Заранее всм спасибо!

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Ммм. Так сделать можно, но работать будет не везде.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {margin: 0px; padding: 0px;}
html,body {
background:#fff;
height:100%;
min-width:760px;
}
/* Main layout*/
#wrap {
height:auto !important;
min-height:100%;
height:100%;
overflow:hidden;
position:relative;
z-index:1;
}
#container {
position:relative;
left:100%;
padding-bottom:5em;
z-index:2;
}
#container:after {
display:block;
content:"";
clear:both;
}
#header {
background:#ccc;
position:relative;
top:0;
left:0;
width:100%;
z-index:3;
height:5em;
}
#footer {
clear:both;
position:relative;
z-index:1;
margin-top:-5em;
height:5em;
background:#ccc;
}
/* Sub layout*/
#outer {
float:left;
position:relative;
width:25%;
margin-left:-100%;
background:#eef;
}
#aunt,#left {
float:left;
width:100%;
background:#eef;
}
#main {
float:none;
width:200%;
margin-left:100%;
background:#fee;
}
.right {
float:left;
position:relative;
width:25%;
margin-left:-25%;
background:#efe;
}
/* Beauty */
H1,H2,H3,H4,H5 {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
P {
margin:1em 2em;
}
</style>

<!--[if lte IE 7]>
<style type="text/css">
#container {
overflow:visible;
zoom:1;
}
*HTML #wrap {
zoom:1;
overflow:visible;
overflow-x:hidden;
}
*HTML BODY {
width: expression(documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760px" : "auto") : "760px") : "auto");
}

</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
BODY {
overflow:auto;
}
</style>
<![endif]-->
</head>

<body>
<div id="wrap">
<div id="header"><h1>Хидер</h1></div>
<div id="container">
<div id="outer">
<div id="aunt">
<h4>Aunt</h4>
<p>Непонятный блок</p>
</div>
<div id="main">
<h2>Main content</h2>
<p>Center</p>
</div>
<div id="left">
<h4>LSecond left content</h4>
<p>Left</p>
</div>
</div>
<div class="right">
<h3>Second right content</h3>
<p>Right</p>
</div>
</div>
</div>
<div id="footer"><h4>Футер</h4></div>
</body>
</html>

Но я больше склоняюсь к мысли, что проще будет при помощи абсолютного позиционирования и JavaScript решить ваше проблему.

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy