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