Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Proste pytanie o divy, wyrownanie pionowe tla, multimedialny topic, obrazki, linki itp ;)
uglukha
post
Post #1





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 5.05.2008

Ostrzeżenie: (0%)
-----

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:
(IMG:http://uglukha.webpark.pl/ie-przyklad1.gif)

a ff wyglada to tak: ;/
(IMG:http://uglukha.webpark.pl/ff-przyklad1.gif)


kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. 	<title>Divy, css i html</title>
  5. 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. 	<style>
  7. 		#contener { 
  8. 		width: 900px; background: url('bg.gif') repeat;
  9. 		}	
  10.  
  11. 		#menu { 
  12. 		float: left; width: 200px;
  13. 		}
  14.  
  15. 		#tresc { 
  16. 		float: right; width: 700px;
  17. 		}
  18. 	</style>
  19. </head>
  20. <body>
  21. 	<center>
  22. 		<div id="contener">
  23. 			<div id="menu">
  24. 				<p>tu jest sobie menu...</p>
  25. 			</div>
  26. 			<div id="tresc">
  27. 				<p>a tu jest sobie tresc...</p>
  28. 			</div>
  29. 		</div>
  30. 	</center>
  31. </body>
  32. </html>
[HTML] pobierz, plaintext


Przyklad2
probowalem tez tak:

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

w ie6 znowu jest dobrze, o to chodzi:
(IMG:http://uglukha.webpark.pl/ie-przyklad2.gif)

a ff wyglada to tak: ;/
(IMG:http://uglukha.webpark.pl/ff-przyklad2.gif)

kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. 	<title>Divy, css i html</title>
  5. 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. 	<style>
  7. 		#contener { 
  8. 		width: 600px; background: url('bg.gif') repeat;
  9. 		}	
  10.  
  11. 		#menu { 
  12. 		float: left; width: 150px; background: url('bg.gif') repeat;
  13. 		}
  14.  
  15. 		#tresc { 
  16. 		float: right; width: 450px; background: url('bg.gif') repeat;
  17. 		}
  18. 	</style>
  19. </head>
  20. <body>
  21. 	<center>
  22. 		<div id="contener">
  23. 			<div id="menu">
  24. 				<p>...</p>
  25. 			</div>
  26. 			<div id="tresc">
  27. 				<p>a tu jest sobie tresc...</p>
  28. 			</div>
  29. 		</div>
  30. 	</center>
  31. </body>
  32. </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!
Go to the top of the page
+Quote Post
zelu
post
Post #2





Grupa: Zarejestrowani
Postów: 229
Pomógł: 34
Dołączył: 7.12.2008
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Przede wszystkim usuń ten znacznik <center>, bo od ustalania pozycji elementów na stronie są CSSy (IMG:style_emoticons/default/winksmiley.jpg) 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 (IMG:style_emoticons/default/smile.gif)

I dodaj

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


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


Pozdrawiam

Ten post edytował zelu 30.07.2010, 07:31:51
Go to the top of the page
+Quote Post
uglukha
post
Post #3





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 5.05.2008

Ostrzeżenie: (0%)
-----

hej,
dzieki za szybka odpowiedz, racja z tym center (IMG:style_emoticons/default/winksmiley.jpg)

clear:both pomoglo, dzieki (IMG:style_emoticons/default/smile.gif)

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 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. 	<title>Divy, css i html</title>
  5. 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. 	<style>
  7. 		#contener { 
  8. 		width: 600px; background: url('bg.gif') repeat; margin-left: auto; margin-right: auto;
  9. 		}	
  10.  
  11. 		#menu { 
  12. 		float: left; width: 150px;
  13. 		}
  14.  
  15. 		#tresc { 
  16. 		float: right; width: 450px;
  17. 		}
  18. 	</style>
  19. </head>
  20. <body>
  21. 		<div id="contener">
  22. 			<div id="menu">
  23. 				<p>tu jest sobie menu...</p>
  24. 			</div>
  25. 			<div id="tresc">
  26. 				<p>a tu jest sobie tresc...</p>
  27. 			</div>
  28. 			<div style="clear: both;"></div>
  29. 		</div>
  30. </body>
  31. </html>
[HTML] pobierz, plaintext

Go to the top of the page
+Quote Post
zelu
post
Post #4





Grupa: Zarejestrowani
Postów: 229
Pomógł: 34
Dołączył: 7.12.2008
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/winksmiley.jpg) I absolutnie nie używaj do tego position: absolute. Nie wiem skąd ludziom przychodzi do głowy używanie tego ustrojstwa (IMG:style_emoticons/default/tongue.gif)

Poza tym warto Ci grzebać się w ie6 jeszcze? Nawet google z tego zrezygnowało (podobnie jak np facebook) (IMG:style_emoticons/default/smile.gif)


Pozdro
Go to the top of the page
+Quote Post
uglukha
post
Post #5





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 5.05.2008

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/winksmiley.jpg)

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!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.09.2025 - 08:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn