Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Odpowiednie ustawienie elementów
Forum PHP.pl > Forum > Przedszkole
lukasamd
Witam,
mam problem z odpowiednim ustawieniem elementów, obrazek poniżej prezentuje jak to ma w teorii wyglądać:



Kod wygląda natomiast tak:

  1. <div id="stopka">
  2. <div id="copyright">
  3. <span class="float_left">
  4. Napis po lewej stronie
  5. </span>
  6. <span class="float_right">
  7. Napis po prawej stronie
  8. </span>
  9. <div style="text-align:center;width:300px;margin:auto;">
  10. Napis na środku<br />ciąg dalszy
  11. </div>
  12. </div>
  13. </div>


CSS następująco:

  1. #stopka {
  2. margin: auto;
  3. width: 990px;
  4. height: 140px;
  5. background-image: url('/obrazek.jpg');
  6. background-repeat: no-repeat;
  7. }
  8.  
  9. #copyright {
  10. font-size: 9px;
  11. padding-top: 92px;
  12. padding-left: 25px;
  13. padding-right: 25px;
  14. }
  15.  
  16. .float_left {
  17. float: left;
  18. }
  19.  
  20. .float_right {
  21. float: right;
  22. }


No i "nie idzie" -
a) albo mam schodki (lewy wyżej, środek niżej, prawa jeszcze niżej)
B) albo środek i prawa są ok a lewy jest niżej niż powinien być
c) albo lewy i prawy jest ok a środek niżej

wszystko zależnie od umiejscowienia poszczególnych elementów w kodzie.
Jak to zrobić, aby wyglądało jak powinno?
petrrr
A ja do budowania struktury strony polecałbym Ci jakiś framework CSS.
Ja korzystam z 960 GRID SYSTEM i jestem super zadowolony smile.gif
danny6
kod html zamień na ten:
  1. <div id="stopka">
  2. <div id="copyright">
  3.  
  4. <span class="float_left">
  5. Napis po lewej stronie
  6. </span>
  7.  
  8. <div class="float_center">
  9. Napis na środku<br />ciąg dalszy
  10. </div>
  11.  
  12. <span class="float_right">
  13. Napis po prawej stronie
  14. </span>
  15.  
  16. </div>
  17. </div>


a css na ten:
  1. .float_left {
  2. float: left;
  3. }
  4.  
  5. .float_right {
  6. float: left;
  7. }
  8.  
  9. .float_center {
  10. float: left;
  11. }


i do poszczególnych kolumn pododawaj sobie odpowiednie szerokości i wysokości tak żeby Ci odpowiadało
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.