nechce nacentrovat na stred

kmsa · Napísal **kmsa**: 30.03.2008 14:01

mam taky problem ze nejak sa mi nedari nacentrovat navigaciu na stred

mam html

Kód:

<!-- Hlavne menu -->
   <div id="tabs" class="noprint">
   <span class="tab-l"></span>
   <span class="tab-r"></span>
   <h2 class="noscreen">Navigation</h2>
   <ul class="box">
     <li><a href="?url=clanky.php"><span class="tab-1">Novinky</span></a></li>
     <li><a href="#"><span class="tab-2">Galéria</span></span></a></li>
     <li><a href="#"><span class="tab-3">Videa</span></span></a></li>
     <li><a href="#"><span class="tab-4">Priestor</span></span></a></li>
     <li><a href="#"><span class="tab-5">Fórum</span></span></a></li>
     <li><a href="#"><span class="tab-6">Kon</span></span></a></li>
     <li><a href="#"><span class="tab-7">Kon2</span></span></a></li>
     <li><a href="#"><span class="tab-8">Kon3</span></span></a></li>
   </ul>
   <hr class="noscreen" />
   </div>
  <!-- /hlavne menu -->

a css

Kód:

/* Main menu (tabs) */
#tabs {position:relative; background:#5c5d5c url("../images/top_rp.png") 0 0 repeat-x; margin:0; padding:0; _height:1px; height:61px;}
#tabs span.tab-l {position:absolute; top:0; left:0; width:15px; height:61px; background:url("../images/top_left.png") 0 0 no-repeat;}
#tabs span.tab-r {position:absolute; top:0; right:0; width:15px; height:61px; background:url("../images/top_right.png") 0 0 no-repeat; _right:-1px;}

    #tabs ul {padding:0; list-style:none; margin:0 10px;}
    #tabs ul li {margin:0; padding:0; float:left; font-size:16px;}
    #tabs ul li a {display:block; position:relative; padding:0; margin:20px 8px; border:0; font-weight:bold; text-decoration:none; cursor:pointer; color:#e1e1e1;}
    #tabs ul li a:hover {color:#fff;}
    
    /* Main menu (tabs - link) */
    #tabs ul li a span.tab-1 {background:url("../images/tab_1.png") 0 0 no-repeat; padding-left:22px;}
    #tabs ul li a:hover span.tab-1 {background:url("../images/tab_1h.png") 0 0 no-repeat; padding-left:22px;}
    #tabs ul li a span.tab-2 {background:url("../images/tab_2.png") 0 0 no-repeat; padding-left:20px;}
    #tabs ul li a:hover span.tab-2 {background:url("../images/tab_2h.png") 0 0 no-repeat; padding-left:20px;}
    #tabs ul li a span.tab-3 {background:url("../images/tab_3.png") 0 0 no-repeat; padding-left:28px;}
    #tabs ul li a:hover span.tab-3 {background:url("../images/tab_3h.png") 0 0 no-repeat; padding-left:28px;}
    #tabs ul li a span.tab-4 {background:url("../images/tab_4.png") 0 0 no-repeat; padding-left:25px;}
    #tabs ul li a:hover span.tab-4 {background:url("../images/tab_4h.png") 0 0 no-repeat; padding-left:25px;}
    #tabs ul li a span.tab-5 {background:url("../images/tab_5.png") 0 0 no-repeat; padding-left:30px;}
    #tabs ul li a:hover span.tab-5 {background:url("../images/tab_5h.png") 0 0 no-repeat; padding-left:30px;}
    #tabs ul li a span.tab-6 {background:url("../images/tab_6.png") 0 0 no-repeat; padding-left:30px;}
    #tabs ul li a:hover span.tab-6 {background:url("../images/tab_6h.png") 0 0 no-repeat; padding-left:30px;}
    #tabs ul li a span.tab-7 {background:url("../images/tab_7.png") 0 0 no-repeat; padding-left:25px;}
    #tabs ul li a:hover span.tab-7 {background:url("../images/tab_7h.png") 0 0 no-repeat; padding-left:25px;}
    #tabs ul li a span.tab-8 {background:url("../images/tab_8.png") 0 0 no-repeat; padding-left:28px;}
    #tabs ul li a:hover span.tab-8 {background:url("../images/tab_8h.png") 0 0 no-repeat; padding-left:28px;}

vie mi niekto stym poradit bo nejak mi to nefunguje nech skusam co chcem
ano viem ze musim mat zadefinovane velkosti a rozne bludy ale nejak nefunguju hocjak skusam
viem ze sa to roby cez margin:0 auto; ale ani to nejde

stenley · Napísal **stenley**: 30.03.2008 16:19

napr. dopln nasledujuce do uz existujuceho css zapisu:

Kód:

#tabs { ... text-align:center; }
#tabs ul { ... width:XYpx; margin:0 auto; }

za XY si dopln nejaku rozumnu sirku, aby ti to nedeformovalo menu, ostatne ovplyvnene elementy treba pravdaze este patricne poupravovat, ale to je uz na tebe, lebo neviem, ako to tam chces mat...

kmsa · Napísal autor témy **kmsa**: 31.03.2008 16:25

nefakci ale nevadi ja som to usporiadal inac a teraz my to netreba na stred

Ded'leg · Napísal **Ded'leg**: 31.03.2008 16:37

ked mas tabs position relative a ches ho nastred kod by mal byt nieaky takyto:

Kód:

html, body {margin:0px;padding:0px;text-align:center}
#tabs {position:relative;margin:auto; ....} 

emer · Napísal **emer**: 31.03.2008 16:40

zmeň #tabs ul na:

Kód:

#tabs ul {padding:0; list-style:none; margin:0 auto; width: 678px}

šírku som ti presne našiel, aby si to mal na strede :lol:

nemáš začo :lol:

stenley · Napísal **stenley**: 31.03.2008 16:54

ako keby to nebolo to, co som pisal vyssie

, ale nechapem preco mu to neslo, ked mne to fungovalo... a pre IE treba este nastavit text-align...

emer · Napísal **emer**: 31.03.2008 16:56

stenley:: veď ja nič, len pisal, že mu to nejde tak som mu napísal celý riadok (o tom text-align: center pre IE som nevedel, zas som o niečo múdresší :lol:

)

nechce nacentrovat na stred

Podobné témy