Autor Zpráva
ricci07
Profil
Mám začátečnický dotaz: potřebuji na stránce sestavit rozřezaný obrázek, jehož výška se bude dynamicky měnit, tzn. že některé boční prvky (vlevo i vpravo) se budou muset opakovat... Nevíte o nějakém příkladu? Rád bych to udělal pomocí CSS a <div><span>... tedy ne pomocí klasické tabulky... Jde mi o přesnost na 1px. Moc díky za tipy....
Petr ZZZ
Profil
Seskládej základ stránky z potřebného množství divů, kterým dáš obrázek/obrázky na pozadí. Výchozí chování obrázku na pozadí je opakovat se ve všech směrech, ale můžeš to předefinovat tak, jak to potřebuješ.
Str4wberry
Profil
Jestli je cílem něco jako grafické orámování obsahu, které se bude přizpůsobovat velikosti, tak to lze řešit:

# 1) Několika zanořenými elementy

<div class='opakujici-se-pozadi' style='background: url("opakujici-se.png")'>
  <div class='neopakujici-se-obrazek-horni' style='background: url("horni.png") no-repeat top left'>
    <div class='neopakujici-se-obrazek-dolni' style='background: url("dolni.png") no-repeat bottom left'>
      <p>Obsah
    </div>
  </div>
</div>

# 2) Absolutním posicováním

<div class='opakujici-se-pozadi' style='position: relative; background: url("opakujici-se.png")'>
  <div class='neopakujici-se-obrazek-horni' style='position: absolute; top: 0; left: 0; background: url("horni.png"); width: šířka; height: výška'></div>
  <div class='neopakujici-se-obrazek-dolni' style='position: absolute; bottom: 0; left: 0; background: url("dolni.png"); width: šířka; height: výška'></div>
  <p>Obsah
</div>

# 3) Vícenásobným pozadím

Funkční až od Exploreru 9.
<div style='background-image: url("horni.png"), url("dolni.png"), url("opakujici-se.png"); background-repeat: no-repeat, no-repeat, repeat; background-position: top left, bottom left'>
  <p>Obsah
</div>

Analogicky to funguje v případě, že je potřeba roztahování i do šířky, akorát se nakupí více elementů, respektive obrázků v případě 3.
peta
Profil
Str4wberry:
V 1 musis doplnit rozmery, jinak ti to bude delat psi kusy. Krom toho, kdyz do divu2 doplnim border:1px solid #f00;, tak diky P v divu 3 se ti to rozpadne.
Mozna by to chcelo dat cele spolecne na stranku s linky na ukazky, jestli to uz neni.
Str4wberry
Profil
Asi nechápu. Můžeš poslat živou ukázku?
ricci07
Profil
Str4wberry:
Jde mi o to vypisovat data z DB (o různém počtu řádek), která chci graficky orámovat, tzn. nahoře jednorázově grafické záhlaví, pak na bocích vlevo i vpravo opakovaný grafický prvek (v PHP vypisuji data v cyklu) (ideálně o výšce 1px a vertikálně ho opakovat vždy na výšku 1 řádku) a dole pod posledním záznamem grafické zápatí. Pomocí tabulky je to jednoduché, ale pomocí CSS mi to nejde... Pomůže mi někdo příkladem? Moc díky...
Str4wberry
Profil
Příklady už jsem poslal.

To si to nemůžete zkusit?
peta
Profil
Str4wberry:
1) Uz jpw logo pak neni zarovnane, kde ma byt.
div  {border:2px solid #f00;}
div div {border: 0 solid;}
1) A druha vec je pak orezani zprava vuci body elementu. To seznam konci na sirce body a ne na sirce divu nad nim
div div  {width:2000px;}
div div div {width:auto;}
Str4wberry
Profil
Zmíněné problémy nepozoruji.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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