Autor Zpráva
ctverecek
Profil
Zdravim,

když mam dělaný menu takto a chci položky v menu nějak formátovat aby byla každá od sebe stejně daleko, nechá se to udělat nějak jinak než přez seznam? Seznam mi hází položky pod sebe...já je potřebuju formátovat VEDLE sebe. Díky
panther
Profil
ctverecek
nechá se to udělat nějak jinak než přez seznam?
ne. Menu je seznam, proto patří do „<ul>“, lépe do „<menu>“.

Seznam mi hází položky pod sebe...já je potřebuju formátovat VEDLE sebe
menu li {
    float: left; /* zarovnani polozek vedle sebe */
    margin: 0 5px; /* levy a pravy margin kazde polozky = mezi polozkami bude 2x5px, tedy 10px */
    ....
}
Miloš
Profil
panther
Protože první položka nepotřebuje margin-left a poslední zase margin-right, uvažoval bych pouze o levém anebo pravém marginu a té jedné <li> ho přes třídu vyrušil (ideální by bylo bez třídy přes :first-child, ale tu nezná IE 6; o :last-child pak ani nemluvně).

ctverecek
Taky by bylo možné <li> položkám menu, budou-li formátovány takto jednoduše, dát display: inline.
ctverecek
Profil
Tak problem se serazenim mam vyresen...ten nastal nový. Pri prejeti mysi (hover) a pri pokliku na sekci (active) neni text vertikalne centrovan, proc? jak na to aby byl text vertikalne vycentrovan na sirku pruhu? kdyz pouziju margin, soupne se mi i pozadi odkazu viz.: www.proucetnictvi.cz

#menu li{ 
  float: left;   
  list-style-type: none;      
  margin-left: 20px; 
}

#menu li a{  
  width: 110px;
  height: 40px;  
  text-decoration: none;
  display: block;
  margin-top: -16px;
  background: url('./images/link.png') center no-repeat;
}

#menu a:hover{  
  width: 110px;
  height: 40px;  
  text-decoration: none;
  display: block;
  margin-top: -16px;
  background: url('./images/linkactive.png') center no-repeat; 
}

#menu .active a{ 
  width: 110px;
  height: 40px; 
  text-decoration: none; 
  display: block;   
  margin-top: -16px;
  background: url('./images/linkactive.png') center no-repeat;
}
Miloš
Profil
To chceš, aby ten text poskočil dolů? Mám obavu, že to nebude nic hezkého.
Každopádně text zkus posunout něčím z níže uvedeného:
— padding-top
— line-height
— position: relative
ctverecek
Profil
Vsechno tohle posouva cele pozadi background: url('./images/linkactive.png')
SwimX
Profil
ctverecek
padding top a zmenšit o tu hodnotu height -> protože se k ní paddiing připočítává (kromě IE6 tam se dá použít podtržítkový hack _height)
Miloš
Profil
#menu li {line-height: 2em;}
anebo
#menu li a {line-height: 2em;}
ctverecek
Profil
Super chalapy line-height mi pomohl dostat mě z problému ;-)
Miloš
Profil
ctverecek
Ale kdybys koukal, tak jsem ho zmiňoval už v předchozím příspěvku (o 5 postů výš nad tímto).

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: