[CSS][HTML] Problem z Div-ami Opcje

[sebekzosw]

Ja raczej jestem lepszy w programowaniu w php niż w pisaniu kodu CSS, tak wiec napisałem taki kod CSS:

[HTML] pobierz, plaintext 
<style type="text/css">
<!--
.glowne {
    background: #C0C0C0;
    font-family: tahoma, helvetica, arial, sans-serif;
    width:100%;
}
 
.gora {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    border: 1px solid #FFFFFF;
}
 
.dol {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    border: 1px solid #FFFFFF;
}
 
.srodek_lewe {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 12px;
    text-align: left;
    width:30%;
    border: 1px solid #FFFFFF;
    float:left;
 
}
 
.srodek_prawe {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 12px;
    text-align: left;
    border: 1px solid #FFFFFF;
    font-weight: bold;
}
-->
</style>
[HTML] pobierz, plaintext 

i mam taki kod:

[HTML] pobierz, plaintext 
<div class="glowne">
               <div class="gora">Informacje Osobiste</div>
                    <div class="srodek_lewe">Imię rzeczywiste<br />as</div>
                    <div class="srodek_prawe">&nbsp;Sebastian</div>
 
                    <div class="srodek_lewe">Imię rzeczywiste2</div>
                    <div class="srodek_prawe">&nbsp;Sebastian2</div>
               <div class="dol"><a href="zmiana_danych.php"><b>Zmień</b></a></div>
</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 
<div class="glowne">
                 <div class="gora">Informacje Osobiste</div>
                      <div class="srodek_lewe">Imię rzeczywiste<br />Drugie imię</div>
                      <div class="srodek_prawe">&nbsp;Sebastian</div>
 
                      <div class="srodek_lewe">Imię rzeczywiste2</div>
                      <div class="srodek_prawe">&nbsp;Sebastian2</div>
                 <div class="dol"><a href="zmiana_danych.php"><b>Zmień</b></a></div>
  </div>
[HTML] pobierz, plaintext 

Jak zrobić, aby w danym div przechodziło do nowej linijki bez psucia tego wyglądu...

[kazag]

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.

Ten post edytował kazag 13.09.2008, 09:29:06

[sebekzosw]

a testowałeś to? bo niby to częściowo działa - zobacz sobie...

[kazag]

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]

To jeszcze podpowiem jak to poprawić, żeby było elegancko

[HTML] pobierz, plaintext 
<style type="text/css">
<!--
 
*{
font-family: tahoma, helvetica, arial, sans-serif;
}
 
 
 
.glowne {
background: #C0C0C0;
width:100%;
font-size: 12px;
font-weight: bold;
text-align: left;
}
 
.glowne *{
border: 1px solid #FFFFFF;
}
 
.gora {
font-size: 18px;
}
 
.dol {
text-align: right;
}
 
.srodek_lewe {
width:30%;
float:left;
font-weight: normal;
clear:both;
}
 
.srodek_prawe {
float:right;
}
-->
</style>
[HTML] pobierz, plaintext 

Trochę mniej kodu. Dziedziczenie jest po to, żeby je wykorzystywać