Hallo,
im neuen Design meiner Seite (
www.eric.arel-online.de/eric), habe ich zwei Textabsätze untereinander.
Vor jedem Absatz floatet eine Grafik. Im Firefox und Opera gibts keine Probleme aber der IE zeigt dir untere Grafik (die vor dem zweiten Absatz stehen sollte) nicht an. ER lädt die Grafik, diese verschwindet aber ganz schnell nach dem laden.
Das komische ist, dass der Alternativtext des Bildes angezeigt wird, das Bild selbst aber nicht.
Code:
body {
width:760px;
height:100%;
margin:0px auto;
}
.hauptteil {
height:100%;
width:510px;
float:left;
}
.kasten {
margin-top:150px;
width:240px;
float:right;
}
/* kasten */
.kasten .kastenoben {
height:30px;
}
.kastenmitte {
margin:0px 20px;
}
.kastenende {
height:30px;
}
/* hauptteil */
.oben {
height:150px;
width:510px;
margin:0px;
padding:0px;
}
.inhalt {
margin:0px;
padding:0px 20px;
}
.unten {
clear:left;
height:100px;
margin-bottom:0px;
padding:50px 20px 0px;
}
/* Newstext */
.artikel {
clear:left;
margin:30px 10px;
padding:0px;
}
.artikel p {
margin:0px;
font-family:Verdana, sans-serif;
font-size:0.7em;
line-height:1.5;
color:#4f4f4f;
}
.artikel img {
float:left;
padding:10px;
margin:10px;
margin-left:0px;
margin-top:0px;
border-style:solid;
border-width:1px;
border-color:#3cb900;
}
h1 {
margin:0px;
padding:0px;
font-size:1.3em;
font-family:'Times New Roman';
font-style:italic;
font-weight:100;
}
h1 sup {
font-size:0.5em;
font-style:normal;
font-weight:100;
font-family:Verdana, Arial, sans-serif;
margin-left:5px;
background-color:#3cb900;
color:#4f4f4f;
}
/* Navigation */
.nav a {
height:30px;
width:110px;
text-align:center;
float:left;
padding-top:10px;
margin:0px 1px 20px;
}
.nav a:hover {
color:#3cb900;
text-decoration:underline;
}
.nav {
margin:0px 10px;
}
Der Quelltext:
Code:
<body>
<div class="hauptteil">
<div class="oben">
</div>
<div class="inhalt">
<div class="nav">
<a href="test.html">Neuigkeiten</a>
<a href="test.html">Leben</a>
<a href="test.html">Misc</a>
<a href="test.html">Rubrik</a>
</div>
<div class="artikel">
<img src="images/birne1.gif" height="200px" width="200px" alt="kein Bild" />
<h1>Adobe Photoshop<sup>8. Juni 2007</sup></h1>
<p>
Super! Ich bin endlich im Besitz von Photoshop! Was ich damit zuerst gemacht habe, sehen Sie links.
Okay, nicht sehr sinnvoll, aber immerhin mein erstes Photoshop Projekt! Ich finde, es sieht gar nicht so schlecht aus - für den Anfang jedenfalls.
</p>
</div>
<div class="artikel">
<img src="images/birne1.gif" height="100px" width="100px" alt="test" />
<h1>Überschrift</h1>
<p>
Hier soll ein Absatz erscheinen, der rechts vom Bild steht. Außerdem soll das Bild auf der linken Seite genau bündig mit diesem Absatz erscheinen (an der Oberseite). Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
</div>
<div class="unten">Hier stehen die Partner, Validierung und das Copyright. <a href="http://validator.w3.org/check?uri=http%3A%2F%2Feric.arel-online.de%2Feric%2F">Validierung</a></div>
</div>
<div class="kasten">
<div class="kastenoben"></div>
<div class="kastenmitte">
Ich heiße Sie recht herzlich Willkommen auf meiner Homepage!<br />
Mein Name ist Eric Ebel und ich hoffe, Sie werden den Aufenthalt auf meiner Webseite genießen können. Wenn Ihnen mein Internetauftritt gefällt, können Sie diesen gerne an Ihre Freunde
weiterempfehlen.
<form action="/eric/index.php" method="get">
<fieldset>
<legend>Aussehen ändern</legend>
<select name="style">
<option value="standard" selected="selected">--- Bitte wählen ---</option>
<option value="standard">Standard</option>
<!--[...usw. ...]-->
</select>
<input class="field" type="submit" value="Switch" />
</fieldset>
</form>
Weiterführender Text
</div>
<div class="kastenende"></div>
</div>
</body>