Некорректное Отображение Div'a

Funtik44 · September 6, 2010

Добрый день всем.

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

1. Главный контейнер (DIV, это картинка см. рис.1) прилип к левому краю, хотя все параметры я прописал в CSS для оцентровки. Такая картина во всех браузерах. В Opere вообще снизу появился какой-то подвал т.е. рис.1 не отображается там.

2. Меню почему-то не прилипает к верхнему краю, почему так? Появился отступ.

3. Меню делал по следующей технологии - http://demiart.ru/forum/index.php?showtopic=85145 Всё получилось, только не могу отобразить в этом меню хвост - поле, продолжение горизонтального меню, где уже нет кнопок (который на рис.2 серым цветом.)

Шаблон

Рис.1

Рис.2

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Windows-1251">
<title>Главная</title>
<link rel="stylesheet" href="all.css" type="text/css" media="screen">
</head>
<body id="site1page">
<div id="maindiv">


<div id="wrapper">
<ul id="navbar">
	<li><a href="site1.html" class="site1">Сайт 1</a></li>
	<li><a href="site2.html" class="site2">Сайт 2</a></li>
	<li><a href="site3.html" class="site3">Сайт 3</a></li>
	<li><a href="site4.html" class="site4">Сайт 4</a></li>
	<li><a href="site5.html" class="site5">Сайт 5</a></li>
	<li><a href="site6.html" class="site6">Сайт 6</a></li>
	<li><a href="site7.html" class="site7">Сайт 7</a></li>
	<li><a href="site8.html" class="site8">Сайт 8</a></li>
	<li><a href="site9.html" class="site9">Сайт 9</a></li>
	<li><a href="site10.html" class="site10">Сайт 10</a></li>
	<li><a href="site11.html" class="site11">Сайт 11</a></li>
	<li><a href="site12.html" class="site12">Сайт 12</a></li>
</ul>
</div>

</div>
</body>
</html>

CSS:


*
{outline: none;}

body
{margin: 0;
padding: 0;
border: 0px;
background-color: #b0d3f3;
}

#maindiv
{width: 1162px;
height: 100%;
border: 0;
padding: 0;
background-image: url(images/centerbody.png);
background-repeat: repeat-y;
margin: 0 auto;
position: absolute;
}

#wrapper
{width: 1094px;
margin: 0 auto;
}

ul#navbar
{width: 1094px;
list-style: none;
}

ul#navbar li
{display: inline;
}

ul#navbar li a
{float: left;
width: 67px;
height: 28px;
background: url(images/menu.png) no-repeat;
text-indent: -9999px;
}

ul#navbar li a.site1
{background-position: 0px 0px;}

ul#navbar li a.site1:hover
{background-position: 0px -28px;}

body#site1page ul#navbar li a.site1
{background-position: 0px -56px;}

.
.
.

ul#navbar li a.site12
{background-position: 0px 0px;}

ul#navbar li a.site12:hover
{background-position: 0px -28px;}

body#site12page ul#navbar li a.site12
{background-position: 0px -56px;}

Edited September 7, 2010 by Funtik44

Funtik44 · September 7, 2010

Ну что, никто не знает в чем дело? Мне казалось, что здесь достаточно простое решение! Народ помогите пожалуйста!!!

PS Хотябы первый вопрос подскажите пожалуйста!!!

Edited September 7, 2010 by Funtik44

Vlad · September 7, 2010

position: absolute; надо убрать.

Funtik44 · September 7, 2010

Тогда картинка или сам контейнер "maindiv" проподает вообще! Т.е. еще что-то нужно добавить)))Только вот что? И куда?

Great Rash · September 7, 2010

Вы делаете все очень криво.

Для начала, откуда вы взяли такую хитрую ширину главного блока (1162px)?

Зачем вы поставили блоку #maindiv position: absolute;, какой в этом высший смысл?

Для чего вы создаете вложенные друг в друга блоки: #maindiv -> #wrapper, почему нельзя обойтись одним #wrapper?

Зачем вы пишете border: 0; для блока #maindiv?

Зачем вы пишете border: 0; для <body>?

Зачем это правило: * {outline: none;}?

1) все дело в position: absolute;

2) у элемента <ul> по умолчанию есть отступы сверху и снизу. Чтобы он "прилип" к верху обнулите их.

3) а почему собственно этот хвост должен отображаться? Бекграунд задан для <a>.

Funtik44 · September 7, 2010

Вы делаете все очень криво.
Для начала, откуда вы взяли такую хитрую ширину главного блока (1162px)?
Зачем вы поставили блоку #maindiv position: absolute;, какой в этом высший смысл?
Для чего вы создаете вложенные друг в друга блоки: #maindiv -> #wrapper, почему нельзя обойтись одним #wrapper?
Зачем вы пишете border: 0; для блока #maindiv?
Зачем вы пишете border: 0; для <body>?
Зачем это правило: * {outline: none;}?
1) все дело в position: absolute;
2) у элемента <ul> по умолчанию есть отступы сверху и снизу. Чтобы он "прилип" к верху обнулите их.
3) а почему собственно этот хвост должен отображаться? Бекграунд задан для <a>.

Ширина от разрешения на котором базируется сайт - 1280 на 1024.

Я уже убрал position: вообще.

Один Div (maindiv) это контейнер, в который будет помещено меню и остальной контент страницы. Контейнер #wrapper это само меню. Вы считаете, что лучше делать в одном?

Если не писать border: 0, то по умолчанию он будет 0? Или в чем тут смысл, не понимаю?

Правило тоже убрал.

1. Убрал.

2. Отступы, это что имеется ввиду, border, padding или margin? Все обнулил, отступ остались.

3. Бэкграунд задал для wrapper.

Получается следующая картина.

Благодаря вашим советам, получилось оцентровать блок maindiv и wrapper.

Но рисунок блока maindiv и хвост меню, серого цвета, появляются только тогда, когда я добавляю текст в блок wrapper, при этом рисунок растягивается по высоте текста.

Great Rash · September 7, 2010

Создайте страничку где-нить на народе (narod.yandex.ru) и киньте сюда ссылку. Иначе мало что понятно.

Funtik44 · September 7, 2010

Ребят, спасибо, пока всё получается.

2Great Rash А что с шириной в 1162? Что то не так сделал?

psywalker · September 7, 2010

2Great Rash А что с шириной в 1162? Что то не так сделал?

Да нет, просто ширина какая та не стандартная.

Funtik44 · September 7, 2010

Осталась одна проблемка - рисунок блока maindiv растягивается по высоте меню, адолжен по высоте на весь экран. Мне посоветовали такой прием - http://perishablepress.com/press/2009/12/0...-clearfix-hack/ Но не могу понять, куда прописывать данные параметры:

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* End hide from IE-mac */

Эти параметры в моём случае, необходимо прописывать для класса "maindiv" блока DIV?

И что такое ".clearfix:after", ".clearfix" - это наименование класса, а что такое двоеточие и "after"?

Да нет, просто ширина какая та не стандартная.

Просто я хотел отталкиваться от разрешения 1280 на 1024. Если брать такое разрешение, то картинка (Рис.1) в длину будет какраз 1162 пиксела.

Great Rash · September 7, 2010

Просто я хотел отталкиваться от разрешения 1280 на 1024. Если брать такое разрешение, то картинка (Рис.1) в длину будет какраз 1162 пиксела.

Это неправильный подход. Сейчас у многих нетбуки и ноутбуки, и в интернет большинство народа выходит именно с них, так что оптимальным решением будет заточка сайта под разрешение 1024х768. Опять же далеко не все будут разворачивать окно на весь экран (я к примеру никогда не разворачиваю).

Funtik44 · September 7, 2010

Ок. Понял. Сейчас переделаю.

Подскажите пожалуйста с последним вопросом!? Я всё сделал как советовали, все получилось, но бэкграунд, который показан на рисунке 1 в первом моём посте, отображается только по высоте блока div (который содержит меню, т.е. по высоте меню). Почему так, как растянуть картинку на все поле по вертикали?

Edited September 7, 2010 by Funtik44

Great Rash · September 7, 2010

Попробуйте задать так:

#navbar li {
	display: -moz-inline-stack;
	display: inline-block;
	//display: inline;
	//zoom: 1;
}

Серый бекграунд должен быть у <ul>, а не у <a>

Funtik44 · September 7, 2010

Попробуйте задать так:
#navbar li {
	display: -moz-inline-stack;
	display: inline-block;
	//display: inline;
	//zoom: 1;
}
Серый бекграунд должен быть у <ul>, а не у <a>

Ничего не меняется.

На счет серого бэкграунда, я его сделал для div'a а не для li, все работает.

Sign In

Некорректное Отображение Div'a

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