Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Wyśrodkowywanie <li>, lista pozioma
Quantum
post 25.11.2009, 19:01:53
Post #1





Grupa: Zarejestrowani
Postów: 450
Pomógł: 84
Dołączył: 27.11.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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

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

Ten post edytował sniffer32 26.11.2009, 16:54:31
Go to the top of the page
+Quote Post
batman
post 25.11.2009, 19:21:30
Post #2





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
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.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
zegarek84
post 25.11.2009, 23:08:11
Post #3





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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 
  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  4. <style>
  5. #poz {position:absolute;
  6. left:0;
  7. padding:0 50%;margin-right:-50%;
  8. background: url('a0.png') repeat-x #8b8857;
  9. }
  10. #menu {
  11. margin:0 50% 0 -50%;
  12.   overflow: hidden;
  13.   padding: 2px 15px;
  14.   font: 12px Arial, Verdana, Tahoma;
  15. }
  16. #menu li {
  17.   list-style-type: none;
  18.   display: inline;
  19.   float: left;
  20. }
  21. #menu li a {
  22.   display: block;
  23.   padding: 8px 20px;
  24.   letter-spacing: 2px;
  25.   font-weight: bold;
  26.   color: #fff;
  27.   text-decoration: none;
  28. }
  29. #menu li li a {
  30.   letter-spacing: 0;
  31.   width: 160px;
  32.   padding: 6px 12px;
  33. }
  34. #menu li li:hover {
  35.   background: #807d4d;
  36. }
  37. #menu li ul {
  38.   overflow: hidden;
  39.   display: none;
  40. }
  41. #menu li:hover ul {
  42.   display: block;
  43.   position: absolute;
  44.   background: url('a1.png') repeat-x #a9a676;
  45.   padding: 0;
  46.   margin: 0;
  47.   width: 160px;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div id="poz">
  53. <ul id="menu">
  54. 	<li>
  55. 		<a href="#">O szkole</a>
  56. 		<ul>
  57. 			<li><a href="index.php?m=start">? Aktualno??ci</a></li>
  58. 			<li><a href="index.php?m=historia&col=0">? Historia</a></li>
  59. 			<li><a href="index.php?m=patron&col=0">? Patron</a></li>
  60. 			<li><a href="index.php?m=kadra">? Kadra</a></li>
  61. 			<li><a href="index.php?m=kontakt">? Kontakt</a></li>
  62. 		</ul>
  63. 	</li>
  64. 	<li>
  65. 		<a href="#">Dla uczniów</a>
  66. 		<ul>
  67. 			<li><a href="index.php?m=rekrutacja&m1=2&col=0">? Rekrutacja</a></li>
  68. 			<li><a href="index.php?m=matura&m1=2&col=0">? Matura</a></li>
  69. 			<li><a href="index.php?m=plan&m1=2">? Plan Lekcji</a></li>
  70. 			<li><a href="index.php?m=dzwonki&m1=2">? Dzwonki</a></li>
  71. 		</ul>
  72. 	</li>
  73. 	<li>
  74. 		<a href="#">Dla rodziców</a>
  75. 		<ul>
  76. 			<li><a href="index.php?m=kalendarium&m1=4">? Kalendarium</a></li>
  77. 			<li><a href="index.php?m=statut&m1=4">? Statut</a></li>
  78. 			<li><a href="index.php?m=informacje&m1=4">? Informacje</a></li>
  79. 		</ul>
  80. 	</li>
  81. 	<li>
  82. 		<a href="#">Inne</a>
  83. 		<ul>
  84. 			<li><a href="index.php?m=galeria&m1=3&col=0">? Galeria</a></li>
  85. 			<li><a href="index.php?m=absolwenci&m1=3&col=0">? Absolwenci</a></li>
  86. 			<li><a href="index.php?m=linki&m1=3">? Linki</a></li>
  87. 		</ul>
  88. 	</li>
  89. </ul></div>
  90. </body>
  91. </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 winksmiley.jpg
ps. - dorzuciłem diva a w css pierwsze id i drugie zmieniłem - nie wdaję się głębiej w działanie tego...

Ten post edytował zegarek84 25.11.2009, 23:12:00


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
Quantum
post 26.11.2009, 07:40:49
Post #4





Grupa: Zarejestrowani
Postów: 450
Pomógł: 84
Dołączył: 27.11.2008
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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. smile.gif
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.08.2025 - 22:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn