Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] wyśrodkowanie menu poziomego w poziomie
Forum PHP.pl > Forum > Przedszkole
nieraczek
21.11.2008, 19:15:01
Na tej stronie: http://www.kurshtml.boo.pl/css/poziome_menu,menu.html znalazłem opis jak zrobić fajne błyszczące menu.
Chodzi o takie menu: http://img237.imageshack.us/my.php?image=1...08190643ge1.png
Próbowałem elementy listy umieścić w divie. Dawałem: margin: 0 auto; text-align: center; margin-left:50% itp. I nic, nie mogę tego w żaden sposób wyśrodkować w poziomie. Czy da się to jakoś wyśrodkować ?


Cały kod w niezmienionej postaci wziętej z tamtej strony wygląda tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Dokument bez tytułu</title>
  6.  
  7. <style type="text/css">
  8.  
  9. ul, ul li {
  10. 	display: block;
  11. 	list-style: none;
  12. 	margin: 0;
  13. 	padding: 0;
  14. }
  15.  
  16. ul {
  17. 	float: left;
  18. 	background-color: #fff;
  19. 	padding: 1px 0 1px 1px;
  20. 	border: 1px solid #000;
  21. }
  22.  
  23. ul li {
  24. 	float: left;
  25. }
  26.  
  27. ul a:link, ul a:visited {
  28. 	text-decoration: none;
  29. 	display: block;
  30. 	font-weight: bold;
  31. 	background: #000 url("tlo.gif") repeat-x center;
  32. 	color: #fff;
  33. 	padding: 10px 20px;
  34. 	border-right: 1px solid #fff;
  35. 	border-right: 1px solid #fff;
  36. }
  37.  
  38. ul a:hover {
  39. 	background-color: #800;
  40. 	background-image: url("tlo2.gif");
  41. }
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48. </style>
  49. </head>
  50.  
  51. <body>
  52.  
  53.  
  54.  
  55. <ul>
  56. 		<li><a href="index">Strona1</a></li>
  57. 		<li><a href="aaaa">Strona2</a></li>
  58. 		<li><a href="bbbbbb">Strona3</a></li>
  59.         <li><a href="cccccc">Strona4</a></li>
  60. 		<li><a href="ddddd">Strona5</a></li>
  61.  
  62. </ul>
  63.  
  64.  
  65.  
  66. </body>
  67. </html>
[HTML] pobierz, plaintext
erix
21.11.2008, 19:23:31
Cytat
Próbowałem elementy listy umieścić w divie. Dawałem: margin: 0 auto; text-align: center; margin-left:50% itp. I nic, nie mogę tego w żaden sposób wyśrodkować w poziomie. Czy da się to jakoś wyśrodkować ?

Jeśli dajesz float: left dla <ul />, to nie wyśrodkujesz.
nieraczek
21.11.2008, 20:05:26
Usunięcie: "float: left" w "ul" można jeszcze znieść, ale jak usunę "float: left" w "ul li" to już efekt jest tragiczny:
http://img140.imageshack.us/my.php?image=1...08200403xs2.png

Czyli nie dam rady tego wyśrodkować ? Eh te menu poziome............
hiszpanespaniol
21.11.2008, 21:01:06
wpisz coś takiego dla ul:

[HTML] pobierz, plaintext 
  1. ul {
  2.  
  3. width: 500px;
  4.  
  5. margin:0 auto;
  6.  
  7. }
[HTML] pobierz, plaintext


jeśli chcesz wyśrodkowane, to nie floatuj do lewej. ewentualnie środkuj wg. sposobu powyżej, ale w elemencie floatowanym.
nieraczek
21.11.2008, 21:49:36
Dzięki smile.gif
gramwzieleni
21.01.2012, 04:18:36
Witam własnie zaczynam swoja "przygode" z jezykami obcymi tzn html i tez zrobilem sobie te menu poziome co kolega z przed paru lat , tez od 2 dni nie umialem tego wycentrowac , dzieki "hiszpanespaniol" mi sie udalo ale nie bylo to do konca wizualnie poprawnie tzn nie bylo obramowania ze wszytskich stron wpadlem ale na pomysl zeby zamknac to w bloku tak

[HTML] pobierz, plaintext 
  1. <div id="menu">
  2. <ul class="menu_poziome">
  3. <li><a href="czcionki.html">Czcionki</a></li>
  4. <li><a href="tekst.html">Tekst</a></li>
  5. <li><a href="tlo.html">Tło</a></li>
  6. <li><a href="marginesy.html">Marginesy</a></li>
  7. <li><a href="obramowanie.html">Obramowanie</a></li>
  8. </ul>
  9. </div>
[HTML] pobierz, plaintext


i dodac do styli css to :


[HTML] pobierz, plaintext 
  1. #menu{
  2. float:right;
  3. position:relative;
  4. left: -23%;
  5. text-align:left;
  6. }
[HTML] pobierz, plaintext


nie wiem czy to prawidlowo zrobilem ale skoro dziala to dobrze , aha "left: -23%;" musialem dopasowac recznie zeby bylo po srodku
wizu
21.01.2012, 10:15:01
Zmień sobie rozdzielczość, to przekonasz się, że nie działa dobrze.
-Basia-
30.06.2012, 20:58:56
Cytat(hiszpanespaniol @ 21.11.2008, 21:01:06 ) *
wpisz coś takiego dla ul:

[HTML] pobierz, plaintext 
  1. ul {
  2.  
  3. width: 500px;
  4.  
  5. margin:0 auto;
  6.  
  7. }
[HTML] pobierz, plaintext


jeśli chcesz wyśrodkowane, to nie floatuj do lewej. ewentualnie środkuj wg. sposobu powyżej, ale w elemencie floatowanym.


Wielkie dzięki! Nie zakładałam tego tematu, ale bardzo mi to pomogło, długo szukałam pomocy w google (jestem zielona w temacie html), a dopiero tym udało mi się ustawić menu!

Wcześniej jak udało mi się wyśrodkować, to rozwijane manu przestawało się rozwijać - teraz jest wyśrodkowane i działa smile.gif

Jeszcze raz dziękuję
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.