[CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

mako241 · Post autor: **mako241** » wt kwie 29, 2008 7:00 pm

#menu{background:blue;width:600px;height:50px;margin:0 auto;font:14px Arial;line-height:50px;color:#fff;}
#menu li{float:left;list-style:none;}
#menu a{float:left;height:50px;padding:0 5px;margin:0 auto;display:block;font:14px Arial;line-height:50px;color:#fff;}
#menu a:hover{background:red;color:#fff;}
#menu .selected{color:#fff;}

Kod: Zaznacz cały

    <div id="menu">
		<ul>
	<li /><a href="http://www.adres.pl">qwerty</a>|
	<li /><a href="http://www.adres.pl">qwerty</a>|
	<li /><a href="http://www.adres.pl">qwerty</a>|
	<li /><a href="http://www.adres.pl">qwerty</a>|
	<li /><a href="http://www.adres.pl">qwerty</a>|
	<li /><a href="http://www.adres.pl">qwerty</a>|
	<li /><a href="http://www.adres.pl">qwerty</a>|
		</ul>
    </div>

Jak zrobić, aby wszystkie pozycje listy razem wzięte były wyśrodkowane w elemencie div#menu? Nie wchodzi w grę półśrodek, czyli dokładne zmierzenie szerokości wszystkich li razem, i ustawienie odpowiednich paddingów z lewej i prawej. Pozycje w liście będą się zmieniać w panelu admina, a menu ma pozostać po środku, bez edydowania pliku css. Bardziej elastyczny sposób potrzebny, próbowałem dużo z margin: 0 auto; ale nie dało efektu. Proszę o pomoc!

azamo · Post autor: **azamo** » wt kwie 29, 2008 7:21 pm

float:left sprawia zapewne, że nie działa margin:0 auto;, które musisz zresztą przypisać elementowi, który ma być wyśrodkowany (ul) a nie elementowi nadrzędnemu (div#menu).

Spróbuj tak:

Kod: Zaznacz cały

#menu
 { background:blue; width:600px; font:14px Arial; line-height:50px; color:#fff; text-align:center; }
#menu ul
 { margin:0 auto; }
#menu li
 { list-style-type:none; }
#menu a
 {height:50px; padding:0 5px; margin:0 auto; display:block; font:14px Arial; line-height:50px; color:#fff; }
#menu a:hover
 { background:red; color:#fff; }
#menu .selected
{ color:#fff; }

I przede wszystkim popraw:

Kod: Zaznacz cały

<li /><a href="http://www.adres.pl">qwerty</a>|

na

Kod: Zaznacz cały

<li><a href="http://www.adres.pl">qwerty</a>|</li>

mako241 · Post autor: **mako241** » wt kwie 29, 2008 7:45 pm

style dla UL dodałem, <li /> poprawiłem, ale to nic nie dało.
A usunięcie float'ów niestety nie jest chyba możliwe, bo po ich wykasowaniu pozycje listy pojawiają się jedna pod drugą. A ma to być menu poziome.

gorylek · Post autor: **gorylek** » wt kwie 29, 2008 8:38 pm

mako241, może to brak doświadczenia ale z poziomu CSS raczej nie da się tego zrobić. Głównie dlatego że musisz wszystkie pozycje menu wziąść w kontyner okalający i jego wyśrodkować a żeby było wszystko na środku, szerokość tego kontynera musi być taka jak łączna szerokość elementów w środku.
W samym CSS tego raczej nie zrobisz choć wszystkowiedzący nie jestem ale z pomocą PHP lub JS da się to zrobić spokojnie. Zwyczajnie kod stylu sobie generujesz a dokładnie szerokość tego elementu okalającego która będzie się równać ilość * szerokość elementów w środku.

azamo · Post autor: **azamo** » wt kwie 29, 2008 8:45 pm

Założyłem, że menu ma być pionowe... Sprawdź to http://www.zoffix.com/css/center#block-no-width

gorylek · Post autor: **gorylek** » wt kwie 29, 2008 9:09 pm

Jeżeli pionowe to tu masz przykład takowego wyśrodkowanego. Pokolorowałem je troche żeby pokazać co jak i gdzie:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
      <title>Test</title>
</head>
<body>

<style type="text/css">
* {margin 0; padding: 0;}
#menu{background-color: blue; width: 400px;}
#menu ul {width: 60px; margin: 0 auto; background-color: orange;}
#menu li{list-style:none; width: 50px;}
#menu a{width: 50px; height: 50px; padding: 0 5px; display: block; font:14px Arial; line-height: 50px; color: #fff;}
#menu a:hover{background: red; color: #fff;}
</style>

<div id="menu">
      <ul>
   <li><a href="http://www.adres.pl">qwerty</a></li>
   <li><a href="http://www.adres.pl">qwerty</a></li>
   <li><a href="http://www.adres.pl">qwerty</a></li>
   <li><a href="http://www.adres.pl">qwerty</a></li>
   <li><a href="http://www.adres.pl">qwerty</a></li>
   <li><a href="http://www.adres.pl">qwerty</a></li>
   <li><a href="http://www.adres.pl">qwerty</a></li>
      </ul>
</div>
</body>
</html>

PS: Doctype po to by margin: 0 auto; działało bez problemu.

mako241 · Post autor: **mako241** » śr kwie 30, 2008 6:55 am

azamo pisze:Założyłem, że menu ma być pionowe... Sprawdź to http://www.zoffix.com/css/center#block-no-width

Nie wiele dla mnie wynika z tego linku. Mógłbyś to odnośnieść do mojego przypadku? Bardzo proszę!

gorylek pisze:Założyłem, że menu ma być pionowe...
gdyby miało być pionowe, to bym usunął floaty i po problemie

azamo · Post autor: **azamo** » śr kwie 30, 2008 9:15 am

Nie wiele dla mnie wynika z tego linku

Przecież to dokładnie to czego szukasz.
W tamtym przykładzie #container odpowiada twojemu #menu, a .inner twojemu #menu ul

Musisz mieć coś takiego:

Kod: Zaznacz cały

<html>
<head>
<title>x</title>
<style type="text/css">
* {margin:0;padding;0;}
#menu
{background:blue;width:600px;height:50px;margin:0 auto;font:normal 14px/50px Arial;color:#fff;}
#menu ul
{background:green;}
#menu li
{display:block;float:left;list-style-type:none;}
#menu a
{display:block;float:left;height:50px;padding:0 5px;margin:0 auto;color:#fff;}


#menu ul { display: table; margin: 0 auto; } 

</style>

<!--[if IE]> 
<style type="text/css">
#menu { text-align: center; } 
#container * { text-align: left; } 
#menu ul { zoom: 1; display: inline; } 
</style> 
<![endif]-->
</head>

<body>

<div id="menu">
 <ul>
 <li><a href="http://www.adres.pl">qwerty</a>|</li>

 <li><a href="http://www.adres.pl">qwerty</a>|</li>
 <li><a href="http://www.adres.pl">qwerty</a>|</li>
 <li><a href="http://www.adres.pl">qwerty</a>|</li>
 <li><a href="http://www.adres.pl">qwerty</a>|</li>
 <li><a href="http://www.adres.pl">qwerty</a>|</li>

 <li><a href="http://www.adres.pl">qwerty</a></li>
 </ul>
</div>

</body>
</html>

W Firefoksie działa a pod linkiem, który ci podałem, jest w razie czego wskazówka jak to uruchomić w IE

mako241 · Post autor: **mako241** » śr kwie 30, 2008 9:48 am

azamo, skopiowałem źródło i bez jego edycji (usunąłem jedynie " | " pomiędzy pozycjami listy) i wrzuciłem na serwer.
Oto link: http://www.makotychy.yoyo.pl/proba.html

W mozilli idealnie, w IE całość jest "przyklejona" do lewej krawędzie przeglądarki, a menu (zielone) nie jest idealnie po środku (tak, jakby miało kilkanaście px paddingu z lewej). Co jest problemem?

Dziękuję Ci za poświęcenie i z góry za kolejną odpowiedź

azamo · Post autor: **azamo** » śr kwie 30, 2008 9:59 am

Szczerze mówiąc, nie wiem z czego wynikał problem. W każdym razie kiedy wyśrodkowałem całego diva z menu, zaczęło działać poprawnie (chyba):

Kod: Zaznacz cały

<html>
<head>
<title>x</title>
<style type="text/css">
* {margin:0;padding;0;}
body 
{text-align:center;}
#menu
{background:blue;width:600px;height:50px;margin:0 auto;font:normal 14px/50px Arial;color:#fff;}
#menu ul
{background:green;}
#menu li
{display:block;float:left;list-style-type:none;}
#menu a
{display:block;float:left;height:50px;padding:0 5px;margin:0 auto;color:#fff;}

#menu div { display: table; margin: 0 auto; } 
</style>

<!--[if IE]>
<style type="text/css">
#menu{text-align:center;}
#menu ul{zoom:1;display:inline;} 
</style>
<![endif]-->
</head>

<body>

<div id="menu">
<div>
 <ul>
 <li><a href="http://www.adres.pl">qwerty</a></li>
 <li><a href="http://www.adres.pl">qwerty</a></li>
 <li><a href="http://www.adres.pl">qwerty</a></li>
 <li><a href="http://www.adres.pl">qwerty</a></li>
 <li><a href="http://www.adres.pl">qwerty</a></li>
 <li><a href="http://www.adres.pl">qwerty</a></li>
 <li><a href="http://www.adres.pl">qwerty</a></li>
 </ul>
</div>
</div>
</body>
</html>

mako241 · Post autor: **mako241** » śr kwie 30, 2008 5:37 pm

Ok, świetnie. Dziękuję bardzo.

Style pakuje do styli, reszta do index.html.

Rozumiem, że:

Kod: Zaznacz cały

<!--[if IE]> 
<style type="text/css"> 
#menu{text-align:center;} 
#menu ul{zoom:1;display:inline;} 
</style> 
<![endif]-->

mam wpakować do index.html w sekcji HEAD?

!ans · Post autor: **!ans** » śr kwie 30, 2008 7:08 pm

mako241 pisze:Ok, świetnie. Dziękuję bardzo.

Style pakuje do styli, reszta do index.html.

Rozumiem, że:
Kod: Zaznacz cały
 
mam wpakować do index.html w sekcji HEAD?

Tak

ooo_michal · Post autor: **ooo_michal** » czw maja 01, 2008 12:29 am

Możesz też zamiast

Kod: Zaznacz cały

<style type="text/css"> 
#menu{text-align:center;} 
#menu ul{zoom:1;display:inline;} 
</style>

wstawić zewnętrzny arkusz widoczny tylko dla IE

mako241 · Post autor: **mako241** » czw maja 01, 2008 10:56 am

a jak zrobić arkusz widoczny tylko dla IE? Wydaje mi się, że właśnie po to jest powyższy kod z komenatrzem warunkowym... Jakiś inny pomysł?

azamo · Post autor: **azamo** » czw maja 01, 2008 11:02 am

Wstawienie tego do HEAD jest jak najbardziej sensowne. Ale jeżeli musisz stworzyć dużo kodu tylko dla IE, przesyłanie go do wszystkich przeglądarek wiąże się z niepotrzebnym transferem, dodatkowymi żadaniami do serwera i wydłużeniem czasu ładowania strony. Dlatego wtedy warto kod dla IE umieścić np. w pliku css/ie_style.css i dodać w HEAD

Kod: Zaznacz cały

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie_style.css" />
<![endif]-->

W pliku css/ie_style.css musisz wtedy oczywiście umieścić ten kod:

Kod: Zaznacz cały

#menu{text-align:center;}
#menu ul{zoom:1;display:inline;}

[CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

[CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?

Re: [CSS] Wyśrodkowanie listy w elemencie DIV. Jak zrobić?