Autor Zpráva
l.lenek
Profil *
Zdravím, už pekných pár dní se snažim udělat dvousloupcový beztabulkový layout dle návodu na wellstyled.com, jenže mi nefunguje v IE6 a sloupce se mi zobrazují pod sebou a ještě bez orámování a je tam dokonce vidět i <hr />. Je to na stránce: http://www.medicatechnology.cz/

prosím Vás mohl byste mi někdo poradit? Už jsem zkoušela měnit různě šířky, fakt sis tím hraju pár dní.

CSS:

* Nastavení dvou sloupců*/
#sloupce {
width: 100%;
margin:0; padding: 0;
border: 3px solid rgb(0,85,130);
text-align:left;
max-width: 600px;

}
#levy {
float: left;
width: 460px;
margin:0; padding:0;
}
#levy-sloupec {
margin:0; padding: 0.5em 1em;
font-size: 100%;
}
#pravy {
margin:0 0 0 470px; padding:0;
}
#pravy-sloupec {
margin:0; padding: 0.5em 1em;
font-size: 100%;
}
hr.cleaner {
clear:both;
height:1px;
margin: -1px 0 0 0; padding:0;
border:none;
visibility: hidden;
}

a v XHTML kódu to mám:

div id="sloupce">
<div id="levy">
<div id="levy-sloupec">
text
</div>
</div>
<div id="pravy">
<div id="pravy-sloupec">
obrázky
</div>
</div>
<hr class="cleaner" />
</div>


Děkuji Vám, moc byste mi pomohli. Jsem holt játro. Děkuji. l.lenek
Vladosik
Profil
Já v IE6 sloupce pod sebou nemám, jsou vedle sebe, ale:

- Co takhle float u pravého sloupce?
- U hr by stačilo jen {clear: both; display: none;} ne?
l.lenek
Profil *
Bohužel to nepomohlo. Posílám odkaz na fotku, kde v IE6 sloupce nejsou vedle sebe a to ne jenom na mem PC.
http://www.medicatechnology.cz/chyba.jpg

Jaá už fakt nevím, jak to udělat. Dokonce mám zobrazené i <hr /> a přitom dle css po opravě by to zobrazeno být nemělo.

pls pomoc...

Děkuji l.lenek
Bubák
Profil
- U hr by stačilo jen {clear: both; display: none;} ne?
A to i pak čistič (cleaner) funguje? Zřejmě bude lepší namísto display: none; použít
visibility: hidden
l.lenek
Profil *
Vymazala jsem paměť v Drupalu, spustila cron.php a smazala veškeré cookies v IE6 a nic. Opravila jsem <hr /> na původní hodnoty (aby tam bylo i visibility: hidden) a <hr /> je stále vidět a sloupce jsou pořád pod sebou.
Vladosik
Profil
Bubák
Já nevím, ale určitě máš pravdu:-)

l.lenek
Jo poprvý jsem to špatně pochopil. Design mě zmátl... Omlouvám se.

No možná zas plácnu kravinu, ale problém může být v počítání paddingu. Více třeba zde - http://www.jakpsatweb.cz/css/mody-prohlizecu.html a "Počítání rozměrů, např šířky" nebo přímo http://www.jakpsatweb.cz/css/padding.html

