Меню "поехало" - HTML и CSS

fmonkey3105 · 14.06.2011, 22:06

Привет всем. Собственно, результат прикрепил в виде изображения.
Код HTML:

Код HTML:

<html>

<head>
<link href = 'style.css' rel = 'stylesheet' type = 'text/css'>
</head>

<body>

<center>
<div id = 'container'>
	<div id = 'header'>
		<p class = 'p_header'>Добро пожаловать на сайт, посвящённый uTorrent</p>
	</div>
	
	<div id = 'body'>
		<div id = 'menu'>
			<p class = 'p_menu' align = 'left'>
				<ol>
					<li>Заглавная страница </li> <br>
					<li>Видео </li> <br>
					<li>Фотографии </li> <br>
				</ol>
			</p>
		</div>
	</div>
	
	<div id = 'footer'>
		(с) Великий создатель
	</div>
	
</div>
</center>


</body>

</html>

Код style.css:

Код HTML:

body {
	
	background-color: #36D9D9;
	
}

#container {
	
	width: 800px;
	background-color: #FFFFFF;
	
}

.p_header {
	
	font: 14pt tahoma;
	border-bottom: 1px solid gray;
	
}

.p_menu {
	
	font-size: 14px;
	margin: 6px;
	
}

#header {

	border: 3px solid gray;
	height: 100px;

}

#body {

	border: 2px solid black;
	height: 700px;
	
}

#footer {

	border: 1px solid gray;
	background-color: #AAAAAA;
	height: 20px;

}

#menu {

	background-color: #EEEEEE;
	border-right: 4px solid gray;
	height: 700px;
	width: 10%;
	position: absolute;

}

В чём может быть ошибка? Почему так?

marccella · 14.06.2011, 22:20

Код:

#menu ol {text-align: left;}

Посавте еще DOCTYPE.

fmonkey3105 · 14.06.2011, 22:25

Код:

#menu ol {text-align: left;}

Заработало, спасибо. Я так понимаю, что до этого само расположение абзаца я определял, но не текста в нём.

Код:

Посавте еще DOCTYPE.

Вечно про него забываю, ибо там много "ерунды" написано, которую невозможно запомнить. Спасибо.

marccella · 14.06.2011, 22:28

Цитата:

Сообщение от fmonkey3105

Заработало, спасибо. Я так понимаю, что до этого само расположение абзаца я определял, но не текста в нём.

Пользуйтесь ресэтом.

fmonkey3105 · 14.06.2011, 22:30

Цитата:

Пользуйтесь ресетом.

Простите, можно поподробней?
Да, и ещё один вопрос: правильно ли применять тег <center> для центрирования всех элементов или нужно установить какой-либо параметр, аналогичный по назначению тегу <center>, где-либо в таблице стилей?

marccella · 14.06.2011, 22:34

http://www.codeisart.ru/reset-css/

marccella · 14.06.2011, 22:37

Впринципе это отдельно прикрепленный css файл с настройками, которые обнуляют стандартные стили барузеров. Они вариируются и их можно настраивать под себя.

Мой личный:

Код:

/*CSS Reset*/

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
dfn, em, img, strong, sub,
sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, footer, header,
menu, nav {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
    font-size: 100%;
    }

:focus { outline: 0; }

body {
        line-height: 1;
        color: black;
        background: transparent;
}

ul, li { list-style: none; }

 table {
        border-collapse: separate;
        border-spacing: 0;
}

caption, th, td {
        text-align: left;
        font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}

blockquote, q { quotes: "" ""; }

img { -ms-interpolation-mode: bicubic; } /*Better img Quality while Zooming in IE*/

h1, h2, h3, h4, h5, h6, p, pre, a, address, cite,
code, ul, ol, li, strong, abbr, acronym, sub, sup,
table {
       text-shadow: 1px 1px 1px rgba(0,0,0,0); } /*CSS3 Text AA*/

marccella · 14.06.2011, 22:45

Цитата:

Сообщение от fmonkey3105

Простите, можно поподробней?
Да, и ещё один вопрос: правильно ли применять тег <center> для центрирования всех элементов или нужно установить какой-либо параметр, аналогичный по назначению тегу <center>, где-либо в таблице стилей?

Чтобы центрировать текст, то в CSS

Код:

text-aling: center;

Блочные элементы можно центрировать ри помощи

Код:

margin: 0 auto;

но при этом надо чтобы у этого элемента было установлено значение width.

например

Код:

width: 100px;
widht: 10%;

fmonkey3105 · 14.06.2011, 22:52

marccella, спасибо за помощь.

14.06.2011, 22:20	#2
marccella Пользователь Регистрация: 22.05.2011 Сообщений: 42	Код: `#menu ol {text-align: left;}` Посавте еще DOCTYPE.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как обойти "преобразование типа из "string" в "float" невозможно"	lexluter1988	Помощь студентам	1	07.08.2010 12:23
"ОКРВВЕРХ", "ОКР", "ЕСЛИ". Как бы их связать.	Каравай	Microsoft Office Excel	13	17.02.2010 09:53
при вводе на листе "магазин"- код товара появлялось "описание" товара из "склада" с "продажной ценой"	aleksei78	Microsoft Office Excel	13	25.08.2009 12:04
Динамическое создание "суб-меню" из файлов в заданном каталоге	Abhorrer	Общие вопросы Delphi	5	14.03.2009 21:47

14.06.2011, 22:25	#3
fmonkey3105 Пользователь Регистрация: 09.06.2011 Сообщений: 17	Код: `#menu ol {text-align: left;}` Заработало, спасибо. Я так понимаю, что до этого само расположение абзаца я определял, но не текста в нём. Код: `Посавте еще DOCTYPE.` Вечно про него забываю, ибо там много "ерунды" написано, которую невозможно запомнить. Спасибо.

14.06.2011, 22:34	#6
marccella Пользователь Регистрация: 22.05.2011 Сообщений: 42	http://www.codeisart.ru/reset-css/

14.06.2011, 22:52	#9
fmonkey3105 Пользователь Регистрация: 09.06.2011 Сообщений: 17	marccella, спасибо за помощь.