| Autor | Zpráva | ||
|---|---|---|---|
| JardaS Profil * |
#1 · Zasláno: 9. 6. 2011, 18:42:40
ahoj, snažím se z obrázku webu sestavit xhtml šablonu. Web který dělám obsahuje řadu titulků a různých popisek které mají zkosené hrany - ukázka např.
Hledám pokud možno co nejsnadnější cestu jako třeba z DIVu nebo SPANu vytvořit tento prvek. Z proužku si vždy do samostatných obrázků seříznu levej a pravej "úkos", který se snažím nějak poskládat s barvou pozadí a textem. Bohužel, jediný zcela spolehlivý způsob co jsem našel je tabulka UKOS|TEXT|UKOS - což je hrozná prasárna. Nemáte někdo nějakou lepší radu jak toto čistě nakódovat? dík, Johny ps: DIV s pseudotřídou :before a :after se zdál jako řešení, nelze ale pak nastavit přes width jeho šířku :( ..respektive jde, ale celé se to rozpadne. |
||
| panther Profil |
#2 · Zasláno: 9. 6. 2011, 19:13:12
JardaS:
místo úkos|text|úkos bude stačit rozdělit to na dvě části, tedy úkos s textem|úkos. Jiné řešení v CSS, které by fungovalo ve všech běžně používaných prohlížečích, není. |
||
| Trejpa Profil |
#3 · Zasláno: 9. 6. 2011, 19:19:39 · Upravil/a: Trejpa
JardaS:
Třeba zanořením: a.ukos , a.ukos span, a.ukos span span { display: block; }
a.ukos { color: white; background: green url(vodorovny.png) repeat-x; }
a.ukos span { background: url(levy.png) no-repeat left top; }
a.ukos span span { background: url(pravy.png) no-repeat right top; padding: .2em 1.2ex; }<a class=ukos><span><span> Nějaký text </span></span></a> Možností je více. Ke krajům navazující šikmé horní a dolní grafické hrany pro neznámou šířku bloku (takhle lehce) neuděláš. |
||
| JardaS Profil * |
#4 · Zasláno: 9. 6. 2011, 20:12:09
JardaS:
Děkuji, nakonec jsem zvolil tu tabulku. Přišlo mi, že by to mělo jít snadněji, doufal jsem v kouzla z :before, :after :( Děkuji ta pomoc. |
||
| Bubák Profil |
#5 · Zasláno: 9. 6. 2011, 20:21:52
Jak píše Trejpa výše, „možností je více“, třebas takto:
http://teststranek.kvalitne.cz/menu7.2/ JardaS: „nakonec jsem zvolil tu tabulku.“ Tabulka je na tabulková data, což menu není. Menu je <menu>, ale nejčastěji se dělá jako <ul> seznam odkazů. „tabulka UKOS|TEXT|UKOS - což je hrozná prasárna“ Prasárna, a není mi jasné, jak budeš úkosům dělat hover efekt. |
||
| JardaS Profil * |
#6 · Zasláno: 9. 6. 2011, 22:22:49
Bubák:
Nakonec jsem nalezl řešení, stačí na to jeden "H1". <h1> Nějaký text na zkoušku </h1> h1, h2{ background-image: url('/img/nav/tlac_ukos1.png'), url('/img/nav/tlac_ukos2.png'); background-position: left, right; background-repeat: no-repeat; background-color: #3ab01f; height: 26px; width:300px; padding-left: 10px; padding-top: 12px; margin: 15px; color: white; font-weight: bold; font-size: 14px; } |
||
| Trejpa Profil |
#7 · Zasláno: 9. 6. 2011, 22:29:36
JardaS:
„ background-image: url('…'), url('…'); background-position: left, right;“
A ve kterém prohlížeči ti to funguje? A ve kterém nefunguje? |
||
| panther Profil |
#8 · Zasláno: 9. 6. 2011, 22:30:04
JardaS:
řešení se dvěma obrázkovými pozadími nebude fungovat napříč prohlížeči. |
||
| habendorf Profil |
#9 · Zasláno: 9. 6. 2011, 22:42:26
Já bych to řešil jen jedním obrázkem (dostatečně širokým).
|
||
| Trejpa Profil |
#10 · Zasláno: 9. 6. 2011, 22:49:05
habendorf:
Pro bloky s pevně daným rozměrem bych to ani jinak nedělal. |
||
| JardaS Profil * |
#11 · Zasláno: 9. 6. 2011, 22:59:05
Trejpa:
prohlížeče: mám tu chrome 11, ff 4, ie 9 a funguje ve všech. Trejpa: jeden obrázek - asi máte pravdu, udělám to přes jedno větší pozadí. Já jen pořád kalkuluji s tím, že změna šířky přes css je lepší, nakonec nevím, ale mohlo by se to hodit... |
||
| habendorf Profil |
#12 · Zasláno: 9. 6. 2011, 23:18:05
Trejpa:
„Pro bloky s pevně daným rozměrem bych to ani jinak nedělal.“ To jistě. Ale já bych to nědělal jinak ani pro proměnné rozměry. Včetně hoveru. |
||
| JardaS Profil * |
#13 · Zasláno: 11. 6. 2011, 11:32:42
Tak mám nakonec pevně dané rozměry a jedno pozadí, nejsnadnější řešení... chjo ;-) ty možnosti kódování jsou safra limitující, je to stále hromada kompromisů,
děkuji ale moc za rady a Váš čas. |
||
|
Časová prodleva: 13 let
|
|||
0