Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Jak umieścić DIV'a po prawej, lewej i na środku?
Heniut
post 29.11.2012, 16:45:41
Post #1





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 22.07.2011

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

Cześć.

Wykonałem taki "rysunek":

Tam gdzie jest logo div ma być po lewej, tam gdzie DIV po prawej, a tam gdzie dalsza część strony to na środku. Czy nie ma tu czegoś tak prostego jak align ?
Szukam i nie mogę nic znaleźć ..
Go to the top of the page
+Quote Post
b4rt3kk
post 29.11.2012, 17:20:48
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Jest coś takiego jak float w css. Względnie możesz użyć position: absolute.

[HTML] pobierz, plaintext 
  1. <head>
  2. <style type="text/css">
  3. .left {
  4. float: left;
  5. width: 200px;
  6. height: 200px;
  7. background: red;
  8. }
  9.  
  10. .right {
  11. float: right;
  12. width: 200px;
  13. height: 200px;
  14. background: yellow;
  15. }
  16.  
  17. .content {
  18. background: silver;
  19. width: 100%;
  20. height: 500px;
  21. }
  22.  
  23. .clear {
  24. clear: both;
  25. }
  26. </style>
  27. </head>
  28.  
  29. <body>
  30. <div class="left"></div>
  31. <div class="right"></div>
  32. <div class="clear"></div>
  33. <div class="content">Zawartosc strony</div>
  34. </body>
[HTML] pobierz, plaintext


Ten post edytował b4rt3kk 29.11.2012, 17:21:21


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
Heniut
post 29.11.2012, 17:36:03
Post #3





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 22.07.2011

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

Wielkie dzięki!
Go to the top of the page
+Quote Post
Pawel_W
post 29.11.2012, 17:44:33
Post #4





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

po co ten .clear to ja nie wiem, można było dać .content clear: both, width: 100% jest zbędne
Go to the top of the page
+Quote Post
b4rt3kk
post 29.11.2012, 18:28:59
Post #5





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Cytat(Pawel_W @ 29.11.2012, 17:44:33 ) *
po co ten .clear to ja nie wiem, można było dać .content clear: both, width: 100% jest zbędne


A po co w ogóle nadawałem wymiary boxom? Żeby było widać jak to działa.


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
tomi1985
post 29.11.2012, 18:30:19
Post #6





Grupa: Zarejestrowani
Postów: 192
Pomógł: 12
Dołączył: 23.09.2010
Skąd: Warszawa

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

mozna to jeszcze prosciej zrobic smile.gif

[HTML] pobierz, plaintext 
  1. // css
  2.  
  3. #rama {
  4. text-align:center;
  5. width:600%;
  6. }
  7.  
  8. #nav {
  9. width:100%;
  10. margin:auto;
  11. }
  12.  
  13. #logo {
  14. float:left;
  15. width:149px;
  16. }
  17.  
  18. #cos {
  19. text-align:right;
  20. width:450px;
  21. }
  22.  
  23. #text {
  24. margin-top:20px;
  25. width:100%;
  26. }
  27.  
  28. <div id="rama">
  29.  
  30. <div id="nav">
  31.  
  32. <div id="logo">
  33. </div>
  34.  
  35. <div id="cos">
  36. </div>
  37.  
  38. <div id="text">
  39. </div>
  40.  
  41. </div>
  42.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Pawel_W
post 29.11.2012, 23:33:41
Post #7





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

Cytat(b4rt3kk @ 29.11.2012, 18:28:59 ) *
A po co w ogóle nadawałem wymiary boxom? Żeby było widać jak to działa.

jakbyś nie dał tego width: 100% to efekt byłby taki sam...
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 25.04.2025 - 05:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn