Autor Zpráva
cr4zy
Profil
#1 · Zasláno: 13. 7. 2007, 11:55:55
Odpovědět Citovat
Mám vedle sebe 3 divy. Krajní jsou plovoucí (mají float). U prostředního mám margin: 0 auto. A všechny 3 divy ještě v jednom divu. A když nastavým nějakou větší délku tomu prostřednímu divu, tak prochází přes spodní div (patičku) . Chápu že se tam mám asi použít clear: both ale stejně to nějak nefunguje.
Flavicius
Profil
#2 · Zasláno: 13. 7. 2007, 12:04:50
Odpovědět Citovat
Můžeš sem prosím dát celý kód?
cr4zy
Profil
#3 · Zasláno: 13. 7. 2007, 13:20:24
Odpovědět Citovat
div#stred {
text-align: center;

}

div#stred div#all {
position: relative;
margin: 0 auto 0 auto;
width: 802px;

}

div#stred div#all div#web {
position: relative;
float: left;
background:url(images/bg_web.png) repeat-y;
width: 802px;

}

div#stred div#all div#web a {
color: #9a8c8c;
text-decoration: none;
}

div#stred div#all div#web a:hover {
color: #f20e0e;
text-decoration: none;
}

div#stred div#all div#web div#top {
background: url(images/top.png) no-repeat ;
position: relative;
width: 802px;
height: 32px;
text-align: center;
}

div#stred div#all div#web div#header {
background: url(images/header.png) no-repeat ;
position: relative;
width: 802px;
height: 233px;
text-align: center;
}


div#stred div#all div#web div#middle {
background: url(images/middle.png) no-repeat;
position: relative;
width: 802px;
height: 277px;
text-align: center;

}

div#stred div#all div#web div#middle div#left {
position: relative;
float: left;
display: inline;
width: 146px;
margin: 0;
height: 300px;
margin:0 0 0 5px;
font-size: 12px;
text-align: left;
background:blue;
}

div#stred div#all div#web div#middle div#right {
position: relative;
float: right;
display: inline;
width: 146px;
height: 50px;
margin: 0 5px 0 0;
font-size: 12px;
text-align: left;
background: red;
}

div#stred div#all div#web div#middle div#center {
position: relative;
margin: 0 auto ;
width: 480px;
height: 500px;
text-align: center;
background:silver;
}

div#stred div#all div#web div#bottom {
position: relative;
float: left;
width: 802px;
height: 32px;
margin: 0 0 0 0;
text-align: center;
background: red;
background:url(images/bottom.png) no-repeat;
}
lopik
Profil
#4 · Zasláno: 13. 7. 2007, 17:48:14
Odpovědět Citovat
cr4zy
to je sice fajn ze si tu dal css kod ale pridaj aj html aby sme videli ako to mas nakodovane.
Časová prodleva: 5 dní
Alutom
Profil *
#5 · Zasláno: 18. 7. 2007, 19:14:04
Odpovědět Citovat
Já osobně řeším stránku se sloupci přibližně takhle: 


<?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 lang="cs" xml:lang="cs" xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Stránka se třemi sloupečky</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <meta http-equiv="content-language" content="cs" />

  <meta http-equiv="content-style-type" content="text/css" />

  <meta name="author" content="Alutom" />

  <meta name="description" content="Stránka se třemi sloupečky" />

  <style type="text/css">

* {margin: 0; padding: 0;}

body {color: black; background: white;}

#head, #foot {width: 100%;}

#left, #foot {clear: left;}

#left, #right, #content {float: left;}

#left {width: 20%;}

#content {width: 60%;}

#right {width: 20%;}

  </style>

</head>

<body>

  <div id="head"><h1>Hlavička</h1></div>

  <div id="left">

    <p>Levý</p>

  </div>

  <div id="content">

    <p>Obsah</p>

  </div>

  <div id="right">

    <p>Pravý</p>

  </div>

  <div id="foot"><p>Patička</p></div>  

</body>

</html>


Je to stručné a jednoduché
Časová prodleva: 17 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0