Тупой вопрос

Игорь Ермаков · March 3, 2009

Подскажите пожайлуста как мне реализовать такую задумку:

Есть 2 блока, один блок навигационный, а другой блок содержит в себе контент.

Я хочу сделать так, чтобы если блок контента выше чем блок навигации, то блок навигации всё равно был равным по высоте блоку контента, т.е не обрывался где-то на серидине страницы, а продолжался в низ до футера.

При помощи таблиц это реализуется просто, а вот как сделать при помощи блоков не понимаю :)

Victor Ananiev · March 3, 2009

почитай про имитацию faux columns или через бордеры)

Игорь Ермаков · March 3, 2009

Ни про faux ни про columns на сайте ничего не нашёл. Это CSS?

Причём здесь рамки не понимаю.

s0rr0w · March 3, 2009

При помощи таблиц это реализуется просто, а вот как сделать при помощи блоков не понимаю :)

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

Делайте то, что умеете делать.

Игорь Ермаков · March 3, 2009

Нет мне просто важно это понять.

Я просто вообще плохо понимаю вёрстку слоями, вот и решил создать экспериментальный сайт, ато всё таблицы.

homm · March 3, 2009

Нет мне просто важно это понять.
Я просто вообще плохо понимаю вёрстку слоями, вот и решил создать экспериментальный сайт, ато всё таблицы.

Вы говорите что вам нужно растянуть ячейку с меню до конца страницы. Но это не так. Вы просто мыслите таблицами и думаете, что это ячейка и хотите растянуть её. Если бы вы думали в других котегориях, вы бы поняли что вам нуужно разместить в футере объект на месте этой колонки, или там фон задать для неё. Растянуть ячейку в данном случае — способ сделать это, но этот способ не единственный. Чтобы помочь нужно знать что вам действительно нужно сделать, причем от вас нам это точно не узнать, так как все, что вы скажете, будет сказано через вашу призму восприятия таблиц.

Игорь Ермаков · March 3, 2009

='(

неужто у меня настолько искарёженное мышление.

ладно сейчас уже поздно, завтра нарисую. или сделаю на таблицах пример.

Игорь Ермаков · March 4, 2009

Как и обещал сделал табличный вариант.

1. прошу меня сильно не бить за кривой и неогранизованый css

2. Я хочу сверстать примерно так же как и в табличном варианте. Здесь если в столбец контента добавить много информации, то автоматически растягивается и второй столбик

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<style>
#sourse{margin:0 auto;
border:0px;
width:800px;
}

#header{background-color:#FFFFCC;}

#block{background-color:#00FF66;}

#menu{background-color:#99CC66;}

#content{width:75%;
background-color:#006666;}

#panel{width:25%;
background-color:#3300FF;}

#bottom{background-color:#66FFFF;}

#footer{background-color:#999999;}
</style>
</head>

<body>
<table id="sourse" cellpadding="0" cellspacing="0">
  <tr id="header">
	<td>Шапка</td>
  </tr>
  <tr id="block">
	<td>Здесь будет блок</td>
  </tr>
  <tr>
	<td id="menu">Здесь будет меню</td>
  </tr>
  <tr>
	<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
	  <tr>
		<td id="content">Блок контента
		</td>
		<td id="panel">Правая панель</td>
	  </tr>
	</table></td>
  </tr>
  <tr id="bottom">
	<td>Ещё блок</td>
  </tr>
  <tr id="footer">
	<td>подвал</td>
  </tr>
</table>
</body>
</html>

кстати вот мои попытки это реализовать

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>blog</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="contaner">

<div id="content">текст

</div>

<div id="two">
<div id="menu">
хтмл<br>
о_О<br>
вот
</div>
</div>



</div>


<div id="footer">Здесь будёт футер</div>

</body>
</html>

и вот ещё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style>
#header {/*шапка сайта*/
width:800px;/*задание ширины*/
margin:0 auto;/*выравнивание по центру*/
}

body {margin-top:0px;/*выравнивание по центру*/
}/*редактируем тег боди*/

#stroka {margin:0 auto;/*выравнивание по центру*/
background-color:#0099CC; /*задание фона*/
width:800px;/*задание ширины*/
}/*стили бегущей строки*/

#menu {margin:0 auto;/*выравнивание по центру*/
width:800px;/*задание ширины*/
}

#source{margin:0 auto;
background-color:#999999;
width:794px;
margin-top:0px;
overflow:auto;
border:solid;
}

#content {float:left;
width:574px;
background-color:#CCCCCC;
padding:10px;
}

#navigation {float:right;
background-color:#FFFFFF;
width:200px;
}





.h_mnu_01{
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
}

.h_mnu_01 ul{
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	background: #000000;
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 1px;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000
}

.h_mnu_01 ul li{
display: inline;
}

.h_mnu_01 ul li a{
	float: left;
	color: #FFFFFF;
	padding: 5px 11px;
	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
}

.h_mnu_01 ul li a:visited{
color: #FFFFFF;
}

.h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{
	color: #FFFF00 !important;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #008000;
}

#ind {float:right;}
</style>
</head>

<body>
<div id="header"><img src="Untitled-2.jpg" alt="шапка сайта"></div> <!--подключаем шапку сайта-->

<p id="stroka">текст</p>
<div id="menu"><div class="h_mnu_01"> 
<ul> 
<li><a href="/">Home</a></li>
<li><a href="#">maps</a></li>
<li><a href="">lol</a></li>
<li id="ind"><a href="">написать</a></li>
</ul>
</div>
</div>

<div id="source">
<div id="content">
</div>

<div id="navigation">Навигашка
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>


</div>

</body>
</html>

Edited March 4, 2009 by Игорь Ермаков

Victor Ananiev · March 4, 2009

http://www.google.ru/search?hl=ru&lr=&...mns&spell=1

и

http://www.htmlbook.ru/content/?id=109

Игорь Ермаков · March 5, 2009

http://www.htmlbook.ru/content/?id=109

Спасибо, то что нужно

http://www.google.ru/search?hl=ru&lr=&...mns&spell=1

Английского не знаю =\

s0rr0w · March 5, 2009

Английского не знаю =\

Незачот вам!

spdif · March 5, 2009

Английского не знаю =\

http://translate.google.com/translate?prev...history_state0=

...гугл об этом позаботился

Sign In

Тупой вопрос

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information