Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Jak zaprogramować takie coś
Szymciosek
post
Post #1





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

Witam,
chcę zaprogramować (to dobre słowo ?) w CSS box, który zawsze będzie miał zawsze:
width: 100% - 20px; (z lewej i prawej po 10px)
height: 100% - 160px; (z góry 10px odstępu od brzegu strony, 150px od dołu strony)

(IMG:https://dl.dropbox.com/u/21239599/Untitled-2.jpg)

Szary obiekt

Ten post edytował Szymciosek 3.10.2012, 17:41:55
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
Arcioch
post
Post #2





Grupa: Zarejestrowani
Postów: 324
Pomógł: 110
Dołączył: 18.09.2012

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

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  6. <style>
  7. 	body,html{
  8. 		width: 100%:
  9. 		height: 100%;
  10. 		padding: 0;
  11. 		margin: 0;
  12. 	}
  13. 	body{
  14. 		background: blue;
  15. 	}
  16.  
  17. 	div#content{
  18. 		background: grey;
  19. 		float: left;
  20. 		margin: 10px 0px 0px 10px;
  21. 	}
  22. </style>
  23. <script>
  24. $(function(){
  25. 	var width = $(window).width() - 20;
  26. 	var height =  $(window).height() - 160;
  27.  
  28. 	$('div#content').css({
  29. 		'width': width,
  30. 		'height': height
  31. 	});
  32. });
  33. </script>
  34. </head>
  35. <body>
  36. 	<div id="content">
  37. 	</div>
  38. </body>
  39. </html>
[HTML] pobierz, plaintext


Jak dla mnie bez js się nie obejdzie (IMG:style_emoticons/default/wink.gif) Pobieram szerokość i wysokość okna przeglądarki i odejmuje odpowiednią ilość pixeli (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
Szymciosek
post
Post #3





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

No niby działa, ale nie do końca, bo nie zmienia się width tego boxu, gdy zmieniam rozmiar okna przeglądarki. Ogólnie to powinno pracować w trybie każdej rozdzielczości biorąc też pod uwagę to, że potencjalny Kowalski będzie sobie zmieniał rozmiar okna właśnie...
Go to the top of the page
+Quote Post
fleshgrinder
post
Post #4





Grupa: Zarejestrowani
Postów: 77
Pomógł: 10
Dołączył: 4.11.2007

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

szerokość da się bez js, po prostu nie ustawiasz szerokości elementu tylko same marginesy, domyślnie rozciągnie się on na (szerokość rodzica - wartość marginesów)

z wysokością niestety tak jak napisał Arcioch, bez js ciężko. mój strzał: http://jsfiddle.net/8XMVK/

jeśli to mógłby być padding zamiast marginesów, rozważ użycie border-box: http://paulirish.com/2012/box-sizing-border-box-ftw/
Go to the top of the page
+Quote Post
Szymciosek
post
Post #5





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

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

Może być js, pod warunkiem, że będzie działało po zmianie rozmiaru okna przeglądarki jak napisałem wyżej.
Go to the top of the page
+Quote Post
Arcioch
post
Post #6





Grupa: Zarejestrowani
Postów: 324
Pomógł: 110
Dołączył: 18.09.2012

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

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  6. <style>
  7. 	body,html{
  8. 		width: 100%:
  9. 		height: 100%;
  10. 		padding: 0;
  11. 		margin: 0;
  12. 	}
  13. 	body{
  14. 		background: blue;
  15. 	}
  16.  
  17. 	div#content{
  18. 		background: grey;
  19. 		float: left;
  20. 		margin: 10px 0px 0px 10px;
  21. 	}
  22. </style>
  23. <script>
  24. $(function(){
  25.  
  26. 	function sprawdzRozmiarOkna() {
  27. 		var width = $(window).width() - 20;
  28. 		var height =  $(window).height() - 160;
  29.  
  30. 		$('div#content').css({
  31. 			'width': width,
  32. 			'height': height
  33. 		});
  34. 	}
  35.  
  36. 	sprawdzRozmiarOkna();
  37. 	$(window).resize(sprawdzRozmiarOkna);
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. 	<div id="content">
  43. 	</div>
  44. </body>
  45. </html>
[HTML] pobierz, plaintext


Sprawdza rozmair okna i dostosowywuje (IMG:style_emoticons/default/wink.gif) w tym dziale pisałem już coś takiego wystarczyło poszukać i dostosować (IMG:style_emoticons/default/wink.gif)

Ten post edytował Arcioch 3.10.2012, 19:31:21
Go to the top of the page
+Quote Post
zegarek84
post
Post #7





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

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

Cytat(Arcioch @ 3.10.2012, 18:53:46 ) *
Jak dla mnie bez js się nie obejdzie (IMG:style_emoticons/default/wink.gif) Pobieram szerokość i wysokość okna przeglądarki i odejmuje odpowiednią ilość pixeli (IMG:style_emoticons/default/wink.gif)

Cytat(fleshgrinder @ 3.10.2012, 20:09:02 ) *
z wysokością niestety tak jak napisał Arcioch, bez js ciężko. ...

taaaaa... jasne...
jest na to kilka sposobów, ale jeśli to ma być box to podam najprostszy z pozycjonowaniem absolutnym...
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. <style>
  6. 	body,html{
  7. 		width: 100%;
  8. 		height: 100%;
  9. 		padding: 0;
  10. 		margin: 0;
  11. 		position: relative;
  12. 	}
  13. 	body{
  14. 		background: blue;
  15. 	}
  16.  
  17. 	div#content{
  18. 		background: grey;
  19. 		padding: 0;
  20. 		margin: 0;
  21. 		position: absolute;
  22. 		top: 10px;
  23. 		bottom: 150px;
  24. 		left: 10px;
  25. 		right: 10px;
  26. 	}
  27. </style>
  28. </head>
  29. <body>
  30. 	<div id="content">
  31. 	</div>
  32. </body>
  33. </html>
[HTML] pobierz, plaintext


Ten post edytował zegarek84 4.10.2012, 00:16:24
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

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