Forum PHP.pl > [HTML][CSS]Dziwne zachowanie strony w oknie przeglądarki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Dziwne zachowanie strony w oknie przeglądarki

bigbag5

2.01.2012, 08:31:59

Witam,

Spotkałem się dzisiaj z "dziwnym" zachowaniem strony, dlaczego dziwnym? Już tłumaczę

Na pełnym ekranie strona wygląda "ok"

Jak zmniejszę okno przeglądarki i przesunę suwak dolny to w miejscu po za oknem przeglądarki tworzy się kwadrat z tła i nie wiem, o co z tym chodzi...

Tak jak na printscreen'ach poniżej:

FullScreen

W oknie

W oknie po przesunięciu z paskiem

Kod (x)HTML

[HTML] pobierz, plaintext 
<!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="pl" lang="pl">
<head>
	<title>Piwiarnia Słupsk</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="Description" content="Piwiarnia Słupsk" />
	<meta name="Keywords" content="Piwiarnia, Słupsk" />
</head>
<body>
<div id="strona">
	<div id="top">
	<!--  -->
	</div>
	<div id="srodek">
	Test<br/>
	<br/>
	<br/>
	<br/>
	Test 2
	</div>
</div>
<div id="fotter">
	<div id="fotter_inside">
	<!--  -->
	</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

CSS:

[HTML] pobierz, plaintext 
*{
	margin: 0 ;
	padding: 0;
}
 
body {
	background: #830013;
	font-family: "Georgia";
	color: #fff;
}
 
#strona {
	background: #000000 url(img/top-pasek-x.jpg) repeat-x top;	
}
 
#top {
	width: 1293px;
	height: 242px;
	margin: 0 auto;
	background: #830013 url(img/top.jpg) no-repeat;
}
 
#srodek {
	width: 1293px;
	margin: 0 auto;
	height: 100%;
}
 
#fotter {
	background: #830013 url(img/fotter-pasex-x.jpg) repeat-x top;
}
 
#fotter_inside {
	width: 1293px;
	height: 189px;
	margin: 0 auto;
	background: #830013 url(img/fotter.jpg) no-repeat;
}
[HTML] pobierz, plaintext

ok po dodaniu do #srodek tła background: #000000; zadziałało, ale i tak mnie to dziwi bo element #strona ma przecież tło czarne i chyba powinien dziedziczyć ;|

szczerze to od roku css'a nie używałem więc mogę się mylić, na co dzień pracuje z php, a html rzadko (prawie w ogóle) używam, znajomy poprosił o www to się zgodziłem

Ale i tak mnie to dziwi w sumie... no nic może dlatego, że dopiero kładę się spać i całą noc nie spałem to mam dziwne spojrzenie na kod.

Więc ostatecznie jak ktoś może łopatologicznie wytłumaczyć czemu #srodek, nie przejął wartości tła #strona... dziwi mnie to trochę, a css'a uczyłem się ładne parę lat temu więc naprawdę nie wiem

rocktech.pl

2.01.2012, 08:50:12

Witam.

Trochę się wszystko rozpłynęło.

[CSS] pobierz, plaintext 
#strona:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
[CSS] pobierz, plaintext

Co do stopki zobacz jak zrobić to uniwersalnie tzw. sticky footer.

bigbag5

2.01.2012, 17:49:08

@rocktech.pl
Znam tą metodę jak najbardziej

ze względu na projekt graficzny nie chciałem, żeby stopka "przykleiła" się do dolnej krawędzi

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.