Autor Zpráva
Plamin
Profil *
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
Pomocí background-repeat
Keeehi
Profil
Plamin:
Něco ti snad nefunguje? Jestli ano, tak prosím o odkaz na živou ukázku.
Plamin
Profil *
Ž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
Mezeru dělá toto:
.form-horizontal .control-group {
margin-bottom: 18px;
}
.control-group {
margin-bottom: 9px;
}
V bootstrap.css od řádku 956

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
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 *
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
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 *
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;}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: