Forum PHP.pl > [CSS][HTML] Ramka wychodzi poza ekran.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML] Ramka wychodzi poza ekran.

GoldeNx3

13.04.2011, 22:49:10

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

13.04.2011, 22:54:34

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

13.04.2011, 23:09:36

zamiast:

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

daj:

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

GoldeNx3

13.04.2011, 23:20:21

Cytat(wNogachSpisz @ 14.04.2011, 00:09:36 )

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

13.04.2011, 23:30:46

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

wNogachSpisz

14.04.2011, 00:48:35

Cytat(Kujski @ 14.04.2011, 00:30:46 )

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 :-]

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.