Autor Zpráva
Pavel Straka
Profil
Zdravím, rád bych poprosil zkušenější o radu, jak vytvořit layout v tomto stylu:
<div class="rodic">
   <div class="nad">
      ... obsah s proměnlivou výškou
   </div>

   <div class="stoprocent">
       ... 100% šířky stránky, ne rodiče, výška je fixní
   </div>

   <div class="pod">
       ... obsah s proměnlivou výškou
   </div>
</div>

Zkusil jsem nastavit
   .stoprocent {position:absolute;}

ale mám pak problém s tou proměnlivou výškou u .nad a také mně .100procent překrývá .pod.

Existuje způsob, jak to nějak v CSS vyřešit?
Děkuji za ochotu.
Tomáš123
Profil
Pavel Straka:
Vlákno s podobnou tématikou by vám malo pomôcť pohnúť sa ďalej.
Pavel Straka
Profil
Díky za pomoc, ale bohužel ne. V tom příkladu obrázek ani nemám na 100% šířky stránky a také je problém s textem, který by měl být pod obrázkem...
Tomáš123
Profil
Pavel Straka:
A pozreli ste si obidve ukážky?
martinK
Profil
co TOTO?

výsledek je takový, jaký si chtěl, v kontextu nedodáváš, jak je třeba dosáhnout výsledku. Případně by to chtělo více objasnit :)... těžko používat procenta tak, aby nepřebírala výšku/šířku rodiče. Tedy alespoň mi ten způsob není znám. Dej vědět a případně to zkusíme ještě nějak upravit ;-)
anonymníí
Profil *
Pavel Straka:
Předpokládám, že stránka je centrována (řekněme standardně se šířkou 960px a margin: auto).

Pak předpokládám, že element, který chceš roztáhnout, je nějaký grafický prvek (proto pevná výška), šlo by to udělat takto:

.stoprocent {
    height: 20px;
    margin: 0 -1000px;
    padding: 0 1000px;
    background: url('...') center top no-repeat;
}
A kolem .rodic by pak byl ještě jeden obal, třeba #obal s overflow: hidden.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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