Forum PHP.pl > Wyśrodkowywanie <li>, lista pozioma

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wyśrodkowywanie <li>, lista pozioma

Forum PHP.pl > Forum > Po stronie przeglądarki

Quantum

25.11.2009, 19:01:53

HTML : http://pastebin.com/d2709a7c1
CSS : http://pastebin.com/m421215ff

Jak w temacie, macie jakieś pomysły jak by wycentrować te <li> ?

batman

25.11.2009, 19:21:30

1. Znacznik ul wstawić w div-a.
2. Tło ustawić dla div-a.
3. Ustawić szerokość ul na około 450px (musisz dokładniej dopasować).
4. Dodać margin: 0 auto; dla ul.

zegarek84

25.11.2009, 23:08:11

Cytat(batman @ 25.11.2009, 19:21:30 )

3. Ustawić szerokość ul na około 450px (musisz dokładniej dopasować).

wiem, że późno piszę, ale zawsze lepiej jak coś się samo centruje/przelicza - wszystko w sumie prawie taka sama filozofia choć nie do końca:

[HTML] pobierz, plaintext 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
#poz {position:absolute;
left:0;
padding:0 50%;margin-right:-50%;
background: url('a0.png') repeat-x #8b8857;
}
#menu {
margin:0 50% 0 -50%;
  overflow: hidden;
  padding: 2px 15px;
  font: 12px Arial, Verdana, Tahoma;
}
#menu li {
  list-style-type: none;
  display: inline;
  float: left;
}
#menu li a {
  display: block;
  padding: 8px 20px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}
#menu li li a {
  letter-spacing: 0;
  width: 160px;
  padding: 6px 12px;
}
#menu li li:hover {
  background: #807d4d;
}
#menu li ul {
  overflow: hidden;
  display: none;
}
#menu li:hover ul {
  display: block;
  position: absolute;
  background: url('a1.png') repeat-x #a9a676;
  padding: 0;
  margin: 0;
  width: 160px;
}
</style>
</head>
<body>
<div id="poz">
<ul id="menu">
	<li>
		<a href="#">O szkole</a>
		<ul>
			<li><a href="index.php?m=start">? Aktualno??ci</a></li>
			<li><a href="index.php?m=historia&col=0">? Historia</a></li>
			<li><a href="index.php?m=patron&col=0">? Patron</a></li>
			<li><a href="index.php?m=kadra">? Kadra</a></li>
			<li><a href="index.php?m=kontakt">? Kontakt</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Dla uczniów</a>
		<ul>
			<li><a href="index.php?m=rekrutacja&m1=2&col=0">? Rekrutacja</a></li>
			<li><a href="index.php?m=matura&m1=2&col=0">? Matura</a></li>
			<li><a href="index.php?m=plan&m1=2">? Plan Lekcji</a></li>
			<li><a href="index.php?m=dzwonki&m1=2">? Dzwonki</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Dla rodziców</a>
		<ul>
			<li><a href="index.php?m=kalendarium&m1=4">? Kalendarium</a></li>
			<li><a href="index.php?m=statut&m1=4">? Statut</a></li>
			<li><a href="index.php?m=informacje&m1=4">? Informacje</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Inne</a>
		<ul>
			<li><a href="index.php?m=galeria&m1=3&col=0">? Galeria</a></li>
			<li><a href="index.php?m=absolwenci&m1=3&col=0">? Absolwenci</a></li>
			<li><a href="index.php?m=linki&m1=3">? Linki</a></li>
		</ul>
	</li>
</ul></div>
</body>
</html>
[HTML] pobierz, plaintext

a tu mało istotny wpis dlatego na końcu - efekt można też uzyskać bez position absolute ale trzeba by się bawić jeszcze ze stylami z wewnętrznych ul gdyż teraz jeśli nie jest position absolute definiują nietypowy wymiar głównego ul - oczywiście na szybko bez absolute można poprawić prawie jak pkt. 3 przez odpowiednie przesunięcie - ale nie lubię pół środków - cytowane powyżej centruje samo dokładnie na środku

ps. - dorzuciłem diva a w css pierwsze id i drugie zmieniłem - nie wdaję się głębiej w działanie tego...

Quantum

26.11.2009, 07:40:49

jest jeszcze sposób żeby dać do ul { text-align: center; } i dla ul li { display: inline; } w przykładzie działało, ale w moim menu któraś z właściwości musiała kolidować, ale powyższe sposoby działają wiec +-y dla was.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.