Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]poziome menu wycentrowane
Forum PHP.pl > Forum > Przedszkole
zonk_222
7.10.2010, 18:46:02
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
CuteOne
7.10.2010, 19:07:23 
[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
krzysztof_kf
7.10.2010, 20:25:45
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ć .
dudi1261
7.10.2010, 20:42:23
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
zonk_222
8.10.2010, 13:42:01
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?
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.