falsche darstellung im div mit img
koernchen
- css
0 HKS
hallo ich hab ein probelm und zwar wenn ich ein bid zwischen div einbinde dann drecht der ie völlig ab. Sie code.
Was kann ich machen um das zu verhindern?
Ich hoffe mir kann jemand helfen!
.grundTabelle {
margin-top: 0.5em;
border: 1px solid silver;
}
.tabelleBalken {
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
background-color: #9F9F9F;
}
.tabelleForum {
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
margin-bottom: 1px;
padding-left: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-top: 0em;
background-color: #CFCFCF;
overflow: auto;
}
.forumIcon {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
float: left; width: 5em;
text-align:right;
}
.forumInfo {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
float: right; width: 10em;
}
.forumName{
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
margin-left: 5em;
}
<div class="grundTabelle">
<div class="tabelleBalken">
bla
</div>
<div class="tabelleForum">
<div class="forumIcon">
<img src="bla.de" alt="" border="0">
</div>
<div class="forumInfo">
bla
</div>
<div class="forumName">
bla
</div>
</div>
</div>
Hallo,
hallo ich hab ein probelm und zwar wenn ich ein bid zwischen div einbinde dann drecht der ie völlig ab.
Was genau meinst Du mit "dreht völlig ab"? Seiht in IE Opera und Firefox schonmal ziemlich änlich aus. Deine Fehlerbeschreibung muss präsziser werden!
Was kann ich machen um das zu verhindern?
Was genau?
Ich hoffe mir kann jemand helfen!
Solange niemand weiß wovon Du redest vermutlich nicht.
Der fehler wird immer dann dargestellt wenn das img größer ist als div=forumName dann tritt der fehler auf.
Auch sieht mann den fehler besser wenn der code so aussieht.
<div class="grundTabelle">
<div class="tabelleBalken">
bla
</div>
<div class="tabelleForum">
<div class="forumIcon">
<img src="bla.de" alt="" border="0">
</div>
<div class="forumInfo">
bla
</div>
<div class="forumName">
bla
</div>
</div>
<div class="tabelleBalken">
bla
</div>
<div class="tabelleForum">
<div class="forumIcon">
<img src="bla.de" alt="" border="0">
</div>
<div class="forumInfo">
bla
</div>
<div class="forumName">
bla
</div>
</div>
<div class="tabelleBalken">
bla
</div>
<div class="tabelleForum">
<div class="forumIcon">
<img src="bla.de" alt="" border="0">
</div>
<div class="forumInfo">
bla
</div>
<div class="forumName">
bla
</div>
</div>
</div>
Der fehler wird immer dann dargestellt wenn das img größer ist als div=forumName dann tritt der fehler auf.
Jetzt wissen wir wann er auftritt, aber immernoch nicht wie man sich diesen Fehler vorstellen muss. Was passiert den fehlerhaftes?
Hallo leif,
da kann man ja von Glück reden, dass das nicht funktioniert. Diese div-Suppe ist absoluter Schwachsinn. Wenn du tabellarische Daten hast, dann verwende auch die korrekten HTML-Elemente für Tabellen und versuche nicht diese mit divs nachzubauen nur weil du irgendwo so einen Schrott wie div-Layout gehört hast.
Nimm deinen Inhalt(!) und zeichne ihn sinnvoll mit HTML-Elementen aus. Anschließend nimm CSS und verpasse diesen Elementen ein angenehmes Aussehen. Wenn du mehrere Elemente in eine Gruppe zusammenfassen musst, es aber kein Element gibt, dass dieser Gruppe eine sinnvolle semantische Auszeichnung gibt, dann(!) nimm ein div-Element. Dafür ist es da und nicht dafür Tabellen nachzubauen.
Ich habe deinen Quelltext einmal bis auf den Inhalt und die sinnvollen Elemente gekürzt:
bla
<img src="bla.de" alt="" border="0">
bla
bla
bla
<img src="bla.de" alt="" border="0">
bla
bla
bla
<img src="bla.de" alt="" border="0">
bla
bla
Und siehe da, du hast eigentlich noch gar keinen Inhalt, den du auszeichnen könntest. Das ist typisch und imho einer der Gründe warum Anfänger so häufig eine div-Suppe erzeugen, beim Versuch von Tabellen als Layout-Mittel wegzukommen. Schau dir CSS-basierte Layouts in SELFHTML an und achte darauf wie dort der Inhalt mit HTML-Elementen ausgezeichnet wurde.
Hier mal ein paar Elemente, die man recht häufig braucht, ein Blick in SELFHTML ist sicher nützlich, wenn du einmal nicht weißt, welches Element angebracht ist.
<h1> bis <h6> für Überschriften erster bis sechster Ordnung.
<p> für Textabsätze.
<a> natürlich für Links.
<ul> und <li> für ungeordnete Listen, das kann eine Auflistung von Links genausogut wie eine lange Liste von Bildern sein.
<ol> und <li> für geordnete Listen, z.B. eine Rangliste.
<dl>, <dt> und <dd> für Definitionslisten, z.B. ein Glossar.
<address> für Addressen, z.B. im Impressum.
<em> und <strong> zur Betonung und starken Betonung.
<blockquote> und <q> für Zitate
<table>, <thead>, <tbody>, <tfoot>, <th>, <tr>, <td> u.v.m. für die Auszeichnung von tabellarischen Daten.
<form>, <fieldset>, <input>, <legend> u.v.m. für die Auszeichnung von Formularen.
Diese Liste könnte ich jetzt noch eine ganze Weile fortführen, aber das überlasse ich lieber SELFHTML. Du siehst, es ist garnicht nötig soviele div-Elemente zu verwenden, wo es doch Elemente gibt, die den Inhalt viel sinnvoller auszeichnen.
gruss,
OhneName