[CSS][HTML] Ramka wychodzi poza ekran. Opcje

[GoldeNx3]

Witam. Mam problem. Mam oto taki kod html:

[HTML] pobierz, plaintext 
echo "<div class=\"admin_side\">
 
      <br><center><table class=\"good\">
 
      <tr>
         <td colspan=\"2\" align=\"center\"><b>Data:</b> $data</td>
      </tr>
 
      <tr>
         <td colspan=\"2\" align=\"center\"><b>Usluga:</b> $zamowienie [$id2]</td>
      </tr>
      <tr>
         <td><b>Login gracza:</b> $login</td>
         <td align=\"right\"><b>e-mail:</b> $email</td>
      </tr>
      <tr>
         <td><b>Nick w grze:</b> $nick</td>
         <td align=\"right\"><b>Ma VIPa, slota itp?</b> $posiada</td>
      </tr>
      <tr>
         <td><b>Zapis:</b> $zapis</td>
         <td align=\"right\">$co $co2</td>
      </tr>
      <tr>
         <td><b>Okres:</b> $czas</td>
         <td align=\"right\"><b>Kod:</b> $kod</td>
      </tr>";
if($status == nieaktywny)
{
      echo"<tr>
         <td colspan=\"2\" align=\"center\"><b>Status:</b> <font color=\"red\">$status</font></td>
      </tr>";
}
else 
{
      echo"<tr>
         <td colspan=\"2\" align=\"center\"><b>Status:</b> <font color=\"green\">$status</font></td>
      </tr>";
}
      echo"</table></center>";
 
echo "
      </div>";
[HTML] pobierz, plaintext 

Kod CSS:

Kod

.admin_side {
      width: 950px;
      background: #2c2c2c;
      margin-top: 2px;
      margin-bottom: 5px;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -khtml-border-radius: 3px;
}
.admin_side table {
      font-family: tahoma;
      font-size: 12px;
      color: #636669;
      font-weight: normal;
      padding: 6px 15px 5px 13px;
      bordercolor: #FFFFFF;
}
.good {
      width: 450px;
      border:2px solid green;
      background: #161616;
      float:center;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -khtml-border-radius: 3px;
}

Teraz na Google Chrome efekt jest taki:



A na mozilli taki:



Jak to naprawić? Jakie pliki mam pokazać?

[Kujski]

Po pierwsze ten znacznik już praktycznie nie istnieje dla przeglądarek

[HTML] pobierz, plaintext 
<center></center>
[HTML] pobierz, plaintext 

Po drugie nie bardzo rozumiem to w good:

[HTML] pobierz, plaintext 
float:center;
[HTML] pobierz, plaintext 

[wNogachSpisz]

zamiast:

[HTML] pobierz, plaintext 
<center>
[HTML] pobierz, plaintext 

daj:

[CSS] pobierz, plaintext 
margin: 0 auto
[CSS] pobierz, plaintext 

[GoldeNx3]

zamiast:

[HTML] pobierz, plaintext 
<center>
[HTML] pobierz, plaintext 

daj:

[CSS] pobierz, plaintext 
margin: 0 auto
[CSS] pobierz, plaintext 

To bardzo mi pomogło. Rozwiązało kolejny problem który miałem. ; DD

@2xUp

Tak też właśnie myślałem. ; //

A jakie mam jeszcze inne błędy w tych kodach?

[Kujski]

Masę

[HTML] pobierz, plaintext 
<td colspan=\"2\" align=\"center\"><b>Status:</b> <font color=\"red\">$status</font></td>
[HTML] pobierz, plaintext 

font to kolejny znacznik, który powinien być zastąpiony stylami.
align również nie jest zalecanym znacznikiem.

Lepiej wyglądałoby to w ten sposób:

[HTML] pobierz, plaintext 
<td colspan=\"2\" class=\"center\">Status: <span class=\"red\">$status</span></td>
[HTML] pobierz, plaintext 

i w css

[HTML] pobierz, plaintext 
.center {
font-weight: bold; text-align: center;
}
 
.red {
color: red; font-weight: normal;
}
[HTML] pobierz, plaintext 

Wówczas zmieniając tylko plik ze stylami nadajesz taki sam wygląd każdemu elementowi opisanemu jako class - mniej pracy

Ten post edytował Kujski 13.04.2011, 23:31:33

[wNogachSpisz]

font to kolejny znacznik, który powinien być zastąpiony stylami.
align również nie jest zalecanym znacznikiem.

A ja będę mega czepialski dzisiejszego wieczoru..

Style inline są lepsze pod Operą..
jest to szczególnie widoczne przy długich listach elementów, np. tabelkach.

Jeśli style nadajesz przez class/id, to wydajność leci na pysk.
Gdy natomiast zostawisz inline, strona przewija się idealnie.
Wiem że tutaj bardziej powinienem ochrzanić developerów Opery zamist proponować nietypowe sposób kodowania HTML/CSS... no ale cóż... rzeczywistość weryfikuje ideologie.

Podsumowijąc:
Dla opery style obszernych list deklaruje inline, inaczej praktycznie nie działa scroll :-]

Ten post edytował wNogachSpisz 14.04.2011, 00:50:12