| Autor | Zpráva | ||
|---|---|---|---|
| hameluk Profil |
#1 · Zasláno: 28. 4. 2008, 12:30:47 · Upravil/a: hameluk
Ahoj, nevíte prosím, jak mám napozicovat barvu pozadí, aby se mi v menu zobrazovala šedá jenom za odkazem a nevylézala mimo? Z nějakého důvodu mi nefunguje padding...
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>menu</title> <style type="text/css"> div.menu { } div.menu a { display: block; width: 170px; height: 30px; margin: 0 0; color: black; background: url('box_button_left.gif'); background-repeat: no-repeat; text-decoration: none; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-size: 12px; font-family: verdana; padding: 8px 0 0 40px; margin: -8px 0 -8px 0;} div.menu a:hover {color: red; background: transparent; background-color: gray; } div.menu a:active {color: green;} .box_side_head {background-image: url('box_side_head.gif'); background-repeat: no-repeat;} .box_side_foot {background-image: url('box_side_foot.gif'); background-repeat: no-repeat;} .matrjoska {margin: 10px 10px 10px 10px} /*matrjoska hack - provedeni paddingu v IE i FF*/ h2 {font-size: 1em; margin-top: 1em; margin-bottom: 1em} </style> </head> <body> <div class="box_side_head"> <div class="matrjoska"> <h2 style="padding: 8px 0 0 50px">Menu</h2> </div> <div class="menu"> <a href="">Menu 1</a> <a href="">Menu 2</a> <a href="">Menu 3</a> <a href="">Menu 4</a> </div> </div> <div class="box_side_foot"> </div> </body> </html> k viděni zde |
||
| Venca V Profil |
#2 · Zasláno: 28. 4. 2008, 13:25:53 · Upravil/a: Venca V
Ve standardním režimu vykreslování se nepočítá padding do šířky/výšky elementu, čili chyba je v té zadané šířce - místo 170px dej 122px.
http://www.jakpsatweb.cz/css/mody-prohlizecu.html http://css.interval.cz/clanky/pracovni-rezimy-prohlizecu/ P.S.: Dělat menu takovýmto způsobem je celkem prasárna, na menu máme tagy <ul>, <ol> či <menu> |
||
| hameluk Profil |
#3 · Zasláno: 28. 4. 2008, 14:33:35
Venca V
Aha. Ale proč zrovna 122px? Při téhle šířce se to menu rozpadne - dobře se to zobrazuje při 130px - z toho usuzuju, že je to kvůli tomu levému 40px paddingu... A Venco, prosím Tě, proč je takovéhle menu prasárna? Má to menu pomocí seznamu nějaké výhody? I když jedna mě už asi napadá - jestli uvažuju správně, zůstala by tam při hoveru ta odrážková šipka - nebo ne? |
||
| Venca V Profil |
#4 · Zasláno: 28. 4. 2008, 14:42:53
Ale proč zrovna 122px?
Promiň, přehlídnul jsem se:-) Správně je to 170px (celková width i s paddingem) - 40px (padding) = 130px. Pro IE ve quirku bys musel přidat jinou width, zápis by vypadal width:130px; _width:170px; ale na to přijdeš studiem výše uvedených odkazů. Další užitečný odkaz (ohledně tvého druhého dotazu) je http://semantika.havrlant.net/index.html, tam se dozvíš o správném používání HTML značek. |
||
| Bubák Profil |
#5 · Zasláno: 28. 4. 2008, 15:07:40
div.menu a:hover {color: red; background: transparent; background-color: gray; }
Fungovat ti to bude, ale proč to děláš takto zmateně? Napřed máš: background: transparent;, což znamená, bez barvy pozadí, další hodnoty nedeklaruješ, proto se použijí výchozí hodnoty, takže na pozadí nic nebude. Hned pak máš: background-color: gray; Deklaruješ šedou barvu pozadí. Podle mne jednodušší a přehlednější máš deklerovat pozadí najednou: div.menu a:hover {color: red; background: gray; } zůstala by tam při hoveru ta odrážková šipka - nebo ne? Pokud dáš šipku položce menu, tak ano, pokud dáš šipku odkazu, tak záleží na tom, co budeš deklarovat pro hover. |
||
| hameluk Profil |
#6 · Zasláno: 29. 4. 2008, 10:17:59
Venca V
Omlouvám se za asi triviální dotazy - jsem úplná lama a tohle by měl být můj první web. Nicméně jsem se pokusil udělat menu sémanticky správně, pomocí <menu> a <li> - ovšem úspěch se dostavil pouze částečný - mám několik problémů: 1. pozadí se vykresluje pod samotný odkaz, ovšem odrážka příkazu <li> je, jak je vidět, mimo něj. Skrývat ji nechci, rád bych na ni použil (pomocí list-style-image) podobnou odrážkovou šipku, jako v první, nesémantické podobě menu. Jak tedy dostanu odrážku "dovnitř" toho obrázku? (text-indent s chybějícím písmenkem "t" tam je schválně - když je příkaz správně, tlačítka se správně zarovnají, ale není vidět ta odrážka). Uff. 2. Jak mám odstranit ty mezery mezi hlavičkou, tlačítky a patičkou?? Cpu nulové marginy ke všemu a stejnak tam je pořád mezera! <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>menu</title> <style type="text/css"> body { font-family: verdana;} menu { } menu li { text-inden: -40px; line-height: 30px;} menu a { width: 170px; height: 30px; text-decoration: none; background: url('box_button_left_clear.gif'); background-repeat: no-repeat; font-size: 12px; padding: 8px 84px 8px 40px; margin: 0 0 0 0;} menu a:hover{ background: gray;} .box_side_head {margin: 0 0; background-image: url('box_side_head.gif'); background-repeat: no-repeat; } .box_side_foot {margin: 0 0; background-image: url('box_side_foot.gif'); background-repeat: no-repeat; } h2 {font-size: 12px; padding: 8px 0 8px 60px;} </style> </head> <body> <div class="box_side_head"> <h2>Menu</h2> </div> <menu> <li><a href="">Menu 1</a> <li><a href="">Menu 2</a> <li><a href="">Menu 3</a> <li><a href="">Menu 4</a> </menu> <div class="box_side_foot"> </div> </body> </html> k viděni zde Bubák Já nevím, asi jsem měl něco blbě, ale dokud jsem nedeklaroval background: transparent, tak se mi ta šedivá při hoveru zobrazovala pod tím obrázkem tlačítka. |
||
| Bubák Profil |
#7 · Zasláno: 29. 4. 2008, 10:34:11
List style image se příliš nepoužívá, každý prohlížeč ho vykreslí trochu jinde a nedá se umístit na požadovanou pozici, pokud ti třeba pozice list-style image nevyhovuje.
http://teststranek.kvalitne.cz/odrazky1/ http://teststranek.kvalitne.cz/menu-odrazkove-1/ Uprav si podle potřeby: http://teststranek.kvalitne.cz/menu-odrazkove-1/ http://teststranek.kvalitne.cz/menu5/ dokud jsem nedeklaroval background: transparent, tak se mi ta šedivá při hoveru zobrazovala pod tím obrázkem tlačítka. Je třeba pochopit, jak fungují sdružené vlastnosti. background-color: gray; /* obrázek na pozadí při hoveru zůstane */ background: gray; /* obrázek na pozadí při hoveru nezůstane */ http://interval.cz/clanky/kaskadove-styly-v-dobrem-stylu/#inner-links- pozor-na-sdruzene-vlastnosti |
||
| hameluk Profil |
#8 · Zasláno: 29. 4. 2008, 13:50:00
Bubák
Moc děkuju za tipy, někdy jsem až přehnaný detailista a s tou rozdílnou pozici list-style-image bych určitě brzo zápasil :-) Úspěšně jsem tedy obšlehl Tvoje menu a bez problému ho upravil k obrazu svému (nemám teda zatím obrázek s oběma stavy tlačítka). Přesto bych se ale ještě rád vrátil k té mé verzi - nepochopil jsem totiž, jakto, že já mám ty <li> odkazy odsazené a Ty ne? Nevidim u Tebe žádný příkaz k nějakému zarovnání nabo něco podobného a přesto mě to odsazuje a Tobě ne! A nepřišel jsem ani na ty mezery... |
||
|
Časová prodleva: 16 let
|
|||
0