| Autor | Zpráva | ||
|---|---|---|---|
| jezek Profil * |
#1 · Zasláno: 31. 7. 2009, 09:19:21
Ahoj,
snažím se vertikálně vycentrovat textové odkazy v jednotlivých položkách menu. Prošel jsem si zde diskuzi, zkusil nějaké typy , ale nedaří se mi dosáhnout požadovaného výsledku. Zkusil jsem zadat display: table; display: table-cell; vertical-align: middle; ale nedaří se mi. Můžete se mi na to podívat? Odkaz |
||
| SwimX Profil |
#2 · Zasláno: 31. 7. 2009, 11:09:25
jezek:
a jenom jim prostě přidat horní padding? :) |
||
| zvěřiňák Profil |
#3 · Zasláno: 31. 7. 2009, 11:18:54
Tohle tam přidej:
#left ul {
margin: 0 0 0 0;
list-style: none;
padding: 0;
line-height: 23px;
} |
||
| jezek Profil * |
#4 · Zasláno: 31. 7. 2009, 11:21:22
Když přidám horní padding, rozhodíse mi to ve ve firefoxu a opeře. Mezi jednotlivými položkami menu vznikne mezera viz. Odkazprvní odkaz v menu..
|
||
| Plaváček Profil |
#5 · Zasláno: 31. 7. 2009, 12:46:02
|
||
| jezek Profil * |
#6 · Zasláno: 31. 7. 2009, 15:18:55
Udělal jsem to podle Tebe, vertikální centrování funguje. Jen sem si to pěkně rozhodil.. Odkaz
|
||
| jezek Profil * |
#7 · Zasláno: 31. 7. 2009, 15:21:16
vyzkoušel jsem způsob od Zvěřiňáka a funguje..
takže všem děkuji za pomoc. |
||
| Plaváček Profil |
#8 · Zasláno: 31. 7. 2009, 17:11:40
jezek
Předpokládal jsem, že máš elementární znalosti zákonů CSS. Neřešil jsem ve své ukázce implementaci do tvého layoutu. Počítám ale, že by postačilo vynulovat margin a padding pro element UL. Nebo použít poměrně ověřený CSS reset ( http://meyerweb.com/eric/tools/css/reset/ ) |
||
|
Časová prodleva: 4 dny
|
|||
| jezek Profil * |
#9 · Zasláno: 4. 8. 2009, 11:33:29
Plaváček
Nakonec mi to nedalo a upravil jsem to podle Tvého návrhu. Exploreru mi to funguje, ale v Mozille a v Opeře se špatně vykresluje obrázkové pozadí aktualní položky v menu. Nevíš, co mám špatně? |
||
| Plaváček Profil |
#10 · Zasláno: 4. 8. 2009, 12:22:42 · Upravil/a: Plaváček
jezek
Uprav si tuto definici:
#left li a#m1 {
height: 23px;
line-height: 23px;
background: url(ban/menu.jpg) no-repeat;
margin: 0;
display:block;
font-size: 14px;
color: #6B6B6B;
padding: 0 0 0 20px;
text-decoration: none;
white-space:nowrap;
overflow:hidden;
}
Nebo ještě lépe (nemůžeš používat více prvků se stejným ID) takto:
#left li a {
height: 23px;
line-height: 23px;
background: url(ban/menu.jpg) no-repeat;
margin: 0;
display:block;
font-size: 14px;
color: #6B6B6B;
padding: 0 0 0 20px;
text-decoration: none;
white-space:nowrap;
overflow:hidden;
}
a HTML takto:
<div id="menu">
<ul>
<li><a href="" title="Home page"></a></li>
<li><a href="" title="About us"></a></li>
<li><a href="" title="Our services"></a></li>
<li><a href="" title="Our services">Jedna položka</a></li>
<li><a href="" title="Our services">Jedna položka</a></li>
<li><a href="" title="Our services">Jedna položka</a></li>
</ul>
</div>
|
||
| zvěřiňák Profil |
#11 · Zasláno: 4. 8. 2009, 12:43:42
jezek
Pro správné vykreslování obrázkového pozadí ve všech prohlížečích při "hover" je lepší použít posouvání pozadí o příslušný počet pixelů. #left li a#m1:hover, #menu a:active, #menu a:focus {
background-position:right top;
color:#000000;
overflow:hidden;
white-space:nowrap;
}V tvém případě použij radši toto: background-position:-219px top; |
||
| Plaváček Profil |
#12 · Zasláno: 4. 8. 2009, 12:53:43 · Upravil/a: Plaváček
zvěřiňák
„Pro správné vykreslování obrázkového pozadí ve všech prohlížečích při "hover" je lepší použít posouvání pozadí o příslušný počet pixelů. “ Proč? background-position:-219px top; S tímto zápisem může mít potíže v některých starších prohližečích, když už radíš, tak lépe takto: background-position:-219px 0; |
||
| zvěřiňák Profil |
#13 · Zasláno: 4. 8. 2009, 13:31:24
Plaváček
Máš, jako vždycky, pravdu. |
||
|
Časová prodleva: 15 let
|
|||
0