Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Rozplanowanie szerokości bloków.
djmentos
post 28.11.2009, 07:41:45
Post #1





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 29.01.2009

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

Witam.

Mam następujący problem.
2 bloki div:
Kod
#lewy {
    float: left;
    border: 1px solid blue;
    margin: 20px 20px 20px 0px;
    width: 200px;
}

#prawy {
    float: left;
    border: 1px solid green;
    margin: 20px 0px 20px 0px;
}

Nie wiem jak określić szerokość dla bloku #prawy, tak aby zajmował on całą dostępną przestrzeń.
Takie jakby 100% - 200px ;D
Go to the top of the page
+Quote Post
Lion_87
post 28.11.2009, 09:31:45
Post #2





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----

hmmm w sumie to mógłbyś zrobić jednego diva na 100% szerokości a w nim dać #lewy z 200px i #prawy z 200px margin-left......

EDIT: ajj głupio napisałem

procentowo nie możesz?

Ten post edytował Lion_87 28.11.2009, 13:03:11
Go to the top of the page
+Quote Post
djmentos
post 28.11.2009, 12:54:33
Post #3





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 29.01.2009

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

Nie bardzo chce działać.
Go to the top of the page
+Quote Post
Lion_87
post 28.11.2009, 13:26:35
Post #4





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----

aaa JS i screen.availWidth?

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. var size_width_to=screen.availWidth-200;
  3.  
  4. function size_to()
  5. {
  6. document.getElementById("size_div").style.width=size_width_to;
  7. }
  8. </script> 
  9.  
  10. <body onload="size_to()" />
  11. <span id="size_div" style="margin:0px;padding:0px;height:120px;width:100%;display:block;background:red;">asd</span>     
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
t4keda
post 29.11.2009, 09:53:16
Post #5





Grupa: Zarejestrowani
Postów: 57
Pomógł: 10
Dołączył: 14.10.2009

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

Sprawdź to:
[CSS] pobierz, plaintext 
  1. #lewy {
  2.     float: left;
  3.     width: 200px;
  4. }
  5.  
  6. #prawy {
  7.     float: right;
  8.     max-width: 100%;
  9. }
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
djmentos
post 3.12.2009, 16:56:25
Post #6





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 29.01.2009

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

Cześć.

Niestety to nie pomaga też. Postanowiłem, że zrezygnuje z lewego bloku, jednak sam fakt problemu nadal mnie zastanawia ;D
Go to the top of the page
+Quote Post
ucho
post 3.12.2009, 17:32:44
Post #7





Grupa: Zarejestrowani
Postów: 300
Pomógł: 32
Dołączył: 31.07.2006

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

Ten drugi float jest zbędny:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. 	<title>test</title>
  5. 	<style type="text/css">
  6. 	#lewyc {
  7. 		float: left;
  8. 		padding: 0px;
  9. 		margin: 0px;
  10. 		width: 200px;
  11. 	}
  12.  
  13. 	#lewy {
  14. 		border: 1px solid blue;
  15. 		padding: 20px;
  16. 		margin: 0px;
  17. 	}
  18.  
  19. 	#prawyc {   
  20. 		padding: 0px;
  21. 		margin: 0px;
  22. 		margin-left: 200px ;
  23. 	}
  24.  
  25. 	#prawy {
  26. 		border: 1px solid green;
  27. 		padding: 20px;
  28. 		margin: 0px;
  29. 	}
  30. 	</style>
  31. </head>
  32. <body>
  33. 	<div id="lewyc">
  34. 		<div id="lewy">
  35. 			linia <br />
  36. 		</div>
  37. 	</div>
  38. 	<div id="prawyc">
  39. 		<div id="prawy">
  40. 			bardzo<br />
  41. 			duzo<br />
  42. 			lini<br />
  43. 		</div>
  44. 	</div>
  45. 	<div style="clear:both"></div>
  46. </body>
  47. </html>
[HTML] pobierz, plaintext

Pamiętaj, że box model ustalony w standardach W3 jest bardzo nie wygodny jeśli chcesz ustawić margin lub border i jednocześnie width/height a któraś z wartości jest wyrażona w % a nie pikselach. Wprowadzono opcję zmiany box-modelu dopiero w CSS3, pewnie minie 10 lat nim będziemy mogli tego używać tongue.gif

Ten post edytował ucho 3.12.2009, 17:36:13
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 15.07.2025 - 21:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn