| Autor | Zpráva | ||
|---|---|---|---|
| Plamin Profil * |
#1 · Zasláno: 18. 2. 2012, 23:05:27
Dobrý den,
řeším už tak hodinu problém s rozstříhaným obrázkem, který potřebuju protahovat dle potřeby. Mám ho nastříhaný asi takto: http://nahrajfotku.cz/?v=UNm7.png (top_content.png, center_content.png, bottom_content.png). Bohužel jsem netušil pod čím toto hledat abych se případně inspiroval u něčeho již vyřešeného, bez úspěchu. Potřebuji tuto "tabulku" natahovat dle potřeby, délky textu. Např pokud budu mít: <div class="top"></div> <div class="center">Tak aby se <br /> toto <br /> natahovalo.</div> <div class="bottom"></div> Postačí mi nasměrovaní, děkuji všem za cenné rady. |
||
| Zechy Profil |
#2 · Zasláno: 18. 2. 2012, 23:15:13
Pomocí background-repeat
|
||
| Keeehi Profil |
#3 · Zasláno: 18. 2. 2012, 23:16:03
Plamin:
Něco ti snad nefunguje? Jestli ano, tak prosím o odkaz na živou ukázku. |
||
| Plamin Profil * |
#4 · Zasláno: 18. 2. 2012, 23:30:14
Živá ukázka je zde.
Jde mi o tu mezeru a o provedení, které nejspíš nebude to nejlepší :). Děkuji za odpovědi. |
||
| Keeehi Profil |
#5 · Zasláno: 18. 2. 2012, 23:52:50
Mezeru dělá toto:
.form-horizontal .control-group {
margin-bottom: 18px;
}
.control-group {
margin-bottom: 9px;
}Ano, provedení je příšerné. A proč? Protože jste to nepsal sám ale je to něco vygenerovaného. Jinak těch 3000 řádek by šlo, pokud by to psal člověk, několikanásobně zkrátit. Můj odhad je, že by se to mohlo vejít do stovky. |
||
| Jimmy Hayek Profil |
#6 · Zasláno: 19. 2. 2012, 01:51:03
Keeehi:
„Ano, provedení je příšerné. A proč? Protože jste to nepsal sám ale je to něco vygenerovaného. Jinak těch 3000 řádek by šlo, pokud by to psal člověk, několikanásobně zkrátit. Můj odhad je, že by se to mohlo vejít do stovky.“ Jestli myslíte framework Bootstrap, tak ten není vygenerovaný a kupodivu jej napsali lidé. |
||
| Plamin Profil * |
#7 · Zasláno: 19. 2. 2012, 08:31:16
Ano je Twitter Bootstrap a spojuji s tím své věci, když odstraním ten margin tak mi to rozhází formuláťře.
Nemáte někdo ukázku, jak bych mohl (to nařezání obrázku) udělat lépe? Nebo aspoň pod čím to hledat. |
||
| Sir Tom Profil |
#8 · Zasláno: 19. 2. 2012, 09:23:21
Plamin:
Asi bych to udělal přes relativní a absolutní pozicování. Uděláš velký div s velkou pozici a do něj 3 divy - top, center, bottom - top bude mít absolutní pozici a top: 0px; bottom bude mít také abs. pozici a bottom: 0px; A prostřední div bude mít také absolutní pozici a přesně určeno (pomocí top a bottom, kde začíná a kde končí.) |
||
| Plamin Profil * |
#9 · Zasláno: 19. 2. 2012, 09:25:27
Děkuji za odpověď, mohl by jsi mi prosím přesněji určit jak docílit - "přesně určeno (pomocí top a bottom, kde začíná a kde končí.)".
|
||
| Sir Tom Profil |
Plamin:
Tak změna - bez pozicování. Protože div je element, který lomí řádek před a za sebou, tak stačí divy narvat jednoduše pod sebe a prvnímu (hornímu) a poslednímu (dolnímu) navolit pozadí a pevnou výšku (a nevymýšlet nějaké obchvaty s marginem.) <style>
.mainBox {width: 600px;}
.top {height: 20px; background: #f00;}
.middle {background: #fff; padding: 10px;}
.bottom {height: 20px; background: #f00;}
</style>
<div class='mainBox'>
<div class='top'></div>
<div class='middle'>Ten můj obsah!</div>
<div class='bottom'></div>
</div> |
||
| peta Profil |
Plamin: Pokud ti nevadi, ze bude na spodu mezera, tak tam dej padding-bottom.
.content-center {padding-bottom:18px;} |
||
|
Časová prodleva: 12 let
|
|||
0