Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]poziome menu wycentrowane
zonk_222
post
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 7.10.2010

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

witam, stworzyłem graficzne poziome menu ale w kazdy mozliwy sposób nie potrafie tego wycentrowac w poziomie..

[HTML] pobierz, plaintext 
  1. <center>	<div id="imMnMn" style="text-align: center" >
  2. <ul>
  3.  
  4. 	<li><a class="imMnItm_2" href="o zespole.html" title=""><span class="imHidden">O zespole</span></a></li>
  5. 	<li><a class="imMnItm_4" href="galeria.html" title=""><span class="imHidden">Galeria zespolu</span></a></li>
  6. 	<li><a class="imMnItm_5" href="autorzy.html" title=""><span class="imHidden">O autorach</span></a></li>
  7. 	<li><a class="imMnItm_6" href="video.html" title=""><span class="imHidden">Videoklipy</span></a></li>
  8. 	<li><a class="imMnItm_7" href="odtwarzacz.html" title="" target="_blank" ><span class="imHidden">Odtwarzacz</span></a></li>
  9.  
  10. </ul>
  11. </div>	</center>
[HTML] pobierz, plaintext

to jest menu, teraz css
/* -- Menu Main Settings -- */
#imMnMn {padding-top: 12px; display: inline }
#imMnMn ul, #imMnMn ul li {margin: 0; padding: 0; list-style: inline; z-index: 1000; cursor: pointer; margin-left: 50%; margin-bottom: 50 ; text-align: center; width: 50px;

margin:10 auto; display: inline }
#imMnMn ul li {position: relative; float: left; padding-right: 0px; padding-left: 0px; display: inline }
#imMnMn ul a {display: block; text-decoration: none; height: 25px; width: 120px; float: none !important; float: left; }

/* -- Menu Main Images -- */
#imMnMn ul li a.imMnItm_1 {background: url('immnu_01a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_1, #imMnMn ul li a:hover.imMnItm_1 {background: url('immnu_01b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_2 {background: url('immnu_02a.gif') no-repeat top; }
#imMnMn ul li:hover a.imMnItm_2, #imMnMn ul li a:hover.imMnItm_2 {background: url('immnu_02b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_3 {background: url('immnu_03a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_3, #imMnMn ul li a:hover.imMnItm_3 {background: url('immnu_03b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_4 {background: url('immnu_04a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_4, #imMnMn ul li a:hover.imMnItm_4 {background: url('immnu_04b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_5 {background: url('immnu_05a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_5, #imMnMn ul li a:hover.imMnItm_5 {background: url('immnu_05b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_6 {background: url('immnu_06a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_6, #imMnMn ul li a:hover.imMnItm_6 {background: url('immnu_06b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_7 {background: url('immnu_07a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_7, #imMnMn ul li a:hover.imMnItm_7 {background: url('immnu_07b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_8 {background: url('immnu_08a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_8, #imMnMn ul li a:hover.imMnItm_8 {background: url('immnu_08b.gif') no-repeat top ; }
span.imMnLv {display: block; width: 98%; background: url('imiconmenu.gif') no-repeat center right; }

/* -- Menu Level -- */
#imMnMn ul ul {display: none; position: absolute; top: 25px; left: 0px; }
#imMnMn ul ul ul {top: 0; left: 119px;}
#imMnMn ul ul li {float: left !important; float: none; display: block !important; display: inline; }
#imMnMn ul li:hover li a, #imMnMn ul li.iehover li a, #imMnMn ul li:hover li:hover li a, #imMnMn ul li.iehover li.iehover li a, #imMnMn ul li:hover li:hover li:hover li a, #imMnMn ul li.iehover li.iehover li.iehover li a {padding: 3px 3px 3px 6px; height: auto !important; height: 1%; font: 11px Tahoma; background-color: #FFFFFF; background-image: url(''); color: #000000; border: 1px solid #000000; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85); opacity: 0.85; width: 109px; float: left !important; float: none; margin-bottom: 0 !important; margin-bottom: -1px; text-align: left; }
#imMnMn ul li li {padding-bottom: 0; margin-bottom: -1px; }
#imMnMn ul li:hover li a:hover, #imMnMn ul li:hover li:hover a, #imMnMn ul li.iehover li a:hover, #imMnMn ul li.iehover li.iehover a, #imMnMn ul li:hover li:hover li a:hover, #imMnMn ul li:hover li:hover li:hover a, #imMnMn ul li.iehover li.iehover li a:hover, #imMnMn ul li.iehover li.iehover li.iehover a, #imMnMn ul li:hover li:hover li:hover li a:hover, #imMnMn ul li.iehover li.iehover li.iehover li a:hover {background-color: #000000; background-image: url(''); color: #FFFFFF; }
#imMnMn ul li:hover ul ul, #imMnMn ul li:hover ul ul ul, #imMnMn ul li.iehover ul ul, #imMnMn ul li.iehover ul ul ul {display: none;}
#imMnMn ul li:hover ul, #imMnMn ul ul li:hover ul, #imMnMn ul ul ul li:hover ul, #imMnMn ul li.iehover ul, #imMnMn ul ul li.iehover ul, #imMnMn ul ul ul li.iehover ul {display: block;}

