Центриране на CSS меню

csforce · 23 Април 2012

Здравейте,
Имам едно малко но важно за мен проблемче... Менюто ми започва от ляво , а аз съм малко нов в тези скриптови маниики и нещо не ми се получава да си го центрирам да е винаги в центъра на екарана.

Ето го и CSS - ми

[css].bg {background: url(images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#44AEDB; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor

ointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:12px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #FF8C00; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#95d2ee; color:#FF8C00;}
.menu :hover ul.sub li a.fly:hover {background:#95d2ee url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#95d2ee url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}[/css]

perer · 23 Април 2012

Дай и HTML кода, но иначе с margin: 0 auto; става центрирането. Трябва да го оцелиш къде трябва да се сложи. Ако не можеш да се справиш дай да видим html-а

csforce · 23 Април 2012

До сега е мъчих ама нещо не ми се получава ... ето и html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>CSS Menu Maker</title>
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>

<div>
<ul class="menu">
	<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
	<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
		<ul class="sub">
			<li><a href="#">Sample Menu This is some longer text</a></li>			
			<li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
		<ul class="sub">
			<li><a href="#">Sample Menu This is some longer text</a></li>			
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
	<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
</div>

</body>
</html>

csforce · 23 Април 2012

Още един проблем който е доста по важен ... като сменя резолюцията от 1280/1024 на 1024/768 и става ужас последното меню става под първото и цялата страница се изкривява.. не знам дали е възможно да е от това центриране.. пробвах да задам margin:0 auto; обаче нямаше резултат.

perer · 23 Април 2012

Опитай така:
[css].nav{margin: 0 auto; display: inline;}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; width: 900px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; dislay: inline;}[/css]
На width сложи дължината на менюто. Колкото ти е.
А този клас nav е на div-а

Успех! :?:

csforce · 24 Април 2012

Направих промяна по кода но пак няма резултат упорито си стои в ляво ето и промяната :

Заместих

[css].menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }[/css]

С този код - променил съм width na 100 %

[css].nav{margin: 0 auto; display: inline;}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; width: 100%; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; dislay: inline;}[/css]

В индекса на менюто промених <div> </div> на <nav> </nav>

за да се центрира предполагам с този скрипт

[css]margin: 0 auto; display: inline;[/css]

но нещо не става пак си стои в лявата страна цялото меню .. пробвах да оптимизирам скрипта до колкото знам но съм на ясно, че съм босичък все още

Vladkata · 24 Април 2012

Не съм преглеждал целият код, но направи нов <div> и му задай следните стойности:
[css]
width: ширината на полето;
margin: 0 auto;
[/css]

Би трябвало да стане. Или виж ако вече е в друг <div> и наследява някакви стойности (можеш да провериш с Inspect Element в Google Chrome), изчисти стиловете:

HTML:

<div style="clear: both;"></div>

или задай на <div>-а в който е:
[css]
text-align: center;
[/css]

Надявам се да съм помогнал. Успех!

csforce · 24 Април 2012

Пробвах всякакви варианти но не става и не става.. това меню е прокълнато, ще трябва да го направя по простичко както си беше .. явно с падащи меню-та няма да е.

Ето и вариантите:

добавих div в css :

вариант 1

[css]div.menu1{
margin-left:auto;
margin-right:auto;
height:30px;
width:100%;
}[/css]

след което в индекса направих нов див клас menu1

вариант 2

[css]div.menu1{
margin: 0 auto;
height:30px;
width:100%;
}[/css]

същата работа..

в индекса вариант 1

HTML:

<div class="menu1" text-align: center; width: 100%; margin: 0 auto;>

вариант 2

HTML:

<div text-align: center; width: 100%; margin: 0 auto;>

вариант 3

HTML:

<div style="clear: both;" text-align: center; width: 100%; margin: 0 auto;>
<div class="menu1">

Не знам аз ли бъркам някъде или не правя нещо както трябва :idea:

csforce · 24 Април 2012

Както е казано в скоропоговорката самоука става по добър от учителя , та да си дойдем на думата с моите минимални познания по css стигнах до резултати :wink: в индекса ми

HTML:

<ul class="menu">

ul class - задава стойности на цялото меню според мен и взех та поразгледах този CSS за да видя какви стойности са зададени в class = menu и те бяха ..

[css].menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }[/css]

Тъй като не знам все още скриптовете какви стойности задават взех та ги премахнах за да видя какъв ще е ефекта защото след като му задавам margin:0 auto ; на мястото на margin:0; няма ефект взех че пренаписах целият код както аз си знам и стана ето така..

[css].menu {padding:0 0 0 32px; margin: 0 auto; list-style:none; height:40px; width: 100%; }[/css]

Иии ураа много добре центрира се менюто ама нещо ми липсваше .. и беше много видимо нямах background след което си зададох по мои си знания background ето така background: url(images/button1a.gif) без цвят под изображението и то този цвят да е с безкраен height .. и това беше бъг! накрая се получи това:

[css].menu {padding:0 0 0 32px; margin: 0 auto; list-style:none; height:40px; width: 100%; background: url(images/button1a.gif)}[/css]

тоест с моите минимални познания зададох нормални стойности на class=menu и се центрира без никакви дефекти.

Не съм на ясно какво означава тази точна, но давам точка на "perer" заради обърнатото внимание , и благодаря на всички.

Центриране на CSS меню

csforce

Registered

perer

Registered

csforce

Registered

csforce

Registered

perer

Registered

csforce

Registered

Vladkata

Registered

csforce

Registered

csforce

Registered