nicht angemeldet
Der MartinHallo,
Nun habe ich in die Box oben ein Bild eingefügt ...
nein, hast du nicht. Du hast es einfach isoliert im Quellcode stehen.
Jetzt taucht aber das Problem auf, dass die weiteren Bilder auf dieser Seite, alle die gleiche Größe bekommen haben, wie das Bild oben.
Und das wundert dich, wo du doch mit
img {
margin: 0 0 0.7em; padding: 0em;
height: 88px;
text-align: left;
background-image:url(rest/pictures/main.png);
border: 1px dashed silver;
}
festgelegt hast, dass alle Bilder 88px hoch sein sollen? Wobei noch anzumerken wäre, dass text-align bei einem img-Element ganz bestimmt nicht sinnvoll ist, es _hat_ ja keinen Textinhalt, den man damit ausrichten könnte. Und dass ein Bild noch ein Hintergrundbild haben soll, ergibt auch in den seltensten Fällen einen Sinn.
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
Wozu das, wenn dein Dokument nirgends ein h2-Element enthält?
<body>
<img src="pictures/banner.png" width=100% border=0>
Dem Bild fehlt das vorgeschriebene alt-Attribut, sowie Anführungszeichen um die 100%-Angabe für die Breite. Auch der Wert des border-Attributs _sollte_ in Anführungszeichen stehen. Aber warum verwendest du diese Attribute überhaupt? Diese Angaben gehören eigentlich ins Stylesheet.
<div id="Inhalt">
<style type="text/css">
Autsch. Ein style-Block hat innerhalb des body nichts, aber überhaupt nichts verloren! Zumal du hier nur Angaben wiederholst, die du eingangs sowieso schon gemacht hast.
</style>
<style type="text/css">
Und warum noch einen zweiten style-Block aufmachen?
</head>
Fehler: Das head-Element ist schon längst beendet.
<body bgcolor=#FFFFFF>
Fehler: Das body-Element ist schon viel weiter oben geöffnet worden.
<a href=""
onmouseover="austausch1.src='pictures/01.jpg';"
onmouseout="austausch1.src='pictures/02.jpg';"><img src="pictures/02.jpg"
border="0" width="300"
name="austausch1">
</a>
Wozu hier ein Link (a-Element), der eigentlich gar keiner ist, weil das href-Attribut leer ist? Wenn du den Bildertausch eh mit Javascript machst, kannst du diese Eventhandler auch direkt an das img-Objekt binden. Der Link wäre allenfall nachvollziehbar, wenn du den Bildertausch mit CSS und der Pseudoklasse :hover realisieren wolltest und dabei den IE mit bedienen willst.
Abgesehen davon bekommst du einen Namenskonflikt, wenn du mehrere Elemente mit dem gleichen Namen verwendest und sie dann mit der IE-spezifischen Art über das per name-Attribut erzeugte Javascript-Elementobjekt ansprechen willst. In anderen Browsern geht diese Zugriffsmethode ohnehin schief.
<font color=#3366CC face="trebuchet MS,Verdana" size="3">
Wozu das font-Element? Das gehört per CSS geregelt.
<br><br>
Abstände auch.
Generell möchte ich dir einen häufigen Besuch beim HTML-Validator empfehlen, und natürlich das Ausbessern der zahlreichen Fehler, auf die er dich hinweisen wird.
So long,
Martin
Zwischen Leber und Milz
passt immer noch'n Pils.