Помогите пожалуйста разделить шапку

Faran · April 10, 2010

Здравствуйте. Я создаю свой сайт и сейчас остановился на проблеме с шапкой. Я планирую сделать вот такой каркас

На основе шаблона я сделал вот такой HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

лого

</div>

контент

</div>

</div>

левое меню

</div>

</div>

</div>

футер

</div>

</body>

</html>

И соответственной CSS код к нему:

* {

margin: 0;

padding: 0;

}

html {height: 100%}

body {

font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

width: 100%;

height: 100%;

}

a {

color: blue;

outline: none;

text-decoration: underline;

}

a:hover {

text-decoration: none;

}

p {margin: 0 0 18px}

img {

border: none;

}

input {vertical-align: middle}

#wrapper {

width: 1000px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

}

/* Header

—————————————————————————--*/

#header {

height: 150px;

background: #FFE680;

}

/* Middle

—————————————————————————--*/

#middle {

width: 100%;

padding: 0 0 50px;

height: 1%;

}

#middle:after {

content: '.';

display: block;

clear: both;

visibility: hidden;

height: 0;

}

#container {

width: 100%;

float: left;

overflow: hidden;

}

#content {

padding: 0 0 0 220px;

}

/* Sidebar Left

—————————————————————————--*/

.sl {

float: left;

width: 200px;

margin-left: -100%;

position: relative;

background: #B5E3FF;

}

/* Footer

—————————————————————————--*/

#footer {

width: 1000px;

margin: -25px auto 0;

height: 25px;

background: #BFF08E;

}

Помогите пожалуйста разделить шапку на три блока.

1 бок ширина 285 px

2 блок ширина 285 px

3 блок ширина 430 px

Edited April 10, 2010 by Faran

stars · April 10, 2010

Значит со так, если вы начинаете что-то делать сделайте с начало каркас полностью, а уж потом наполняйте его текстом картинками и уже походу выставляйте отступы, шрифты и т.д. Часть кода у вас в css вообще лишняя. ну и собственно зачем писать width: 100% или height: 100% когда известно расстояние в px?

Я бы написал так:

<!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" >
<meta name="title" content="" >
<meta name="keywords" content="" >
<meta name="description" content="" >
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
	width: 100%;
}
body {
	width: 100%;
	height: 100%;
}
#wrapper {
	width: 1000px;
	margin: 0 auto;
	min-height: 100%;
	height: 100%;
}
#header {
	height: 150px;
	background: #FFE680;
	width: 100%;
}
.header1 {
	width: 285px;
	height: 100%;
	position: relative;
	float: left;
}
.header2 {
	width: 285px;
	height: 100%;
	position: relative;
	float: left;
}
.header3 {
	width: 430px;
	height: 100%;
	position: relative;
	float: left;
}
#middle {
	width: 100%;
	overflow: hidden;
}
#leftmeny {
	width: 200px;
	position: relative;
	float: left;
	overflow: hidden;
	background-color: aqua;
}
#content {
	width: 800px;
	position: relative;
	float: left;
	overflow: hidden;
	background-color: orange;
}
#footer {
	width: 1000px;
	height: 25px;
	margin: -25px auto 0;
	background: #BFF08E;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div class="header1">лого</div>
		<div class="header2">лого</div>
		<div class="header3">лого</div>
	</div>
	<div id="middle">
		<div id="leftmeny">левое меню</div>
		<div id="content">контент</div>
	</div>
</div>
<div id="footer"></div>
</body>
</html>

Edited April 10, 2010 by stars

Faran · April 10, 2010

Спасибо Вам! Код стал намного меньше. Скажите пожалуйста. а как сделать блок между шапкой и контейнером чуть уже, чтобы получилось как на первом макете? Я ставлю

#middle {

width: 90%;

overflow: hidden;

Но он всего лишь справа укорачивается.

Edited April 10, 2010 by Faran

stars · April 10, 2010

Спасибо Вам! Код стал намного меньше. Скажите пожалуйста. а как сделать блок между шапкой и контейнером чуть уже, чтобы получилось как на первом макете? Я ставлю
#middle {
width: 90%;
overflow: hidden;
Но он всего лишь справа укорачивается.

Во первых это расстояние надо откуда то взять из leftmeny или content дальше задаем ширину middle и либо отодвигаем его или центруем...

#middle {
	width: 900px;
	overflow: hidden;
	margin-left: 50px;

}
#leftmeny {
	width: 200px;
	position: relative;
	float: left;
	overflow: hidden;
	background-color: aqua;
}
#content {
	width: 700px;
	position: relative;
	float: left;
	overflow: hidden;
	background-color: orange;
}

вот так например... или margin: 0 auto; только зачем если и так известно растояние...

Кстати там у вас на рисунке есть еще мини блок так вот этот мини блок проще всего поместить в <div id="middle"> и задать абсолютом (только тогда header\middle надо будет релатив)

Faran · April 10, 2010

Ок! Спасибо!!!

Попробовал вставить в поле для текста текст. он вниз не идёт, только в строчку. Убрал overflow, текст идёт вниз, но футер исчезает, тоже самое с меню.

Edited April 10, 2010 by Faran

stars · April 10, 2010

Ну если бы знать что вы хотите получить в итоге... но в целом можно например так(не лучший вариант но все же...):

<!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" >
<meta name="title" content="" >
<meta name="keywords" content="" >
<meta name="description" content="" >
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
	width: 100%;
}
body {
	width: 100%;
	height: 100%;
}
#wrapper {
	width: 1000px;
	margin: 0 auto;
	min-height: 100%;
	height: 100%;
}
#header {
	height: 150px;
	background: #FFE680;
	width: 100%;
}
.header1 {
	width: 285px;
	height: 100%;
	position: relative;
	float: left;
}
.header2 {
	width: 285px;
	height: 100%;
	position: relative;
	float: left;
}
.header3 {
	width: 430px;
	height: 100%;
	position: relative;
	float: left;
}
#middle {
	width: 900px;
	overflow: hidden;
	margin: 0 auto;
}
#leftmeny {
	width: 200px;
	position: relative;
	float: left;
	overflow: hidden;
	background-color: aqua;
}
#content {
	width: 700px;
	position: relative;
	float: left;
	overflow: hidden;
	background-color: orange;
}
#footer {
	width: 1000px;
	height: 25px;
	margin: -25px auto 0;
	background: #BFF08E;
}
#miniblock {
	position: absolute;
	width: 235px;
	height: 30px;
	background-color: fuchsia;
	z-index: 10;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div class="header1">лого</div>
		<div class="header2">лого</div>
		<div class="header3">лого</div>
	</div>
	<div id="middle">
		<div id="miniblock">Миниблок</div>
		<div id="leftmeny"><div style="width:200px;height:30px;"></div>левое меню<br><br><br><br><br><br><br></div>
		<div id="content"><div style="width:35px;height:30px;position:relative;float:left;"></div>контент<br><br><br><br><br><br><br></div>
	</div>
</div>
<div id="footer"></div>
</body>
</html>

Мини блок в данном примере зафиксирован... На сегодня это мой последний ответ, не хочется пропустить отличную погоду, надеюсь вы разберитесь...

Edited April 10, 2010 by stars

Faran · April 10, 2010

Спасибо огромное!

Sign In

Помогите пожалуйста разделить шапку

Question

Faran

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

stars

Link to comment

Share on other sites

Faran

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

Faran

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

Faran

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information