Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Przeniesienie diva pod inne divy
Forum PHP.pl > Forum > Przedszkole
kurczak610
26.07.2011, 08:11:24
Witam, mam coś takiego
[HTML] pobierz, plaintext 
  1. <div id="menuleft">Tekst po lewej stronie</div>
  2. <div id="center">Tekst po środku</div>
  3. <div id="menuright">Tekst po prawej stronie</div>
  4. <div id="footer">Stopka</div>
[HTML] pobierz, plaintext


Chciałbym aby stopka była pod tymi 3 divami, a gdy mam tak ona jest w ich miejscu ale tak jakby miała ustawiony z-index mniejszy niż tamte.
CSS:
[HTML] pobierz, plaintext 
  1. #menuleft {
  2.  background: #000000;
  3.  width: 150px;
  4.  text-align: center;
  5.  position: absolute;
  6. }
  7. #menuright {
  8.  background: #000000;
  9.  width: 150px;
  10.  text-align: center;
  11.  position: absolute;
  12.  margin-left:850px;
  13. }
  14. #center {
  15.  background: #000000;
  16.  width: 680px;
  17.  text-align: center;
  18.  position: absolute;
  19.  margin-left: 160px;
  20.  
  21. }
  22.  
  23. #footer {
  24.  position: absolute;
  25.  width:980px;
  26.  background: #000000;
  27.  text-align:center;
  28. }
[HTML] pobierz, plaintext


Pozdrawiam i z góry dzięki
jacobson
26.07.2011, 08:35:08
ja to sadze ze wystarczy dodac float...
menu left jako ze jest pierwsze od lewej daj
clear:left;
float:left;

content daj samo float:left;

tam cos masz z prawej to tez float:left;
a zeby footer zszedl pod nie to daj mu
clear:left;
float:left;

no i oczywiscie z tych co napisales usun position: absolute; i te marginesy z kosmosu.
kurczak610
26.07.2011, 08:41:58
Nie pomogło ;/
kudlatypawelek
26.07.2011, 08:48:11 
[HTML] pobierz, plaintext 
  1. #menuleft {
  2.  background: #000000;
  3.  width: 150px;
  4.  text-align: center;
  5.  float: left;
  6. }
  7.  
  8. #center {
  9.  background: #000000;
  10.  width: 680px;
  11.  text-align: center;
  12.  float: left;
  13.  
  14. }
  15. #menuright {
  16.  background: #000000;
  17.  width: 150px;
  18.  text-align: center;
  19.  float: left;
  20. }
  21.  
  22. #footer {
  23.  width:980px;
  24.  background: #000000;
  25.  text-align:center;
  26. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div id="menuleft">Tekst po lewej stronie</div>
  2. <div id="center">Tekst po środku</div>
  3. <div id="menuright">Tekst po prawej stronie</div>
  4. <div style="clear: both"></div>
  5. <div id="footer">Stopka</div>
[HTML] pobierz, plaintext
jacobson
26.07.2011, 08:49:50
albo bez dodatkowego diva

[PHP] pobierz, plaintext 
  1. #menuleft {
  2.  background: #000000;
  3.  width: 150px;
  4.  text-align: center;
  5.  float: left;
  6. }
  7.  
  8. #center {
  9.  background: #000000;
  10.  width: 680px;
  11.  text-align: center;
  12.  float: left;
  13.  
  14. }
  15. #menuright {
  16.  background: #000000;
  17.  width: 150px;
  18.  text-align: center;
  19.  float: left;
  20. }
  21.  
  22. #footer {
  23.  width:980px;
  24.  background: #000000;
  25.  text-align:center;
  26.  clear:left;
  27. }
[PHP] pobierz, plaintext
kurczak610
26.07.2011, 08:54:43
Dzięki smile.gif
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.