wiem, ze w css jest kilka rzeczy nie w tym miejscu w jakim powinno byc(złe parametry) bo nie umiem dobrze css.. wiec prosze o pomoc, jak wycentrowac menu;)
z aktualnymi ustawieniami menu wygląda tak: co chyba nie jest najlepszym wyjsciem..winksmiley.jpg
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
CuteOne
post
Post #2





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

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

[HTML] pobierz, plaintext 
  1.  
  2. <div style="width:100%">  //jakiś nadrzędny div 
  3.  
  4.  <div style="width: 80%; margin:0px auto"> //div odpowiadający za menu
  5.  <ul>
  6.      <li></li>
  7.  </ul>
  8.  </div>
  9. </div>
[HTML] pobierz, plaintext


reszty się chyba domyślisz

Ten post edytował CuteOne 7.10.2010, 19:07:55
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #3





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Dodaj do selektora imMnMn


[CSS] pobierz, plaintext 
  1. width: 1000px;
  2. margin: 0 auto; 
[CSS] pobierz, plaintext


bo bez podania szerokości menu jak chcesz wyśrodkować .
Go to the top of the page
+Quote Post
dudi1261
post
Post #4





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 25.07.2008

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

Pamietam takze, iz mialem kiedys problem z wysrodkowaniem elementu, ale to bylo przy zlozonym, zawilym kodzie. Rozwiazalem to w sposob pobrania szerokosci z rozdzielczosci uzytkownika, odjalem od niej szerokosc elementu i podzielilem przez 2, a nastepnie przypisalem do margin-left. Byla jedna wada - przy zmniejszaniu strony (opcja w wielu popularnych przegladarkach - CTRL + -/+) element nadal zachowywal swoj margin left taki sam. Przy margin auto tego problemu nie ma winksmiley.jpg
Go to the top of the page
+Quote Post
zonk_222
post
Post #5





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 7.10.2010

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

dodałem to o doradziliscie i teraz wygląda to tak:
[HTML] pobierz, plaintext 
  1. <!--główny div-->
  2. <div id="calosc" style="width:100%" >
  3. <!--menu-->
  4. <center>	<div id="imMnMn" style="text-align: center" style="width: 80%; margin:0px auto" >
  5. <ul>
  6.  
  7. 	<li><a class="imMnItm_2" href="o zespole.html" title=""><span class="imHidden">O zespole</span></a></li>
  8. 	<li><a class="imMnItm_4" href="galeria.html" title=""><span class="imHidden">Galeria zespolu</span></a></li>
  9. 	<li><a class="imMnItm_5" href="autorzy.html" title=""><span class="imHidden">O autorach</span></a></li>
  10. 	<li><a class="imMnItm_6" href="video.html" title=""><span class="imHidden">Videoklipy</span></a></li>
  11. 	<li><a class="imMnItm_7" href="odtwarzacz.html" title="" target="_blank" ><span class="imHidden">Odtwarzacz</span></a></li>
  12.  
  13. </ul>	</div>	</center></div>
[HTML] pobierz, plaintext


