menu text

kaidžas · Napísal **kaidžas**: 30.07.2008 22:01

Kto by mi prosim pomohol s css? Neviem ako mam dostat do stredu obrazkoveho menu text. Ide o klasicke menu.
HTML:

Kód:

<ul id="nav">
   <li><a href="#" id="menu1"><span>###</span></a></li>
   <li><a href="#" id="menu2"><span>###</span></a></li>
   <li><a href="#" id="menu3"><span>###</span></a></li>
   <li><a href="#" id="menu4"><span>###</span></a></li>
   <li><a href="#" id="menu5"><span>###</span></a></li>
</ul>

CSS:

Kód:

#nav li {
   list-style: none;
   float:left;
}

#nav li a {
   display: block;
   height: 73px;
   width: 141px;
 }

#nav li a#menu1{
   background: url("images/m1.gif") no-repeat;
}
#nav li a#menu1:hover{
   background: url("images/m1-1.gif") no-repeat;
}
#nav li a#menu2{
   background: url("images/m4.gif") no-repeat;
}
#nav li a#menu2:hover{
   background: url("images/m4-4.gif") no-repeat;
}
#nav li a#menu3{
   background: url("images/m3.gif") no-repeat;
}
#nav li a#menu3:hover{
   background: url("images/m3-3.gif") no-repeat;
}
#nav li a#menu4{
   background: url("images/m2.gif") no-repeat;
}
#nav li a#menu4:hover{
   background: url("images/m2-2.gif") no-repeat;
}
#nav li a#menu5{
   background: url("images/m5.gif") no-repeat;
}
#nav li a#menu5:hover{
   background: url("images/m5-5.gif") no-repeat;
}

Tominator · Napísal **Tominator**: 30.07.2008 22:34

a{text-align:center}

kaidžas · Napísal autor témy **kaidžas**: 31.07.2008 16:20

ja by som skor potreboval vediet ako dostanem ten text presne do stredu jednotlivych obrazkov. momentalne je cely text nad obrazkami. diky

neutronmind · Napísal **neutronmind**: 31.07.2008 18:33

Skus prilozit screenshot.

don jebot · Napísal **don jebot**: 31.07.2008 19:36

mas ho posunuty zle orientovanie nemas nastavene ani vlastnosti <ul> a mas obrazky ako celok musis pouzit backgroun position a posunut ich na spravne miesto a neviem ci by nahodou nemali mat aj <li> deklarovany pevny rozmer ale tusim mali..

kaidžas · Napísal autor témy **kaidžas**: 31.07.2008 20:23

neutronmind píše:

Skus prilozit screenshot.

screenshot: http://upload.678.cz/index-5.html
Toto tvorenie menu je pre mna zahada.neviem sa v tom vobec zorientovať. dakujem za pomoc.

shaggy · Napísal **shaggy**: 31.07.2008 21:14

Nastav tomu LI horný padding, ľavý padding a budeš to mať.

kaidžas · Napísal autor témy **kaidžas**: 31.07.2008 21:25

vsetky tie obrazky sa mi rozhadzali. ja hovorim s tymito menu mam problem, neviem proste, nebudem hovorit ze tomu rozumiem, lebo som z toho jelen.

emer · Napísal **emer**: 31.07.2008 21:29

pre operu a ff musíš ešte tomu ubrať potom zo šírky..

ak si mal šírku width: 141px a dal si padding-left: 20px, takmusíš šírku upraviť na 121px... to sité aj s výškou, ked máš 73px, a dal si paddin-top: 10px, tak výška musí byť 63px... a pre IE zvlášť css

kaidžas · Napísal autor témy **kaidžas**: 31.07.2008 21:53

skusil som to tak a vyslo s toho toto: http://upload.678.cz/index-5.html

don jebot · Napísal **don jebot**: 31.07.2008 22:47

ak by si to robil podla toho ako som ti to posielal tak uz to mas napis do zdrojaku
<li><a href="#" id="menu1"><span>UPLOAD</span></a></li>
a v css naformatuj span a daj mu padding-left a padding-top

shaggy · Napísal **shaggy**: 31.07.2008 23:17

A ešte otázku - ovládaš základy CSS? Vieš ako funguje padding? Lebo keď obrázku čo má rozmery cca 140x70px nastavuješ horný padding 63px a ľavý padding 121px, tak nemám pocit, že by si mal tušenie, čo robíš.

Tiež je problém s tým, že LI nemá definovaný šírku a výšku a že pozadie dávaš až vnorenému elementu (A). Preto by si ten padding mal nastaviť tomu tagu A... a ak chceš, aby si ich mal vedľa seba, tak skús ešte float: left použiť

don jebot · Napísal **don jebot**: 01.08.2008 0:02

inak ja uz to mam hotove teda jeden obrazok a zajtra mu to poslem na mail cele ak budem mat cas...

//edit uz to mam komplet asi mi j**** teraz v noci... zajtra ti to poslem na mail... :cheer:

dlzis mi beer

kaidžas · Napísal autor témy **kaidžas**: 01.08.2008 16:40

diky ti moc este to musim nejak nastavit pre IE. lebo je to trosku zle.

menu text

Podobné témy