Помогите сверстать

azarkin7 · April 26, 2011

Помогите сверстать,вот картинка. Делаю но получается что левый и правый блок вне блока content.Могу сюда скинуть свой код.СПАСИБО

Edited April 26, 2011 by azarkin7

Great Rash · April 26, 2011

http://htmlbook.ru/layout

azarkin7 · April 26, 2011

смотрел там.дело в том что в блоке container у меня содержится 3 блока(head,left,content). head находится в блоке container а остальные нет(ниже его стоят) хотя по коду находятся в теле container.Сейчас дам код

ukalen · April 26, 2011

<div id="wrapper">
  <div id="head"></div>
  <div id="left"></div>
  <div id="content"></div>
</div>
<style>
html,body {margin:0px;padding:0px;height:100%}
#wrapper {margin:0px auto; width:1000px; height:100%; background-color:#333}
#head {margin:top center; width:1000px; height:150px; background-color:#066}
#left {float:left; height:100%; width:100px; background-color:#C90}
#content {float:right; height:100%; width:90%; background-color:#FF3}
</style>

azarkin7 · April 26, 2011

body{
	margin:0px;
	background-color:#0F3}
#container{width:80%;
			background-color:#FFF;
			margin:auto;
			}
#left{float:left;
	border:1px solid #666;
	width:16%
}
#content{
		float:right;
		border:1px solid #666;
		width:82%}

<!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" type="text/css" href="css/style.css">
<body>
<div id="container">
<div id="head"><center>Head Block</center></div>
<div id="left"><center>left Block</center></div>
<div id="content"><center>content Block</center></div>
</div></body>
</head>
</html>

Что в моем коде не так?

Edited April 26, 2011 by azarkin7

Great Rash · April 26, 2011

Ок, я вам дам более точную ссылку:

http://htmlbook.ru/layout/fiksirovannaya-shirina-navigatsiya-sleva

azarkin7 · April 26, 2011

тык эт в пикселях, а мне желательно в процентах.в процентах я пробывал неполучается

Great Rash · April 26, 2011

Постарайтесь задействовать один очень полезный девайс - мозг

azarkin7 · April 26, 2011

Вы неповерите, но этот самый девайс я уже задействовал несколько раз.

Great Rash · April 26, 2011

Ну что ж так безуспешно то? Покажите что у вас получилось после того как задействовали?

psywalker · April 26, 2011

ТС, страницу тестовую с каркасом в студию!

azarkin7 · April 26, 2011

<!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>
<link rel="stylesheet" type="text/css" href="css/style.css">
<body>
<div id="general">
	<div id="header">Head Block</div>
		<div id="left">Left Block</div>
			<div id="right">Content Block</div>
</div>
</body>
</head>
</html>

body{margin:0px;
	background-color:#69F;
}
#general{margin:auto;
		background-color:#9CF;
		width:80%;
		border:5px solid #CCCCCC
}
#header{background-color:#FFF;
		height:200px;
		}
#left{float:left;
		width:16%;
		background-color:#CF0}
#right{float:right;
		width:83%;
}

Если посмотреть то Left Block и Content block идут после general. А Left и Content block должны быть внутри белого прямоугольника и обведены серой рамочкой. если посомтреть то в коде тка и есть, а на деле то блоки вне рамки.

Что я делаю не так?

Great Rash · April 26, 2011

#general{
  margin:auto;
  background-color:#9CF;
  width:80%;
  border:5px solid #CCCCCC;
  overflow: hidden;
  //zoom: 1;
}

azarkin7 · April 26, 2011

спасибо

Sign In

Помогите сверстать

Question

Link to comment

Share on other sites

13 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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information