| Autor | Zpráva | ||
|---|---|---|---|
| Colinn Profil * |
#1 · Zasláno: 3. 12. 2008, 19:24:36
Dobrý den,
mám tento problém. Potřebuju na web udělat jako menší pole pro obsah obdélník se zaoblenými rohy (natahovací). Jak jej rozřezat a nakódovat? Napadlo mě tohle řešení, ale nebude kód moc předivovaný? <div class="vrch"></div> //vrch obdélníku <div class="stred"> ... obsah ... //střed s nastavenou barvou pozadí, natahuje se </div> <div class="spodek"></div> //spodek A když chci ještě obsah rozdělit na dvě části, tedy: <div class="levy">obsah leveho</div> //s nastaveným float: left; a right; <div class="pravy">obsah praveho</div> To už máme 5 divů. Jsou to dobrá řešení? Díky za odpovědi |
||
| panther Profil |
#2 · Zasláno: 3. 12. 2008, 19:30:22
Colinn
jde to udělat i jinak, ale: divy se nepoužívají na věci, které jdou sémanticky řešit úplně jinak (nadpisy, odstavce, apod.) Kulatý roh sám o sobě žádnou informaci z hlediska sémantiky nenese, nesémantický div tam tedy nemusí překážet :-) Někdo místo divů používá span s display: block;, ale je to vesměs totožné řešení. |
||
| Colinn Profil * |
#3 · Zasláno: 3. 12. 2008, 19:44:25
Ano, o to mi přesně jde. Ať se snažím sebevíc, nemůžu přijít na to, jak to vyřešit sémanticky.
Kdyby tedy někdo ochotný poradil jak to vyřešit přes nadpisy, odstavce, apod., byl bych rád. |
||
| panther Profil |
#4 · Zasláno: 3. 12. 2008, 20:19:18
Colinn
„Kdyby tedy někdo ochotný poradil jak to vyřešit přes nadpisy, odstavce, apod., byl bych rád.“ odstavec je <p>, nadpis je h1-h6, ale s kulatými rohy to nic společného nemá. |
||
| Strajk Profil |
#5 · Zasláno: 5. 12. 2008, 10:34:59 · Upravil/a: Strajk
Já bych ti to doporučil udělat takto:
<div class="obdelnik"> ... width: 400px; bg: #barva url(spodek.jpg) no-repeat center bottom; <h3>nadpis</h3> ... bg: url(vrsek.jpg) no-repeat center top; <p class="left">text</p> ... float: left; width: 200px; <p class="right">text</p> ... margin-left: 200px; Šlo by to i s méně elementama ale todle je podle mě nejlepší řešení jak pro dobrej pocit ze sématiky tak pro srozumitelnej a chapatelnej kod |
||
| panther Profil |
#6 · Zasláno: 5. 12. 2008, 11:16:57
Strajk
a když nahoře nebude nadpis a třeba obrázek? Tvé řešení není úplně špatné, ale rozhodně ne univerzální, což je často žádoucí. |
||
| Strajk Profil |
#7 · Zasláno: 5. 12. 2008, 11:28:09
No tak změní h3 na img, nevidim v tom problém... background a nějaký padding můžou mít oba. Navíc většinou takovéto boxy (navíc s 2 sloupcy) nějaký ten nadpis povětšinou mají
|
||
| panther Profil |
#8 · Zasláno: 5. 12. 2008, 11:40:46
Strajk
ale nejde to gobalizovat, třeba při správě obsahu přes RS apod. Zkrátka nemusí být nahoře vždy nadpis. „todle je podle mě nejlepší řešení jak pro dobrej pocit ze sématiky“ myslím, že div nebo span, který obsahuje roh, je nesémantický? Neplatí, že div = nesémantika ;-) |
||
| Strajk Profil |
#9 · Zasláno: 5. 12. 2008, 12:36:37
Prostě sem popsal situaci, která se vyskytuje nejčastěji a navrhl na ni řešení...
A pokud bude mít ten obdelník takovou strukturu tak je blbost dávat tam další 4divy jenom na rožky, když už tam potřebný elementy máš... Ale dost toho, ať se rozhodne sám autor tématu |
||
| panther Profil |
#10 · Zasláno: 5. 12. 2008, 16:32:08
Strajk
neříkám, že tohle s tím nadpisem nepoužívám, jen jsem řekl, že to nejde globalizovat. Pokud bys dělal třeba stránky, které by byly následně spravovány klientem, který nemá o html/css ponětí a bude používat třeba nějaký WYSIWYG editor a nebude chtít mít nahoře nadpis, ale třeba již výše zmíněný obrázek. Navrhl jsem proto obecné, ač ne příliš vzhledné řešení, ty jsi dal další, pouřívanější, ale pro užší okruh možností. Pokud to na stránku, kterou bude Colinn spravovat sám, je vhodné to tvoje (které jsem ve svém prvním příspěvku skryl mezi „jde to udělat i jinak“). |
||
|
Časová prodleva: 15 let
|
|||
0