Autor Zpráva
mardon
Profil
Poradťe prosím příklad na centrovaný 3 sloupcový layout pro pevnou šířku webu 780 px.


Předem díky
Manq
Profil
http://css.interval.cz/layouty/
kletely
Profil
mardon
No yle asi si ho budeš musieť upraviť :)

ukážka: http://css.interval.cz/priklady/priklad-9-1.htm
Kód a popis: http://css.interval.cz/clanky/vychytany-trisloupcovy-fluidni-layout-se -stejnou-delkou-panelu/
mardon
Profil
Ano, ale co kdybych chtela mit obsah jako prvni sloupec?
kletely
Profil
mardon
No tak si ich vymeň/uprav.
mardon
Profil
Dá se nějak vycentrovat tento:

http://css.interval.cz/clanky/trisloupcovy-layout-svaty-gral/[/url]
kletely
Profil
mardon
No už je vycentrovaný :)
rommy
Profil *
zde je taky něco :-)
http://blog.html.it/layoutgala/
mardon
Profil
No už je vycentrovaný :)


Doplňuji:
Myslela jsem centrovaný s pevnou šířkou
kletely
Profil
mardon
Centruje sa tak to: http://tiso.wz.cz/articles/vycentrovanie-obsahu-stranky.php
A pevnú šírku si snať sama nastavíš? Keby si nevedal tak to sa robí pomocou width :)
mardon
Profil
Centruje sa tak to: http://tiso.wz.cz/articles/vycentrovanie-obsahu-stranky.php
když to udelam podle odkazu take ve FF3.0 je to ok, ale v IE 7.0 to nefunguje.
V cem je problem?
Měsíček
Profil
Pokud děláš centrování přesně podle této stránky ( http://tiso.wz.cz/examples/vycentrovanie-obsahu-stranky.php ) tak bude vycentrovaná .. možná ti to nejde proto, protože jsi tam nedala DOCTYPE s adresou :)
mardon
Profil
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta name="keywords" content="bla bala" />
<meta name="description" content="Decsription." />
<meta name="author" content="mardon" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="cs" />

<title>co už včíl s tým</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-59889-1";
urchinTracker();
</script>
</head>
<body>
<div id="hlavicka">Toto je hlavička stránky.</div>

<div id="container">
<div id="center" class="column">
<h1>Toto je hlavní panel</h1>
<p>Lorem ipsum... </p>
</div>

<div id="left" class="column">
<h2>Toto je levý panel</h2>
<p>Lorem ipsum... </p>
</div>

<div id="right" class="column">
<h2>Toto je pravý panel</h2>
<p>Lorem ipsum... </p>
</div>
</div>

<div id="paticka">
<div id="paticka-uvnitr">Toto je patička stránky.</div>
</div>
</body>
</html>
mardon
Profil
body{
background: url('../images/layout/bg.gif') repeat-x;
min-width: 630px; /* 2 x (LC plna-sirka + CC padding) + RC plna-sirka
}
#container
{
padding-left: 200px; /* LC plna-sirka */
padding-right: 190px; /* RC plna-sirka + CC padding */
position: relative; /* Resi "nekonecnou" stranku v IE7 */
}

#container .column
{
position: relative;
float: left;
}

#center
{
padding: 10px 20px; /* CC padding */
width: 100%;
}

#left
{
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC plna-sirka + CC padding */
margin-left: -100%;
}

#right
{
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -100%;
}

#paticka-uvnitr
{
clear: both;
}

/*** oprava pro IE ***/
* html #left
{
left: 150px; /* RC plna-sirka */
}

/*** Stejna vyska sloupcu ***/
#container
{
overflow: hidden;
}

#container .column
{
padding-bottom: 1001em; /* X + padding-bottom */
margin-bottom: -1000em; /* X */
}

/*** oprava paticky ***/
* html body
{
overflow: hidden;
}

* html #paticka
{
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #FFF; /*** Stejne jako u body ***/
}

/*** Jen pro vzhled ***/

body
{
margin: 0;
padding: 0;
background: #FFF;
}

#hlavicka, #paticka-uvnitr
{
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}

#left
{
background: #66F;
}

#center
{
background: #DDD;
}

#right
{
background: #F66;
}

#container .column
{
padding-top: 1em;
text-align: justify;
}
Měsíček
Profil
Jsem málem z toho kódu omdlel :) .. prosímtě zkus to udělat znova a začít na tisově vycentrované šabloně, protože dosavadní kód je opravdu, ale opravdu hrůza :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0