Forum PHP.pl > [CSS][HTML]Proste pytanie o divy, wyrownanie pionowe tla

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]Proste pytanie o divy, wyrownanie pionowe tla

uglukha

30.07.2010, 07:23:57

Witam,
mam proste pytanko, zrobilem nawet przyklady zeby bylo lepiej widac o co chodzi. Co zrobic aby tlo bylo wyswietlane w firefox bez ustalania sztywnych wysykosci dla divow?

Przyklad 1
strona:
http://uglukha.webpark.pl/

w ie6 jest dobrze, o to chodzi:

a ff wyglada to tak: ;/

kod:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Divy, css i html</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style>
		#contener { 
		width: 900px; background: url('bg.gif') repeat;
		}	
 
		#menu { 
		float: left; width: 200px;
		}
 
		#tresc { 
		float: right; width: 700px;
		}
	</style>
</head>
<body>
	<center>
		<div id="contener">
			<div id="menu">
				<p>tu jest sobie menu...</p>
			</div>
			<div id="tresc">
				<p>a tu jest sobie tresc...</p>
			</div>
		</div>
	</center>
</body>
</html>
[HTML] pobierz, plaintext

Przyklad2
probowalem tez tak:

strona:
http://uglukha.webpark.pl/index2.html

w ie6 znowu jest dobrze, o to chodzi:

a ff wyglada to tak: ;/

kod:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Divy, css i html</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style>
		#contener { 
		width: 600px; background: url('bg.gif') repeat;
		}	
 
		#menu { 
		float: left; width: 150px; background: url('bg.gif') repeat;
		}
 
		#tresc { 
		float: right; width: 450px; background: url('bg.gif') repeat;
		}
	</style>
</head>
<body>
	<center>
		<div id="contener">
			<div id="menu">
				<p>...</p>
			</div>
			<div id="tresc">
				<p>a tu jest sobie tresc...</p>
			</div>
		</div>
	</center>
</body>
</html>
[HTML] pobierz, plaintext

Jesli dodam do contenera height to pojawia sie tlo i w firefox poprawnie, tyle ze wiaze sie to z podaniem konkretnej wysokosci, a strona bedzie miala rozne wysokosci w zaleznosci od podstrony, rowniez czasem div "menu" bedzie dluzszy niz "tresc" a czasem odwrotnie. Wiec nie moge zastosowac stalej height. Jak rozwiazac ten problem? Jakies pomysly?

Z gory dziekuje za wszelka pomoc,
pozdrawiam!

zelu

30.07.2010, 07:30:10

Przede wszystkim usuń ten znacznik <center>, bo od ustalania pozycji elementów na stronie są CSSy

Poczytaj lepiej o margin: 0px auto;

A co do problemu: Oba divy z treścią są u Ciebie floatowane, co znaczy, że wypadają z ogólnej struktury dokumentu. Radze doczytać jakie są konsekwencje floatowania

I dodaj

[HTML] pobierz, plaintext 
<div style="clear: both;"></div>
[HTML] pobierz, plaintext

zaraz za divem o id="tresc". Powinno pomóc

Pozdrawiam

uglukha

30.07.2010, 07:51:00

hej,
dzieki za szybka odpowiedz, racja z tym center

clear:both pomoglo, dzieki

ale ten margin auto nie dziala w ie6 w tym przypadku, w ff jest dobrze, jak to poprawic?

P.S. czy to jest nie poprawne uzywac float w przypadku takich 2 divow? lepiej uzywac pozycjonowania absolutnego?

link:
http://uglukha.webpark.pl/index3.html

aktualny kod:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Divy, css i html</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style>
		#contener { 
		width: 600px; background: url('bg.gif') repeat; margin-left: auto; margin-right: auto;
		}	
 
		#menu { 
		float: left; width: 150px;
		}
 
		#tresc { 
		float: right; width: 450px;
		}
	</style>
</head>
<body>
		<div id="contener">
			<div id="menu">
				<p>tu jest sobie menu...</p>
			</div>
			<div id="tresc">
				<p>a tu jest sobie tresc...</p>
			</div>
			<div style="clear: both;"></div>
		</div>
</body>
</html>
[HTML] pobierz, plaintext

zelu

30.07.2010, 07:56:48

daj dla elementu body text-align: center, a pozniej w contener text-align: left;

Używanie floatów w takiej sytuacji jest ok, ale niesie to za sobą pewne konsekwencje, które powinieneś znać, żeby w przyszłości uniknąć tego typu niespodzianek

I absolutnie nie używaj do tego position: absolute. Nie wiem skąd ludziom przychodzi do głowy używanie tego ustrojstwa

Poza tym warto Ci grzebać się w ie6 jeszcze? Nawet google z tego zrezygnowało (podobnie jak np facebook)

Pozdro

uglukha

30.07.2010, 08:10:41

Wielkie dzieki, pomoglo!
text-align itd to juz zostawie na pozniej, i tak to przeniose wszystko do odzielnego arkusza .css, tutaj wrzucilem po prostu okrojony do minimum kod, zeby bylo widac o co chodzi w moim pytaniu bez potrzeby przebijania sie przez mase kodu.

co do ie6, jakos tak mam, ze lubie zeby wszedzie dzialalo. Jesli sie da w miare prostym sposobem zrobic to nawet ie6 tez potestuje

wlasnie sprawdzilem statystyki, ie6 ma 4,5% rynku heh, myslalem ze z 10-15... wielu moich znajomych ma w korporacjach poinstalowane ie6 i nic innego nie moga instalowac, wiec jakos tak pod to ie6 zawsze robilem z przekonaniem ze sporo ludzi ma to w pracy...

p.s. jakby ktos w przyszlosci mial podobny problem, to tu jest ostateczna dzialajaca wersja dla ff i ie6:
http://uglukha.webpark.pl/index4.html

dzieki zelu za pomoc,
pozdrawiam!

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.