Poradziłem sobie z cięciem layouta
Znalazłem świetnego tutoriala, jasno pokazane.
Ale mam inny problem. Ciągle się pojawiają nowe problemy. Mam taką prostą stronkę i niepotrafie jej ogarnąć.
Czym się różnią te dwie strony ? Są podobne z tym, że jedna działa tak jak ma działać, a druga nie.
Pierwsza strona, działająca poprawnie:
http://www.2poczatek.za.pl/proba/index.html- Kod: Zaznacz cały
[syntax=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pl" />
<meta name-"robots" content="index, follow" />
<title>Moja pierwsza strona www</title>
<meta name="description" content="Moja pierwsza strona www" />
<meta name="keywords" content="Moja pierwsza strona www, pierwsza strona www" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div id="main_column">jakis tekst jakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekst</div>
<div id="side_panel">jakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekst</div>
<div class="clear"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>[/syntax]
[syntax=css]* {
padding: 0;
margin: 0;
}
body {
background: #6e4b26 url('images/bg.jpg') 0 0 fixed;
margin: 20px 0;
}
#container {
width: 758px;
margin: 0 auto;
padding: 0 15px 0 5px;
}
#header {
height: 155px;
position: relative;
background: url('images/header.gif') left bottom no-repeat;
}
#content {
background: url('images/content.gif') 0 0 repeat-y;
height: 100%;
}
#main_column {
float: left;
width: 528px;
padding: 0 13px 0 15px;
background: url('images/main_column.gif') 0 0 no-repeat;
}
#side_panel {
float: right;
width: 191px;
padding: 106px 0 0 9px;
background: url('images/side_panel.gif') 0 0 repeat-y;
position: relative;
}
.clear {
clear: both;
}
#footer {
width: 778px;
margin: 0 auto;
height: 20px;
background: url('images/footer.gif') 5px 0 no-repeat;
}
[/syntax]
Druga stronka, niedziałająca:
http://www.2poczatek.za.pl/Nowastronka/index.html
[syntax=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pl" />
<meta name-"robots" content="index, follow" />
<title>Moja pierwsza strona www</title>
<meta name="description" content="Moja pierwsza strona www" />
<meta name="keywords" content="Moja pierwsza strona www, pierwsza strona www" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="kontener">
<div id="top"> </div>
<!-- koniec top -->
<div id="srodek">
<div id="lewo">Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.</div>
<!-- koniec lewo -->
<div id="prawo">Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.</div>
<!-- koniec prawo -->
<div class="clear"></div></div>
<!-- koniec srodek -->
<div id="bottom"> </div>
<!-- koniec bottom -->
</div>
<!-- koniec kontenera -->
</body>
</html> [/syntax]
[syntax=css]*
{
padding: 0; /* dopełnienie ustawione na 0*/
margin: 0; /* margines ustawiony na 0 */
}
body
{
background-image: url('images/tlo.jpg'); /* osadzenie tła strony */
background-attachment: fixed; /*ustawienie przymocowania tła: na ustalone z góry */
}
#kontener /* kontener - przetrzymuje reszte elementów naszej strony */
{
width: 778px; /*szerokosc prawidłowo powinna byc 1004px*/
margin: 0 auto; /* wysrodkowanie- dodatkowo ustawione w divie align="center" dla starych przeglądarek */
padding: 0 15px 0 5px;
}
/* GORNA CZESC STRONKI */
#top
{
position: relative; /* pozycjonowanie relatywne wzdledem siebie */
margin-top: 10px; /*margines gorny ustawiony na 10 px */
background-image: url('images/top.gif'); /* adres obrazka */
width: 778px; /* szerokosc */
height: 188px /* wysokosc */
}
/* SRODKOWA CZESC STRONKI */
#srodek
{
position: relative; /* pozycjonowanie relatywne wzdledem siebie */
background-repeat: repeat-y;
heght: 100%;
}
#lewo
{
background-image: url('images/lewo.gif'); /* adres obrazka */
background-repeat: no-repeat;
width: 571px;
float: left;
}
#prawo
{
background-image: url('images/prawo.gif'); /* adres obrazka */
background-repeat: repeat-y;
width: 207px;
float: right;
position: relative;
}
.clear {
clear: both;
}
/* DOLNA CZESC STRONKI */
#bottom
{
background-image: url('images/bottom.gif'); /* adres obrazka */
width: 778px; /* szerokosc */
height: 98px; /* wysokosc */
z-index: 3;
}
[/syntax]
Dokładnie chodzi mi o to, że w stronce działającej wraz z tekstem strona się rozszerza razem (spójnie) w dwóch różnych divach. div said_panel i main_column. Tam gdzie niema tekstu jest poprostu białe tło.
Natomiast w stronce niedziałającej jak widać: Dwa różne divy div lewo i prawo, żyją tak osobno, oba się rozszerzą, ale tylko pod ilość tekstu. A gdzie go braknie zostaje dziura. (Akurat tutaj dałem no-repeat w kolumnie po lewo, ale to nieszkodzi) W tej działającej też jest no-repeat, a działa.... nierozumiem tego.
Co odpowiada za to spójne rozszerzanie? Gdy jest więcej tekstu w jednym divie drugi też się rozszerzy.
Próbowałem na podstawie prób i błędów, ale jakbym niekonbinował niepotrafie uzyskac takiego efektu.
tak więc to co zobaczylem pod adresem 
