| Autor | Zpráva | ||
|---|---|---|---|
| ctverecek Profil |
#1 · Zasláno: 28. 2. 2009, 17:33:02
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 |
#2 · Zasláno: 28. 2. 2009, 18:15:52 · Upravil/a: panther
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 |
#3 · Zasláno: 28. 2. 2009, 19:55:04
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 |
#4 · Zasláno: 28. 2. 2009, 20:18:35
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 |
#5 · Zasláno: 28. 2. 2009, 20:23:23
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 |
#6 · Zasláno: 28. 2. 2009, 20:26:06
Vsechno tohle posouva cele pozadi background: url('./images/linkactive.png')
|
||
| SwimX Profil |
#7 · Zasláno: 28. 2. 2009, 20:34:05
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 |
#8 · Zasláno: 28. 2. 2009, 20:36:53 · Upravil/a: Miloš
#menu li {line-height: 2em;}#menu li a {line-height: 2em;} |
||
| ctverecek Profil |
#9 · Zasláno: 28. 2. 2009, 20:56:12
Super chalapy line-height mi pomohl dostat mě z problému ;-)
|
||
| Miloš Profil |
#10 · Zasláno: 28. 2. 2009, 21:01:03
ctverecek
Ale kdybys koukal, tak jsem ho zmiňoval už v předchozím příspěvku (o 5 postů výš nad tímto). |
||
|
Časová prodleva: 15 let
|
|||
0