Edit: No tak asi nic, to asi nepomůže. Příště už radši neradím:-)
l.lenek
Profil *
zkouším experimentovat s tím paddingem, ale mne se poˇřád zdá, že IE6 nebere šířku, prostě tam snad vůbec ty sloupce nejsou. Na obrázku http://www.medicatechnology.cz/chyba.jpg to je vidět. Text mi div nezasahuje do pravych odkazů, neblbnu už? pls pomoc........pls, pls
l.lenek
l.lenek
Profil *
zkouším experimentovat s tím paddingem, ale mne se poˇřád zdá, že IE6 nebere šířku, prostě tam snad vůbec ty sloupce nejsou. Na obrázku http://www.medicatechnology.cz/chyba.jpg to je vidět. Text mi div nezasahuje do pravych odkazů, neblbnu už? pls pomoc........pls, pls
l.lenek
Ještě jednou:
fakt to nepomohlo :( . V IE není ani ten rámeček modrý co obepíná oba dva ty sloupce.
l.lenek
Profil *
V originále na wellstyled.com to ale funguje

http://wellstyled.com/files/css-2col-fluid-layout/example1.html - řešení
http://wellstyled.com/css-2col-fluid-layout.html - kód
lenek
Profil
Tak už jsem asi blázen. Zkusmo jsem podbarvila levy-sloupec :
#levy-sloupec {
margin:0; padding: 0.5em 0.5em;
font-size: 100%;
background-color: rgb(0,204,255);

no, a v IE6 se barva vůbec neukázala. Prosím Vás víte si s tím někdo rady?

l.lenek
Plaváček
Profil
lenek

Neřádí ti tam tenhle brouček? http://ie-brouci.dero.name/peekaboo.html
Máš ukončené obtékání plovoucích prvků?
lenek
Profil
To je ono! Už mám sloupce vedle sebe.Děkuji Vám Plaváčku. Jen ten modrý rámeček lemující oba bloky v IE stále nemám, to je podivné nemyslíte?
border: 3px solid rgb(0,85,130); - toto přece normálně v IE funguje ne? pls pořád o pomoc. Děkuji. l.lenek
lenek
Profil
Tak to jsem opravdu už blázen, přidala jsem:
border: 3px solid rgb(0,85,130);
do tohoto:
/* \*/ * html #sloupce { height: 1px; border: 3px solid rgb(0,85,130)} /* */

a ono to opravdu funguje celé. To snad není pravda. Se picnu z toho. PLAVÁČKU děkuji!!!

Ještě sem vložím celou opravu pro další játra jako jsem já :)

CSS:

/* Nastavení dvou sloupců*/
#sloupce {
width: 100%;
margin:0; padding: 0;
border: 3px solid rgb(0,85,130);
text-align:left;
max-width: 600px;

}
/* \*/ * html #sloupce { height: 1px; border: 3px solid rgb(0,85,130)} /* */
#levy {
float: left;
width: 460px;
margin:0; padding:0;
}
#levy-sloupec {
margin:0; padding: 0.5em 0.5em;
font-size: 100%;
background-color: rgb(0,204,255);
}
#pravy {
margin:0 0 0 470px; padding:0;
}
#pravy-sloupec {
margin:0; padding: 0.5em 1em;
font-size: 100%;
background-color: rgb(255,255,0);
clear: right;
}
hr.cleaner {
clear:both;
height:1px;
margin: -1px 0 0 0; padding:0;
border:none;
visibility: hidden;
}

kód XHTML:
<div id="sloupce">
<div id="levy"><div id="levy-sloupec">
text
</div></div>
<div id="pravy"><div id="pravy-sloupec">
obrázek
</div></div>
<hr class="cleaner" />
</div>

děkuji, po týdnu pátrání konečně výsledek :).

l.lenek
habendorf
Profil

Ještě sem vložím celou opravu pro další játra jako jsem já :)


Snad si toho nikdo nevšimne a nebude v tom hledat poučení. S prominutím, to je hroznej hnůj.
lenek
Profil
Mohl bys to vysvětlit. kromě těchto dvou řádků:
background-color: rgb(255,255,0);
background-color: rgb(0,204,255);
která jsem tam vložila abych viděla dva sloupce je vše (tyto dva sloupce)z těchto stránek:
http://wellstyled.com/css-2col-fluid-layout.html
http://ie-brouci.dero.name/peekaboo.html

v čem je to tedy hroznej hnůj? Nějak jsem to nepochopila v čem je to hnůj? V pravopise (to být může, bohužel), v XHTML / to se mi neyd8 a css je z výše uvedených stránek. Tak v čem je ten hnůj?
l.lenek
habendorf
Profil
lenek
z těchto stránek:
http://wellstyled.com/css-2col-fluid-layout.html


Nějaký důvod používat fluidní layout pro fixní web?
Hnůj je v naprosto nesmyslném mark-upu i CSS.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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