| Autor | Zpráva | ||
|---|---|---|---|
| fejkzor Profil |
#1 · Zasláno: 20. 12. 2013, 17:26:52
Zdravím,
dělám menu a nefunguje mi "roztahovací" tlačítko (podle objemu) . Je složeno z levého okraje, pak je střed, který se roztahuje podle textu a nakonec je pravý okraj. Jenže to nechce být v jedné lajně, definici "inline-block" tam mám. Ještě není zadefinovaný odkaz a přejíždění, ale to by snad ovlivňovat nemělo... Prosím poraďte jak by to šlo udělat, popřípadě jiné řešení. Děkuji! http://student.spsbv.cz/stastny.el10b/projekt/. HTML: <div id="button">
<div id="button_left">
</div>
<div id="button_mid">TLAČÍTKO
</div>
<div id="button_right">
</div>
</div>CSS: #button{
display: inline-block;
}
#button_left{
background-image: url('img/menu/button_left.png');
background-repeat: no-repeat;
position: relative;
height: 34px;
width: 9px;
}
#button_mid{
background-image: url('img/menu/button_mid.png');
background-repeat: repeat-x;
height: 34px;
text-align: center;
}
#button_right{
background-image: url('img/menu/button_right.png');
background-repeat: no-repeat;
position: relative;
height: 34px;
width: 9px;
} |
||
| margin Profil * |
#2 · Zasláno: 20. 12. 2013, 18:45:52
CSS vlastnost display se nedědí, takže bloky v DIVu
#button zůstaly bloky.
Koukni na http://kod.djpw.cz/waz a na http://kod.djpw.cz/waz- Dovolil jsem si pár úprav: - místo DIVu jsem použil SPAN, protože IE7 (a starší) neumí z bloku udělat inline-block - není důvod deklarovat výšku každému elementu jednotlivě, když jsou všechny stejně vysoké - mám ve zvyku používat background, background-něco používám zřídka, třebas při deklaraci hover stavu - mám ve zvyku nechat pozadí opakovat, pokud obrázek pozadí koresponduje s rozměry elementu Mezi inline-bloky je mezera, je několik možností, jak se jí zbavit, viz ukázka. Některé tvé deklarace mi nedávaní smysl, označil jsem je (zakomentovanými) otazníky. Byl jsem překvapen, že prázdný inlile-block není na řádku s inline-blokem obsakujícím text, ale pomohl vertical-align, nechtěl jsem použít tvrdou mezeru. Koukal jsem na to jen v Opeře 12.16, ale předpokládám, že kód je robustní a k překvapení v jiných prohlížečích nedojde. |
||
| fejkzor Profil |
#3 · Zasláno: 21. 12. 2013, 11:41:22
margin:
Děkuji moc, opravdu mi to pomohlo, jsem Vám vděčný. Jen pro dotaz tu mezeru tvoří SPAN? Hlava mi nebere, proč to vlastně nejde zarovnat. Ale to je už maličkost.. úkol je splněn. Ještě jednou velké Dík. |
||
| margin Profil * |
#4 · Zasláno: 21. 12. 2013, 12:54:38
fejkzor:
„Jen pro dotaz tu mezeru tvoří SPAN?“ V tomto případě je mezera kvůli tomu, že mezi inline bloky jsou bílé znaky. Na nezáleží na tom, z jakých elementů děláš inline bloky, v CSS je deklarováno inline-block, proto se elementy chovají jako inline-bloky, ať už to jsou SPANy, DIVy... Mezery mezi bloky jsem se zbavil tím, že mezi elementy nemám bílé znaky. Jeden se způsobů, jak se mezery způsobené bílými znaky zbavit, je elementy floatovat, ale floatované elementy nejsou jednoduše vycentrovat. Pro zajímavost se můžeš kouknout na http://teststranek.kvalitne.cz/menu7.2/, ale je to větší části něco jiného, než tvoříš ty. Ale uvidíš, že na podobné tlačítko stačí dva obrázky. http://teststranek.kvalitne.cz/images/oblerohy-leve.png http://teststranek.kvalitne.cz/images/oblerohy-prave.png |
||
| jssdfdfs Profil * |
#5 · Zasláno: 23. 12. 2013, 22:42:31
margin:
podla mojho nazoru staci aj jeden obrazok... |
||
|
Časová prodleva: 10 let
|
|||
0