Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Problem z Div-ami
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
sebekzosw
13.09.2008, 08:02:21
Ja raczej jestem lepszy w programowaniu w php niż w pisaniu kodu CSS, tak wiec napisałem taki kod CSS:

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. <!--
  3. .glowne {
  4.     background: #C0C0C0;
  5.     font-family: tahoma, helvetica, arial, sans-serif;
  6.     width:100%;
  7. }
  8.  
  9. .gora {
  10.     font-family: tahoma, helvetica, arial, sans-serif;
  11.     font-size: 18px;
  12.     font-weight: bold;
  13.     text-align: left;
  14.     border: 1px solid #FFFFFF;
  15. }
  16.  
  17. .dol {
  18.     font-family: tahoma, helvetica, arial, sans-serif;
  19.     font-size: 12px;
  20.     font-weight: bold;
  21.     text-align: right;
  22.     border: 1px solid #FFFFFF;
  23. }
  24.  
  25. .srodek_lewe {
  26.     font-family: tahoma, helvetica, arial, sans-serif;
  27.     font-size: 12px;
  28.     text-align: left;
  29.     width:30%;
  30.     border: 1px solid #FFFFFF;
  31.     float:left;
  32.  
  33. }
  34.  
  35. .srodek_prawe {
  36.     font-family: tahoma, helvetica, arial, sans-serif;
  37.     font-size: 12px;
  38.     text-align: left;
  39.     border: 1px solid #FFFFFF;
  40.     font-weight: bold;
  41. }
  42. -->
  43. </style>
[HTML] pobierz, plaintext


i mam taki kod:

[HTML] pobierz, plaintext 
  1. <div class="glowne">
  2.                <div class="gora">Informacje Osobiste</div>
  3.                     <div class="srodek_lewe">Imię rzeczywiste<br />as</div>
  4.                     <div class="srodek_prawe">&nbsp;Sebastian</div>
  5.  
  6.                     <div class="srodek_lewe">Imię rzeczywiste2</div>
  7.                     <div class="srodek_prawe">&nbsp;Sebastian2</div>
  8.                <div class="dol"><a href="zmiana_danych.php"><b>Zmień</b></a></div>
  9. </div>
[HTML] pobierz, plaintext


Wszystko pięknie działa do czasu gdy do na przykład "Imię rzeczywiste" zamienię na "Imię rzeczywiste<br />Drugie imię"

[HTML] pobierz, plaintext 
  1. <div class="glowne">
  2.                  <div class="gora">Informacje Osobiste</div>
  3.                       <div class="srodek_lewe">Imię rzeczywiste<br />Drugie imię</div>
  4.                       <div class="srodek_prawe">&nbsp;Sebastian</div>
  5.  
  6.                       <div class="srodek_lewe">Imię rzeczywiste2</div>
  7.                       <div class="srodek_prawe">&nbsp;Sebastian2</div>
  8.                  <div class="dol"><a href="zmiana_danych.php"><b>Zmień</b></a></div>
  9.   </div>
[HTML] pobierz, plaintext


Jak zrobić, aby w danym div przechodziło do nowej linijki bez psucia tego wyglądu...
kazag
13.09.2008, 09:27:48
srodek_lewe i dol powinny mieć :
Kod
clear:both;

i srodek_prawe:
Kod
float:right;


Bo chyba o to chodziło? Jeśli nie o to, to nie rozumiem posta.
sebekzosw
13.09.2008, 09:39:58
a testowałeś to? bo niby to częściowo działa - zobacz sobie...
kazag
13.09.2008, 10:52:22
Testowałem i u mnie działa. Oczywiście wygląda to tragicznie, bo dla srodek-prawy nie jest ustalony width (dlatego ta ramka jest tylko dookoła imienia) oraz ten biały border też nie jest najtrafniejszy chyba.

Częściowo tzn?
JoShiMa
15.09.2008, 09:59:56
To jeszcze podpowiem jak to poprawić, żeby było elegancko smile.gif

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. <!--
  3.  
  4. *{
  5. font-family: tahoma, helvetica, arial, sans-serif;
  6. }
  7.  
  8.  
  9.  
  10. .glowne {
  11. background: #C0C0C0;
  12. width:100%;
  13. font-size: 12px;
  14. font-weight: bold;
  15. text-align: left;
  16. }
  17.  
  18. .glowne *{
  19. border: 1px solid #FFFFFF;
  20. }
  21.  
  22. .gora {
  23. font-size: 18px;
  24. }
  25.  
  26. .dol {
  27. text-align: right;
  28. }
  29.  
  30. .srodek_lewe {
  31. width:30%;
  32. float:left;
  33. font-weight: normal;
  34. clear:both;
  35. }
  36.  
  37. .srodek_prawe {
  38. float:right;
  39. }
  40. -->
  41. </style>
[HTML] pobierz, plaintext


Trochę mniej kodu. Dziedziczenie jest po to, żeby je wykorzystywać tongue.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.