Позиционирование ссылок - HTML и CSS

riptup · 24.11.2012, 17:18

Здравствуйте! Пробую делать горизонтальное меню и, столкнулся с такой проблемой. В общем задал правило: float: left; чтобы получились горизонтальные ссылки. Далее необходимо выровнять ссылки по центру блока #logo и 225px от top главного блока страницы. Вроде варианты пробую всякие но результат 0.
Вот собственно и код:

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Главная страница</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div id="header">
        <div id="logo">
		<ul>
			<li><a class="first" href="/">Главная</a></li>
			<li><a href="/register">Регистрация</a></li>
			<li><a href="/login">Вход</a></li>
			<li><a href="/rss">RSS></li>
			<li><a href="/sitemap.xml">Карта сайта</a></li>
		</ul>
		</div>
    </div>
</body>
</html>

Код HTML:

@import url(reset.css);

body {
	background-color: #303030;
	background-image: url(../images/fon.png);
	background-repeat: repead-x;
}

#header {
	width: 1920px;
	height: 243px;
	background-color: #000000;
}

#logo {
	background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
	width: 1180px;
	height: 243px;
	margin: 0 auto;
}

#logo ul li{
	float: left;
}

P.S. logo ul li я задал float: left, правильно ли я делаю? И как теперь спозицианировать их как надо? Может li вообще удалить в качестве родительского силектр'а, может достаточно #logo ul?
Я в этом деле не совсем разбираюсь, точнее изучаю, так как различные уроки не совсем помогаю изучить нормально CSS, так хоть подерхаю немного код. Пока не надоест

А так хоть что-то может получится =) Спасибо!

MrJenika · 24.11.2012, 23:28

Я делаю так:
для li

Код:

#logo ul li{
	display: inline-block;
}

ну и центрируем:

Код:

#logo {
	text-align: center;
margin: 225px 0 0 0;
}

riptup · 25.11.2012, 13:30

Цитата:

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

Я делаю так:

Так не хочет работать, может из зи "ресет" не хочет... не знаю.. пробовал даже на оборот ставить, менять местами и все такое.

Может есть другие варианты?

MrJenika · 25.11.2012, 13:38

Что вы делаете не так?
http://webinmd.com/test-files/test.html

Убрал картинки с фона, у меня их нет.

riptup · 25.11.2012, 13:47

Цитата:

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

Что вы делаете не так?
http://webinmd.com/test-files/test.html

Убрал картинки с фона, у меня их нет.

Оказывается, надо было удалить float:left. http://webinmd.com/test-files/test.html исходной код, он отсутствует. Удалил его добавил позиционирование #logo ul li margin: 225px 0 0 0 и все заработало.

С меня плюсик =))))) Спасибо!

24.11.2012, 17:18	#1
riptup Регистрация: 24.10.2011 Сообщений: 7	Позиционирование ссылок Здравствуйте! Пробую делать горизонтальное меню и, столкнулся с такой проблемой. В общем задал правило: float: left; чтобы получились горизонтальные ссылки. Далее необходимо выровнять ссылки по центру блока #logo и 225px от top главного блока страницы. Вроде варианты пробую всякие но результат 0. Вот собственно и код: Код HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Главная страница</title> <link href="css/style.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header"> <div id="logo"> <ul> <li><a class="first" href="/">Главная</a></li> <li><a href="/register">Регистрация</a></li> <li><a href="/login">Вход</a></li> <li><a href="/rss">RSS></li> <li><a href="/sitemap.xml">Карта сайта</a></li> </ul> </div> </div> </body> </html> Код HTML: @import url(reset.css); body { background-color: #303030; background-image: url(../images/fon.png); background-repeat: repead-x; } #header { width: 1920px; height: 243px; background-color: #000000; } #logo { background-image: url(../images/header.jpg); background-repeat: no-repeat; width: 1180px; height: 243px; margin: 0 auto; } #logo ul li{ float: left; } P.S. logo ul li я задал float: left, правильно ли я делаю? И как теперь спозицианировать их как надо? Может li вообще удалить в качестве родительского силектр'а, может достаточно #logo ul? Я в этом деле не совсем разбираюсь, точнее изучаю, так как различные уроки не совсем помогаю изучить нормально CSS, так хоть подерхаю немного код. Пока не надоест А так хоть что-то может получится =) Спасибо!

24.11.2012, 23:28	#2
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	Я делаю так: для li Код: `#logo ul li{ display: inline-block; }` ну и центрируем: Код: `#logo { text-align: center; margin: 225px 0 0 0; }` webinmd.com

25.11.2012, 13:38	#4
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	Что вы делаете не так? http://webinmd.com/test-files/test.html Убрал картинки с фона, у меня их нет. webinmd.com

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
позиционирование	Kvakin	HTML и CSS	0	30.04.2012 17:32
Позиционирование	DeZoX	HTML и CSS	2	03.01.2012 15:40
Позиционирование	Syltan	HTML и CSS	0	25.03.2010 19:15
Позиционирование	serg_sk	HTML и CSS	0	18.03.2010 20:42
Позиционирование каретки	Spice	Win Api	1	25.03.2009 04:51