Supportnet / Forum / Webseiten/HTML
Ausrichten mit CSS klappt nicht
Frage
Hallo alle,
ich habe ein Problem beim Ausrichten.
Hier erstmal der Quelltext:
[code]
<div style="height: 230px">
<div class="as-container"><h4>Formteile</h4><img src="../images/formteile.jpg" alt="Formteile"></div>
<div class="txt-justify">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
</div>
[/code]
CSS:
[code]
div.as-container {
width: 120px;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.txt-justify {
text-align: justify;
}
[/code]
Das ganze ist in 2 Bereichte aufgeteilt: Links Bild (mit Text), Rechts Text.
Der Text Rechts soll jedoch oben Bündig mit dem Bild bzw. Text anfangen.
Im IE (6) sieht es richtig aus. Im Mozilla ist der Text unterhalb des Bildes ausgerichtet.. Ich hoffe das ich das ganze gut genug beschreiben konnte.
Hoffe, dass mir jem. weiterhelfen kann.
Gruss Marc
Antwort 1 von Hergy
hi cloud,
Du solltest wenns geht die Verschachtelung von divs vermeiden! Einer reicht in Deinem Fall auch aus!
versuch mal das hier:
<div class="txt-justify">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
</div>
<h4>Formteile</h4><img src="../images/formteile.jpg" alt="Formteile"></div>
CSS:
.txt-justify {
float: right;
text-align: justify;
margin-left: 10px;
margin-right: 10px;
}
Du könntest natürlich auch die Überschrift und das Bild zusammen in einen div.container packen, den Du dann links floaten lässt. Und den Text ohne div eingibst.
Wichtig ist, daß Du die div-container, in denen Du float angibst vor dem Inhalt schreibst, der das div umfliessen soll!!!
Gruß, hergy
Du solltest wenns geht die Verschachtelung von divs vermeiden! Einer reicht in Deinem Fall auch aus!
versuch mal das hier:
<div class="txt-justify">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
</div>
<h4>Formteile</h4><img src="../images/formteile.jpg" alt="Formteile"></div>
CSS:
.txt-justify {
float: right;
text-align: justify;
margin-left: 10px;
margin-right: 10px;
}
Du könntest natürlich auch die Überschrift und das Bild zusammen in einen div.container packen, den Du dann links floaten lässt. Und den Text ohne div eingibst.
Wichtig ist, daß Du die div-container, in denen Du float angibst vor dem Inhalt schreibst, der das div umfliessen soll!!!
Gruß, hergy