Autor Zpráva
quinux
Profil
Zdravím,

vím, že už se to zde řešilo, ale nenalezl jsem nikde odpověď jestli jde uďelat 3-sloupcový layout tak, aby měl alespoň pravý sloupec pod prostředním? Když se podíváte jak to řeší pixy http://www.pixy.cz/blogg/clanky/css-3col-layout/ tak je vidět, že levý i pravý sloupec jsou před prostředním, ale z hlediska SEO má být údajně menu (tedy ty dva boční sloupce) až za textem (tedy prostředním sloupcem). Je mi jasné, že toho asi úplně nedosáhnu, ale jde alespoň udělat ten layout tak, aby byl ten pravý sloupec pod prostředním?

Díky
Kráťa
Profil
Absolutně napozicovat?
Oswald
Profil
Zalezi, jestli ten layout a jednotlivé sloupce mají mít pevnou nebo natahovací šířku. Pokud natahovací, tak by to šlo např. takhle:



#obal{
float:left;
width:80%;
}
#levy{
float:left;
width:20%;
}
#prostedni{
float:right;
width:80%;
}
#pravy{
float:right;
width:20%;
}


<div id="obal">
<div id="levy"><p>obsah leveho sloupce</p></div>
<div id="prostredni"><p>obsah prostredniho sloupc</p></div>
</div>

<div id="pravy"><p>obsah praveho sloupce</p></div>

quinux
Profil
No já jsem zatím vytvořil tohle, ale mám problém s tím pravým sloupcem, který nechce jít nahoru ani ve Firefoxu ani v IE.

http://www.quinux.com/webtools/
quinux
Profil
Už se mi podařilo dostat ten pravý sloupec nahoru, ale teď mi překrývá patičku při delším textu-můžu to obejít tím, že zajistím, aby v prostředním nebo levém sloupci byl vždy text delší což v podstatě asi vždycky bude, ale radši bych to vyřešil celé..nemáte někdo nápad jak na to?
Martin Kuželka
Profil
Stačí neumisťovat ten pravý sloupec pomocí absolutního pozicování.
quinux
Profil
Martin Kuželka
Když ho abolutně nenapozicuji tak spadne dolů a není nahoře :o(
Martin Kuželka
Profil
Zkus ubrat to absolutní pozicování u #rightmenu a přidat místo toho float: right;, potom u #content uber ten margin a přidej float: left;.
krteczek
Profil
no na tohle je takove řešení pomocí dvou dvousloupcových layoutu
je to narychlo spíchlé ale funkční,bude třeba doladit šířky podle potřeby je to jen hrubý nástin jak by to mohlo vypadat.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html >
<head>
<title>Formulář pro vytvoření uživatele</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" >
<!--
body{text-align:center}
.vse{width:770px;border:1px solid black;margin: 0 auto}
.hlavicka{width:770px;border-bottom:1px solid black}
.pravastred{width:600px;float:left;padding:50px 0;border:1px solid black;}
.pravemenu{float:left;border:1px solid black;width:120px;}
.levemenu{float:right;width:120px;padding:50px 0;border:1px solid black;}
.stred{float:right;width:440px;border:1px solid black}
.patkamala{clear:both}
.patka {clear:both;width:770px;border-top:1px solid black}
-->
</style>
</head>
<body>
<div class="vse">
<div class="hlavicka">
<h1>nadpis</h1>
</div>
<div class="pravastred">
<div class="stred">
<h2>tady bude nějaký článek</h2>
</div>
<div class="pravemenu">
<h3>pravá nabídka</h3>
</div>
<div class="patkamala">
</div>
</div>
<div class="levemenu">
<h3>levá nabídka</h3>
</div>
<div class="patka">
<p>&copy; krteczek</p>
</div>
</div>
</body>
</html>


na http://www.krteczek.linuxzona.com/trisloupy/
je jak to vypadá ve firefoxu.

krteczek

dodatek: není použito žádného absolutního pozicování
je tam ukázána i ta samá stránka bez stylů ,stačí kliknout na odkaz
navíc se tohle řešení přispusobuje obsahu (výška ) a vždy se to poskládá tak aby patička byla dole
quinux
Profil
Martin Kuželka

Díky moc - pomohlo to :o)

krteczek

Taky děkuju, ale předělávat celý layout se mi fakt nechce. Už to ani není třeba ;o)


Všem děkuju za pomoc a uzavírám toto fórum
Toto téma je uzamčeno. Odpověď nelze zaslat.

0