Не могу найти ошибку

Demonhart · 08.05.2011, 20:09

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

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

HTMl :

Код:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." />
<meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Пиггасы | Главная</title>
</head>
  <body>
<div id="container">
<div id="header">
<div id="nav">
<ul>
<li>Главная</li>
<li><a href="#">О нас</a></li>
<li><a href="#">О летучести</a></li>
<li><a href="#">О везучести</a></li>
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>
</div>
</div>
  </body>
  </html>

и CSS :

Код:

*{
margin:0;
border:0;
padding: 0;
}

body{
padding: 2% 0 0;
background: #fff;
color: #333;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
}

#container {
width:760px;
margin: 0 auto;}

#header {
background : url(header.jpg) no-repeat;
width:598px;
height: 125px;}

#nav {
background: url(grey.jpg) repeat-x;
color: #f00;
font-size: 120%;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}

#nav ul{
list-style-type: none;
}

#nav li{
display:inline;
margin: 0 8px;
}

#nav li a{
color: #0c0;
}

#nav li a:hover{
color: #f00;
}

a {
text-decoration: none;
}

Вот что выдает мне : http://s1.ipicture.ru/uploads/20110508/WrCq1E6f.jpg

vladendark · 09.05.2011, 15:08

у вас id="nav" вложено внутрь id="hader".
поскольку вертикальное выравнивание не определено, то она(навигация) и появляется в самом верху контейнера (header).
вариантов решения проблемы over9000. Самый простой - разложить структуру в поток и вынести навигацию за пределы header. Т.Е. (примерная схема)

Код:

<!doctype> <!--Не слушайти СамиЗнаетеКого и объявляйте doctype-->
<html>
<head>
  <title><title>
  <meta>.....</meta>
</head>
<body>
<div id="header">
  <div id="header_pict">Шапочко</div>
  <div id="nav">менюшечко</div>
</div>
<div id="content">
  <div id="leftslide">левый блочек</div>
  <divid="content">содержаннице</div>
</div>
<div id="footer">подвальчег</div>
</body>
</html>

2-й вариант предполагает задание для
header{ position:relative}
nav:{position:relative; bottom:0; left:10%}

короче говоря - вариантов тьма

Demonhart · 09.05.2011, 17:25

Спасибо вам, о мудрейший...я догадывался о том что "нав" вложен" в "хеадер" но понятия не имел как это исправить

vladendark · 10.05.2011, 08:58

Цитата:

но понятия не имел как это исправить

сейчас имеете?
ps язвить-то не обязательно

Demonhart · 11.05.2011, 20:59

Простите если обидел, я писал это искренне ))) Читал "Багдадского Вора" - набрался выражений ))))

Да теперь имею понятия, благодарю.
У меня еще тут мааленькая проблемка : расстояние между словами в (!)некоторых местах больше чем обычно, я пробовал использовать "word-spacing" но ничего не меняется. Даже не знаю (0.0)

Вот стили по блоку :

Цитата:

#text {
width: 500px;
margin: 10px 10px;
float: right;
font-size: 25;
padding: 5px;
border-left: 1px solid #fff;
word-spacing: normal;}

#text h2 {
color: #63c;
text-align: center;
font-family: Arial, serif;
font-size: 30px;}

#text p{
text-indent: 20px;
text-align: justify;
margin: 0;
padding: o 15px;
color: black;}

В ХТМЛ просто 3 абзаца и между ними картинки с обтеканием. Сей глюк конечно же в абзацах ) О..только что заметил что этого нет если картинки находятся справа или их нет вообще, возникло предположение что слова не могут "найти себе место", может все из за "margin" ?

vladendark · 12.05.2011, 11:39

Цитата:

text-align: justify;

убираем эту ересь и все должно быть в ажуре

Demonhart · 15.05.2011, 10:35

Хм...действительно...спасибо ))

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
найти ошибку	parch	ASP, Perl, PHP и MySQL	1	24.12.2009 13:12
Помогите найти ошибку	ECorWar	HTML, CSS, JavaScript	0	08.11.2006 06:50
Не могу найти ошибку	DjMax	HTML, CSS, JavaScript	2	21.10.2006 09:13
Помогите найти ошибку в функции	Lander	ASP, Perl, PHP и MySQL	2	26.02.2006 13:34
Помогите найти ошибку....	MaDW	HTML, CSS, JavaScript	2	19.08.2005 12:23

09.05.2011, 15:08	#2
vladendark	у вас id="nav" вложено внутрь id="hader". поскольку вертикальное выравнивание не определено, то она(навигация) и появляется в самом верху контейнера (header). вариантов решения проблемы over9000. Самый простой - разложить структуру в поток и вынести навигацию за пределы header. Т.Е. (примерная схема) Код: <!doctype> <!--Не слушайти СамиЗнаетеКого и объявляйте doctype--> <html> <head> <title><title> <meta>.....</meta> </head> <body> <div id="header"> <div id="header_pict">Шапочко</div> <div id="nav">менюшечко</div> </div> <div id="content"> <div id="leftslide">левый блочек</div> <divid="content">содержаннице</div> </div> <div id="footer">подвальчег</div> </body> </html> 2-й вариант предполагает задание для header{ position:relative} nav:{position:relative; bottom:0; left:10%} короче говоря - вариантов тьма

09.05.2011, 17:25	#3
Demonhart	Спасибо вам, о мудрейший...я догадывался о том что "нав" вложен" в "хеадер" но понятия не имел как это исправить

15.05.2011, 10:35	#7
Demonhart	Хм...действительно...спасибо ))

Опции темы
Версия для печати Отправить по электронной почте

08.05.2011, 20:09
Ссылки