Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] wyśrodkowanie menu poziomego w poziomie
nieraczek
post 21.11.2008, 19:15:01
Post #1





Grupa: Zarejestrowani
Postów: 405
Pomógł: 6
Dołączył: 12.01.2007

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

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
Go to the top of the page
+Quote Post
erix
post 21.11.2008, 19:23:31
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
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.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
nieraczek
post 21.11.2008, 20:05:26
Post #3





Grupa: Zarejestrowani
Postów: 405
Pomógł: 6
Dołączył: 12.01.2007

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

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............
Go to the top of the page
+Quote Post
hiszpanespaniol
post 21.11.2008, 21:01:06
Post #4





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

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

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.


--------------------
profesjonalny webmastering: "save for web > html and images"
Go to the top of the page
+Quote Post
nieraczek
post 21.11.2008, 21:49:36
Post #5





Grupa: Zarejestrowani
Postów: 405
Pomógł: 6
Dołączył: 12.01.2007

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

Dzięki smile.gif
Go to the top of the page
+Quote Post
-gramwzieleni-
post 21.01.2012, 04:18:36
Post #6





Goście
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
Go to the top of the page
+Quote Post
wizu
post 21.01.2012, 10:15:01
Post #7





Grupa: Zarejestrowani
Postów: 127
Pomógł: 15
Dołączył: 16.02.2008
Skąd: Sanok

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

Zmień sobie rozdzielczość, to przekonasz się, że nie działa dobrze.
Go to the top of the page
+Quote Post
--Basia--
post 30.06.2012, 20:58:56
Post #8





Goście
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ę
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 5.05.2025 - 08:05
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn