nicht angemeldet
Moin!
Ich habe folgendes Problem: Ich habe mir eine Homepage zusammengebastelt, wo oben ein Bild in den oberen Header soll und die rechte Seite nur 20 Pixel groß sein soll.
Füge ich jedoch das Bild ein, vergrößert sich die rechte Seite.(siehe die Links unten)
Ich weiss zwar nicht, was das eine mit dem anderen zu tun hat, aber der macht da nunmal falsch.
Ich hoffe ihr könnt mir helfen.
Dein Problem hängt vermutlich mit der Problematik zusammen: Wie breit macht der Browser eine Tabellenspalte?
Deine Problemtabelle:
+---------------------+
| |
+----+------------+---+
| | | |
+----+------------+---+
| |
+---------------------+
Wie breit sollen die drei Spalten in der Mitte sein? Traditionell wird ihre Breite im <td> mit angegeben: width="Breite". Die Browser sind aber nun sehr störrisch: Es werden nur die Breitenangaben der ersten Tabellenzeile genommen. Spätere Angaben sind irrelevant.
Und du hast in der ersten Zeile eine colspan="3"-Zelle, d.h. du kannst den einzelnen Spalten keine Breite zuweisen, sondern nur den Spalten insgesamt. Und das ist natürlich schlecht.
Lösung: Irgendwie die erste Zeile in drei Zellen teilen. Wahlweise kannst du auch noch eine Zeile über die jetzt erste Zeile packen, um dort die Breiten zu definieren (ob in HTML oder mit CSS dürfte egal sein für das Verhalten der Browser).
Der Vollständigkeit halber: Höhenangaben <td height="Höhe"> gibts zwar eigentlich nicht in HTML, aber auch dort wird nur die Angabe der ersten Zelle in der Zeile genutzt, keine späteren Angaben.
CSS-File zu beiden Dateien:
Da gibts noch einiges zu meckern!
h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {font-family:Arial,sans-serif}
Aus Kompatibilitätsgründen zu Netscape 4 ist es sehr sinnvoll, auch die letzte CSS-Angabe mit Semikolon abzuschließen. Gilt für dein gesamtes CSS.
body {background-color:#5555AA;color:#000000;scrollbar-face-color:#BBCCFF;
scrollbar-highlight-color:#7788EE;
scrollbar-shadow-color:#7788EE;
scrollbar-3dlight-color:#7788EE;
scrollbar-arrow-color:#5555AA;
scrollbar-track-color:#DDEEFF;
scrollbar-darkshadow-color:#7788EE}
Scrollbar-Farben sind out. Sogar im IE 6 gibts die nicht mehr, wenn man Seiten im Standard-Modus schreibt. Warum damit noch nerven?
a {color:#5555AA;text-decoration:none;font:bold}
a:hover {color:#334488;text-decoration:none;font:bold}
Nimm doch bitte font-weight:bold;
table.main {width:90%;border:0;background-color:#5555AA}
th.head {background-color:#99AAFF;height:80}
height:80 was? Pixel, Zentimeter, Punkt? Einheit fehlt!
td.middle {width:*;vertical-align:top;background-color:#BBCCFF}
width:*; Was ist das? Sternchen ist keine gültige Breitenangabe.
td.left {width:15%;background-color:#99AAFF;vertical-align:top}
td.right {background-color:#99AAFF;width:20}
width:20; Einheit fehlt!
td.bottom {background-color:#99AAFF;height:20;font-size:8}
height:20; font-size:8; Einheiten fehlen! Und bitte bei der font-size kein "px" dahinter, das kann sonst niemand lesen! 8 Pixel sind definitiv zu klein. Und bei einem so winzigen Copyrighthinweis würde ich dann glatt behaupten, der ist garnicht geschrieben.
table.left {width:90%;border:0;background-color:#5555AA}
th.lheader {background-color:#5555AA;width:100%}
table.linside {background-color:#DDEEFF;width:100%}
table.middle {width:85%;border:0;background-color:#5555AA}
th.mheader {background-color:#5555AA}
table.minside {background-color:#DDEEFF;width:100%}
Ansonsten ok.
- Sven Rautenberg