Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml][css] ustawianie divow
Forum PHP.pl > Forum > Po stronie przeglądarki
ein
19.12.2005, 19:53:27
witam,
mam taki problem:

otoz chce zeby strona rozciagala sie na cala szerokosc ale przy zmniejszaniu okna przegladarki divy zmniejszaly sie ale tylko do pewnej szerokosci - wowczas pojawialby sie scroll.

no i proawie mi sie to udalo ale niestety elemeny blokowe wpadaja jeden pod drugim przy okreslonej szerokosci przegladarki.

nie wiem czy jasn to wytlumaczylam :roll2: mniej wiecej chodzi mi o ofekt jaki jest na empik.com

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  3. <head>
  4. 	<title>Apoteke</title>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. 	<meta http-equiv="Content-Language" content="pl" />
  7. 	<link rel="StyleSheet" type="text/css" href="style.css" />
  8. </head>
  9. <body >
  10.  
  11. <!--header-->
  12. <div id="header">
  13. 	<div id="left">
  14. 		[main] &nbsp; | &nbsp; [recepty] &nbsp; | &nbsp; [sprzedaz] &nbsp; | &nbsp; [zamowienia] &nbsp; | &nbsp; [podsumowania]<br /><br >
  15.  
  16. 		<span class="black">szukaj:</span> &nbsp; &nbsp; &nbsp;[apteka]&nbsp; &nbsp; | &nbsp; [magazyn]
  17. 	</div>
  18. 	<div id="right">
  19. 		Apteka Zdrowie, 19 grudnia, 2005<br /><br />
  20.  
  21. 		<span class="red">[zaloguj]</span>
  22. 	</div>
  23. </div>
  24. <!--end header-->
  25. </body>
  26. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. Body {
  2. 	text-align: left;
  3. 	font-size: 8pt;
  4. 	font-family: Verdana;
  5. 	margin: 0px;
  6. 	margin-left: -8px;
  7. 	background: url('1.jpg');
  8. 	width: 100%;
  9. 	margin-top: 10px;
  10. }
  11. #header {
  12. 	padding-top: 20px;
  13. 	padding-bottom: 20px;
  14. 	padding-left: 2%;
  15. 	padding-right: 2%;
  16. 	background-color: white;
  17. 	width: 95%;
  18. 	display: block;
  19. 	float: left;
  20. }
  21. #left {
  22. 	width: 500px;
  23. 	display: block;
  24. 	float: left;
  25. 	color: rgb(214,51,51);
  26. }
  27. #right {
  28. 	display: block;
  29. 	text-align: right;
  30. 	width: 200px;
  31. 	float: right;
  32. }
  33. .black {
  34. 	color: black;
  35. }
  36. .red {
  37. 	color: rgb(214,51,51);
  38. }
[HTML] pobierz, plaintext


czy ktos wie moze jak to rozwiazac?
pawel_k
24.12.2005, 00:27:25
proponuje zainteresowac sie czyms takim jak min-width oraz overflow, nie sprawdzalem ale powinno dzialac... powinno, ale IE moze miec problemy z min-width...

jesli chodzi o wchodzenie jednego elementu blokowego pod drugi to musisz pobawic sie z pozycjonowaniem absolute... najlepsze byloby position: fixed ale znowu beda protesty IE...
ein
5.01.2006, 16:37:10
jakie w koncu nadeszlo rozwiazanie?

niestety min-width faktycznie nie dziala pod IE wiec aby jednak zmusic nasza przegladarke uzylam js:

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. #this
  3. {
  4. min-width: 600px;
  5. max-width: 1500px;
  6. width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1500? "1500px" : "auto");
  7. background-color: yellow;
  8. padding: 10px;
  9. }
  10. body {
  11. margin: 0px;
  12. font-size: 8pt;
  13. font-family: Verdana;
  14. }
  15. </style>
  16.  
  17.  
  18. <div id="this">
  19. dziala biggrin.gif
  20. </div>
[HTML] pobierz, plaintext
senor_d
5.01.2006, 19:08:42
W ten sposób jest identycznie jak na empik.com

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Apoteke</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. <link rel="StyleSheet" type="text/css" href="style.css" />
  8. </head>
  9. <body >
  10.  
  11.  
  12. <!--header-->
  13. <div id="header">
  14.  
  15. <div id="left">
  16. [main] &nbsp; | &nbsp; [recepty] &nbsp; | &nbsp; [sprzedaz] &nbsp; | &nbsp; [zamowienia] &nbsp; | &nbsp; [podsumowania]<br /><br />
  17.  
  18. <span class="black">szukaj:</span> &nbsp; &nbsp; &nbsp;[apteka]&nbsp; &nbsp; | &nbsp; [magazyn]
  19. </div>
  20.  
  21. <div id="right">
  22. Apteka Zdrowie, 19 grudnia, 2005<br /><br />
  23.  
  24. <span class="red">[zaloguj]</span>
  25. </div>
  26.  
  27. </div>
  28. <!--end header-->
  29.  
  30.  
  31. </body>
  32. </html>
[HTML] pobierz, plaintext



Kod
Body {
text-align: left;
font-size: 8pt;
font-family: Verdana;
margin: 0px;
margin-left: -8px;
background: url('1.jpg');
margin-top: 10px;
}

#header {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 2%;
padding-right: 2%;
background-color: white;
min-width:780px
}

#left {
width: 500px;
float: left;
color: rgb(214,51,51);
text-align:left
}

#right {
text-align: right;
width: 200px;
float: right;
}

.black {
color: black;
}

.red {
color: rgb(214,51,51);
}



Po dojechaniu do 780 pikseli szerokości okna (czyli mniej więcej tyle ile ma okno w rozdzielczosci pulpitu kompa w 800x600) pojawia się scroll na dole. Do tego momentu elementy strony nie rozsypują się. I po dalszym zniejszaniu rowniez sie nie rozsypuja tylko zatrzymuja na 780px. Natomiast w IE div'y po 780px zaczynaja wjeżdzać pod siebie (na empiku pod IE jest tak samo). Uzyte jest po prostu min-width:780px dla div'a header.

----edit----
Permanentnie łamiesz Regulamin stosując zły bbCode.
Zrób to jeszcze raz a dostaniesz ostrzeżenie!
Proszę poprawić tego posta.
~mike_mech
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.