• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Darstellung im Firefox "falsch" (?)

M

Multicoder

Neues Mitglied
Hey Leute,

ich mache zur Zeit einen Fernlehrgang zum geprüften Webmaster.
Aktuell soll ich (zu Übungszwecken. Also keine Prüfungsaufgabe.) eine Homepage zu einem virtuellen Tierheim erstellen.
Das ganze soll mit Tabellen (!?) gemacht werden. Ja, ich weiß, dass Tabellen kein Designmittel sind (ich bin auch eher ein Fan von Containern), aber so steht es nun mal geschrieben.

Nun habe ich folgenden Code geschrieben:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>Das virtuelle Tierheim</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  
  <style type="text/css">
    *
    {
      padding: 0px;
      margin: 0px;
      border-width: 0px;
    }
    
    table.main
    {
      height: 600px;
    }
        
    td.header
    {
       width: 504px;
       height: 150px;
       background-image: url(images/header.gif);
       background-repeat: no-repeat;
    }
    
    td.headCenter
    {
       width: 296px;
       height: 16px;
       background-image: url(images/headCenter.gif);
       background-repeat: no-repeat;
    }
    
    td.tierbild
    {
       width: 275px;
       border: 1px solid #000000;
       background-color: #FFFFFF;
    }
    
    td.right
    {
       width: 17px;
       background-image: url(images/right.gif);
       background-repeat: no-repeat;
    }
    
    td.left
    {
       width: 34px;
       background-image: url(images/left.gif);
       background-repeat: no-repeat;
    }
    
    td.navi
    {
       width: 132px;
       height: 396px;
       background-image: url(images/center_rep.gif);
       background-repeat: repeat-x;
    }
    
    td.center
    {
       width: 33px;
       height: 446px;
       background-image: url(images/center_rep.gif);
       background-repeat: no-repeat;
    }
    
    td.content
    {
       width: 270px;
       height: 346px; 
       border: 1px solid #000000;
       background-color: #FFFFFF;
    }
    
    td.bildunterschrift
    {
       width: 277px;
       height: 146px;
       border: 1px solid #000000;
       background-color: #FFFFFF;
    }
    
    td.spacer
    {
       width: 279px;
       height: 40px;
       background-image: url(images/spacer_pic.gif);
       background-repeat: repeat-y;
    }
    
    td.bottom
    {
       width: 270px;
       height: 54px;
       background-image: url(images/bottom.gif);
       background-repeat: repeat-x;
    }
  </style>
</head>
<body>
  <table cellpadding="0" cellspacing="0" class="main">
    <tr align="left" valign="top">
      <td rowspan="2" colspan="5" class="header"></td>
      <td colspan="2" class="headCenter"></td>
    </tr>
    <tr align="left" valign="top">
      <td rowspan="2" class="tierbild"><img src="http://www.html.de/images/katze_1.gif" alt=""></td>
      <td rowspan="5" class="right"></td>
    </tr>
    <tr align="left" valign="top">
      <td rowspan="4" class="left"></td>
      <td rowspan="3" class="navi"></td>
      <td rowspan="4" class="center"></td>
      <td rowspan="3" class="content"></td>
      <td rowspan="4" class="center"></td>
    </tr>
    <tr>
      <td class="spacer"></td>
    </tr>
    <tr align="left" valign="top">
      <td class="bildunterschrift"></td>
    </tr>
    <tr>
      <td colspan="5" class="bottom"></td>
    </tr>
  </table>
</body>
</html>
Mein Problem ist nun, dass die Seite zwar im Internet-Explorer korrekt angezeigt wird, aber beim Firefox nicht (siehe Screenshots).
Weiß jemand, wo da der Fehler liegt?
Ich bin mit meinem Latein am Ende :sad:

Vielen Dank schonmal im Voraus :)

Viele Grüße
Daniel
 

Anhänge

  • firefox.jpg
    firefox.jpg
    68,7 KB · Aufrufe: 20
  • internetexplorer.jpg
    internetexplorer.jpg
    60,2 KB · Aufrufe: 18
Werbung:
Du solltest sofort den Lehrgang kündigen und dir ggf. dein Geld zurückgeben lassen.
Sorry, aber durch so viele Tabellen und Zellen wühle ich mich nicht durch.
Die angehängten Grafiken sind ferner zur Ursachenforschung nicht hilfreich. Besser wäre ein Link wo man alles im Zusammenhang mit den Grafiken sieht.
 
"Richtige" Designs kommen später schon, aber momentan bin ich noch bei den Grundlagen und da verwenden die eben Tabellen zum designen ;)
Ich finds auch en bisschen blöd, zumal ich mit Tabellendesigns schon vor Jahren aufgehört hab, aber da muss ich jetzt durch :mrgreen:
Ich mach den Lehrgang schon mehrere Monate und hab einige gute Noten eingeheimst (kein Wunder bei dem Niveau :mrgreen:), deshalb möcht ich den auch nicht so gern kündigen ;)

Ich hab die Dateien mal bei mir hochgeladen.
Das virtuelle Tierheim
 
Werbung:
Ich sehe das ähnlich wie prm, du solltest wenigstens mal nachfragen wo der Sinn in der aktuellen Aufgabe liegt. Es ist lernmethodisch vollkommener Unsinn, erst etwas grundlegend falsches (Tabellenlayouts gehen am Sinn von HTML meilenweit vorbei) zu lehren und später zum "richtigen" über zu gehen.
Tabellenlayouts haben zusätzlich zur Zweckentfremdung von Tabellen noch ein großes Manko: Unübersichtlichkeit. Wie du selbst an deinem Code siehst und wie es prm schon gesagt hat: Das schaut sich keiner gerne an. Auch die von dir erwähnte Methode mit "Containern" (ich nehme an du meinst das <div> Element) muss nicht zwangsweise "gut" sein. Eine div-Suppe ist normalerweise nicht sehr viel hilfreicher als ein Tabellenkonstrukt.

Hast du denn die Möglichkeit da mal nachzufragen? Ich wäre auf die Antwort gespannt, warum die euch / dir Tabellenlayouts beibringen.
 
Ja, ist ja schön, dass das ein Unding ist. Das weiß ich aber auch selbst ;)
Nur bringt mich das bei meinem Problem nicht weiter... :?
 
Tar schrieb:
.....du solltest wenigstens mal nachfragen wo der Sinn in der aktuellen Aufgabe liegt. Es ist lernmethodisch vollkommener Unsinn, erst etwas grundlegend falsches (Tabellenlayouts gehen am Sinn von HTML meilenweit vorbei) zu lehren und später zum "richtigen" über zu gehen.....
Zum Vergrößern anklicken....
nun übernimmt man nicht immer seiten, die nach neuesten standards generiert wurden, sondern auch seiten, die schon jahre im netz sind. dafür MUSS man ahnung von haben, wie das mal gemacht wurde.

wie seiht es denn aus, wenn du die header class ohne höhenangaben machst:

Code: 
td.header
    {
       width: 504px;       
       background-image: url(images/header.gif);
       background-repeat: no-repeat;
    }
ps.
und erschlagt mich oder macht was ihr wollt, aber 3/4 der rein css-generierten seiten, die hier bisher verlinkt wurden, sehen genau in einer einzigen festen auflösung gut und ansonsten schlecht aus. text bricht aus, navigationen verschieben sich, content-bereiche können nicht gelesen werden, grafiken brechen aus dem definierten bereich aus und und und.

und ja, ich komme mit einer ungewöhnlichen auflösung 1600 x 1200

pps
natürlich gibt's auch die festen grössen, die kann ich mir dann in einem viewpoint ansehen, der mir ein "kellerfenster" aufmacht und kein "schaufenster"
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
schuld ist dein katzenbild.
wenn du ein bild in einer zelle darstellst, dann wird die höhe der zeile, in der die zelle liegt automatisch an die höhe der zelle angepasst.

du musst 2 dinge tun:
1.
Code: 
    td.tierbild
    {
       width: 275px;
       border: 1px solid #000000;
       background-color: #FFFFFF;
       background-image: url(katze_1.gif);
       background-repeat: repeat-y;
    }
damit verhinderst du, dass die tabelle sich selbst platz schafft und bei nur einem px grösserem bild als die zelle ist dynamisch umzubrechen.

2.
den "spacer" soweit erhöhen, dass der rahmen um dein bild verkleinert wird:

Code: 
    td.spacer
    {
       width: 279px;
       height: 52px;
       background-image: url(images/spacer_pic.gif);
       background-repeat: repeat-y;
    }
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben