Jump to content
  • 0

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


Faran
 Share

Question

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

427744.jpg

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

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

<title></title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="title" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>

<div id="wrapper">

<div id="header">

лого

</div><!-- #header-->

<div id="middle">

<div id="container">

<div id="content">

контент

</div><!-- #content-->

</div><!-- #container-->

<div class="sidebar sl">

левое меню

</div><!-- .sidebar.sl -->

</div><!-- #middle-->

</div><!-- #wrapper -->

<div id="footer">

футер

</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;

}

413408.jpg

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

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

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

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

Edited by Faran
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Значит со так, если вы начинаете что-то делать сделайте с начало каркас полностью, а уж потом наполняйте его текстом картинками и уже походу выставляйте отступы, шрифты и т.д. Часть кода у вас в 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 by stars
Link to comment
Share on other sites

  • 0

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

#middle {

width: 90%;

overflow: hidden;

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

Edited by Faran
Link to comment
Share on other sites

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

#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 надо будет релатив)

Link to comment
Share on other sites

  • 0

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

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

Edited by Faran
Link to comment
Share on other sites

  • 0

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

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