Autor Zpráva
Petr0007
Profil *
Dobrý večer, potřeboval bych poradit, jak udělat následující:

Mám dvousloupcový layout, kód vypadí např. takto:

.prava {
float: right;
margin-top: 0px;
width: 500px;
height: 100px;
background-image: url('prava.png');
background-repeat: no-repeat;
}
.left-column {
float: left;
margin-top: 0px;
width: 200px;
height: 100px;
background-image: url('leva.png');
background-repeat: no-repeat;
}

Nechci aby se toto pozadí opakovalo, ale když je text delší než předepsaných 500 px, aby se stránka automaticky prodloužila a používalo toto:

.cele {
width: 700px;
min-height: 60px;
background-image: url('cele.png');
margin-top: 0px;
margin-bottom: 0px;
padding-left: 100px;

A toto se může opakovat kolikrát chce. Je to dlouhé přes celé dva sloupce, aby pokaždé končily na stejném místě. Já ale nevím, jak udělat strukturu HTML, aby se ten text automaticky přeléval do dalšího divu, jak mají jít divy za sebou a do jakého divu mám vkládat kód.

Doufám, že je to k pochopení a děkuji za každou pomoc
Petr0007
Profil *
Tak trochu jednodušeji.

Mám dvousloupcový layout. Nejprve mám 500 px vysoký obrázek pro levý sloupec a 500 px vysoký obrázek pro pravý sloupec. Tyto obrázky jsou nakresleny tak, že se neopakují. Po těchto 500 px potřebuji ale, aby se stránka automaticky zvětšovala a přidávala tam obrázek, který je velký přes oba dva sloupce. Tento obrázek se může opakovat kolikrát chce.

Jde to nějak udělat?
tiso
Profil
Ide, záleží na tom čo na tých 500px je a kam chceš dávať ten opakujúci sa obrázok - či hore alebo dolu...
Petr0007
Profil *
No, mam dva obrazky...Jeden do prava, druhy do leva. Je na nich prechod a ten po 500 px konci a pod to bych chtel dat dalsi, kterej se bude opakovat, podle toho, kolik tam bude textu a tenhle obrazek je siroky pres oba dva sloupce.

Ja tedy nevim, jak to napsat v CSS a jak mam potom za sebou seradit DIVy, aby se po 500px text psal jiz do toho obrazku, pres dva sloupce. Zatim se mi podarilo jen to, ze po 500px obrazek konci a text pokracuje na bile strance.....:(
tiso
Profil
To pozadie dáš nadradenému prvku, a ten po oboch floatovaných stĺpcoch ešte musí obsahovať nejaký prvok s clear: both;(pätičku, hr, prázdny div, ...) Potom to bude robiť to čo chceš.
Petr0007
Profil *
Mohl bys mi to prosim ukazat? Tady je CSS kod

.cele {
width: 700px;
background-image: url('cele.png');
background-repeat: repeat-y;
margin-top: 0px;
margin-bottom: 0px;
}
.pata {
width: 700px;
height: 50x;
margin-top: 0px;
background-image: url('pata.png');
clear: both;
}
.prava{
float: right;
margin-top: 0px;
width: 600px;
height: 500px;
background-image: url('prava.png');
background-repeat: no-repeat;
}
.levy{
float: left;
margin-top: 0px;
width: 100px;
height: 500px;
background-image: url('leva.png');
}

a v html

<div class="column">
<div class="levy"></div>
<div class="pravy"></div>
</div>

<div class="pata"></div>

Uz jsem zkousel hodne moznosti, ale porad to nejede...
tiso
Profil
Prečítaj si to češte raz, chýba Ti prvok s clear: both;
Petr0007
Profil *
No, ten mam v te paticce, tak jsem myslel, ze to bude stacit. Ja totiz CSS moc neumim a kdyz uz jsem dokazal udelat nejaky ten layout, tak se to zaseklo na tomhle...:(
tiso
Profil
Hovorím Ti prečítaj si to ešte raz, najlepšie viackrát... Máš splnené všetky podmienky ktoré som napísal? Nemáš!
Petr0007
Profil *
A mohl bys mi kdyztak dat nejaky odkaz, kde najdu, jak na to? CSS totiz moc neumim a nechapu co mam delat a hlavne jak to udelat. Dik
tiso
Profil
Sorry, ale nemohol... Keď nevieš čítať tak Ti odkaz nepomôže...
Petr0007
Profil *
Ja jsem si to precetl, ale jak jsem psal, nevim jak to udelat...:(
tiso
Profil
To je taký problém dať <div class="pata"></div> do toho predchádzajúceho div-u? Alebo čo sa Ti zdá nepochopiteľné na tom čo som napísal?
Petr0007
Profil *
Hura, moc diky, tak už to funguje. Ale mam jeste jeden a snad posledni dotaz. Pokud je div pata prazdny, tzn ze v nem neni zadny text, tak se vubec nezobrazi. Jak docilit toho, aby se i prazdny div zobrazil?
tiso
Profil
1. <div>&nbsp;</div>
2.<div><!--komentar--></div>
Toto téma je uzamčeno. Odpověď nelze zaslat.

0