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
fleshgrinder
post
Post #2





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
zegarek84
post
Post #3





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

Posty w temacie
- Szymciosek   Jak zaprogramować takie coś   3.10.2012, 17:40:28
- - Arcioch   [HTML] pobierz, plaintext <!DOCTYPE html>...   3.10.2012, 17:53:46
- - Szymciosek   No niby działa, ale nie do końca, bo nie zmienia s...   3.10.2012, 19:08:50
- - fleshgrinder   szerokość da się bez js, po prostu nie ustawiasz s...   3.10.2012, 19:09:02
|- - zegarek84   Cytat(Arcioch @ 3.10.2012, 18:53:46 )...   4.10.2012, 00:16:01
- - Szymciosek   Może być js, pod warunkiem, że będzie działało po ...   3.10.2012, 19:15:56
- - Arcioch   [HTML] pobierz, plaintext <!DOCTYPE html>...   3.10.2012, 19:29:56

« 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 · Przełącz na: Linearny+ · Drzewo

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

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