Jump to content
  • 0

Тупой вопрос

Игорь Ермаков

Asked by Игорь Ермаков,

 Share

Question

Игорь Ермаков Explorer

Игорь Ермаков

Posted
Posted

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

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

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

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

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
s0rr0w Explorer

s0rr0w

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

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

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

Link to comment
Share on other sites
  • 0
homm Explorer

homm

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

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

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

Link to comment
Share on other sites
  • 0
Игорь Ермаков Explorer

Игорь Ермаков

Posted
  • Author
Posted (edited)

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

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 by Игорь Ермаков
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
Go to question listing
×
×
  • 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

  I accept