Autor Zpráva
Argonisius
Profil *
Ahoj, mám 2-sloupcový css layout, ale když u pravého sloupce nastavím padding, celý se mi roztříští ( pravý sloupec se odsune někam dolů a doleva)

css:

/* tělo */
body
{
margin-top: 0;
background-color: black;
}

/* obal */
div#obal
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}

/* hlavička */
div#hlavicka
{
width: 1000px;
height: 120px;
background-image: url(../images/logo.png);
border-bottom: 2px solid #ffe680;
}

/* obsah */
div#obsah
{
width: 1000px;
background-image: url(../images/falesne_sloupce.png);
background-repeat : repeat-y;
padding: 0px;
position: relative;
}

/* levý sloupec */
div#levysloupec
{
width: 180px;
background-color: #4c3b27;
float: left;
padding: 10px 0 0 0;
position: relative;
}

/* pravý sloupec */
div#pravysloupec
{
width: 820px;
background-color: #8a6943;
float: right;
padding: 0px;
position: relative;
}

/* patička */
div#paticka
{
width: 1000px;
height: 20px;
background-color: #4c3b27;
border-top: 2px solid #ffe680;
padding-top: 2px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color:#ffe680;
}

div#paticka a
{
text-decoration:none;
color:#ffe680;
}

div#paticka a:hover
{
text-decoration:none;
color:white;
}

/* obtékání */
.obtekani:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.obtekani
{
display: inline-table;
}

/* trik pro IE pro Windows\*/
* html .obtekani
{
height: 1%;
}

.obtekani
{
display: block;
}
/*konec triku pro IE pro Windows*/

html (s php, používám redakční systém)

<!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" lang="cs" xml:lang="cs">

<head>
<?php _templateHead(); ?>
</head>

<body>
<div id="obal">
<div id="hlavicka">
<?php echo _title; ?>
<?php echo _description; ?>
</div><!--konec bloku hlavicka-->
<div id="obsah" class="obtekani">
<div id="levysloupec">
<div class="navigace">
<?php _templateBoxes(1); ?>
</div>
</div><!--konec bloku levysloupec-->
<div id="pravysloupec">
<?php _templateTitle(); ?>
<?php _templateContent(); ?>
</div><!--konec bloku pravysloupec-->
</div><!--konec bloku obsah-->
<div id="paticka">
<div class="left">
&copy 2008 Argonisius
</div>
<div class="right">
<?php _templateLinks(); ?>
</div>
</div><!--konec bloku paticka-->
</div><!--konec bloku obal-->
</body>
</html>

P.S. V nepořádku je asi něco s levým sloupcem, protože se mi pravý sloupec posune dolů na konec levého...

Díky za pomoc, jinak stránky mám na dhost.info/barbarianvillage
Davex
Profil
Tak mu ještě uber šířku.
Argonisius
Profil *
Levému? Nechápu jak to pomůže, kromě toho že budu muset předělávat celej design....
Davex
Profil
Když přidáš padding pravému sloupci, tak mu také musíš zúžit width - jinak se to nevejde do vyhrazeného místa. Prostuduj si něco o box modelu.
panther
Profil
Argonisius
pokud máš v grafice nějakou šířku boxu, v CSS se skládá ze tří složek: width, padding-left a padding-right
pokud zvýšíš padding, musíš o stejně pixelů snížit width
Argonisius
Profil *
Ok. díky

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:

0