/* -- Menu Main Settings -- */
#imMnMn {padding-top: 12px; }
#imMnMn ul, #imMnMn ul li {margin: 0; padding: 0; list-style: none; z-index: 1000; cursor: pointer; width: 1000px; margin: 0 auto; }
#imMnMn ul li {position: relative; float: left; padding-right: 0px; }
#imMnMn ul a {display: block; text-decoration: none; height: 21px; width: 120px; float: none !important; }

/* -- Menu Main Images -- */
#imMnMn ul li a.imMnItm_1 {background: url('immnu_01a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_1, #imMnMn ul li a:hover.imMnItm_1 {background: url('immnu_01b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_2 {background: url('immnu_02a.gif') no-repeat top; }
#imMnMn ul li:hover a.imMnItm_2, #imMnMn ul li a:hover.imMnItm_2 {background: url('immnu_02b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_3 {background: url('immnu_03a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_3, #imMnMn ul li a:hover.imMnItm_3 {background: url('immnu_03b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_4 {background: url('immnu_04a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_4, #imMnMn ul li a:hover.imMnItm_4 {background: url('immnu_04b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_5 {background: url('immnu_05a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_5, #imMnMn ul li a:hover.imMnItm_5 {background: url('immnu_05b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_6 {background: url('immnu_06a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_6, #imMnMn ul li a:hover.imMnItm_6 {background: url('immnu_06b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_7 {background: url('immnu_07a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_7, #imMnMn ul li a:hover.imMnItm_7 {background: url('immnu_07b.gif') no-repeat top ; }
#imMnMn ul li a.imMnItm_8 {background: url('immnu_08a.gif') no-repeat top ; }
#imMnMn ul li:hover a.imMnItm_8, #imMnMn ul li a:hover.imMnItm_8 {background: url('immnu_08b.gif') no-repeat top ; }
span.imMnLv {display: block; width: 98%; background: url('imiconmenu.gif') no-repeat center right; }

/* -- Menu Level -- */
#imMnMn ul ul {display: none; position: absolute; top: 21px; left: 0px; }
#imMnMn ul ul ul {top: 0; left: 119px;}
#imMnMn ul ul li {float: left !important; float: none; display: block !important; display: inline; }
#imMnMn ul li:hover li a, #imMnMn ul li.iehover li a, #imMnMn ul li:hover li:hover li a, #imMnMn ul li.iehover li.iehover li a, #imMnMn ul li:hover li:hover li:hover li a, #imMnMn ul li.iehover li.iehover li.iehover li a {padding: 3px 3px 3px 6px; height: auto !important; height: 1%; font: 11px Tahoma; background-color: #FFFFFF; background-image: url(''); color: #000000; border: 1px solid #000000; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85); opacity: 0.85; width: 109px; float: left !important; float: none; margin-bottom: 0 !important; margin-bottom: -1px; text-align: left; }
#imMnMn ul li li {padding-bottom: 0; margin-bottom: -1px; }
#imMnMn ul li:hover li a:hover, #imMnMn ul li:hover li:hover a, #imMnMn ul li.iehover li a:hover, #imMnMn ul li.iehover li.iehover a, #imMnMn ul li:hover li:hover li a:hover, #imMnMn ul li:hover li:hover li:hover a, #imMnMn ul li.iehover li.iehover li a:hover, #imMnMn ul li.iehover li.iehover li.iehover a, #imMnMn ul li:hover li:hover li:hover li a:hover, #imMnMn ul li.iehover li.iehover li.iehover li a:hover {background-color: #000000; background-image: url(''); color: #FFFFFF; }
#imMnMn ul li:hover ul ul, #imMnMn ul li:hover ul ul ul, #imMnMn ul li.iehover ul ul, #imMnMn ul li.iehover ul ul ul {display: none;}
#imMnMn ul li:hover ul, #imMnMn ul ul li:hover ul, #imMnMn ul ul ul li:hover ul, #imMnMn ul li.iehover ul, #imMnMn ul ul li.iehover ul, #imMnMn ul ul ul li.iehover ul {display: block;}

menu jest pionowe, po lewej stronie body.... co zrobic zeby było wysrodkowane poziome?
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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

RSS Aktualny czas: 21.08.2025 - 19:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn