Abstand zwischen DIVs nach Clear

Phantom1410 · #1 (**permalink**) 17.05.2007, 18:42

Hallo,

ich habe einen Div-Container, indem ich aus drei weiteren DIVs eine Grafik zusammenbastel. Darunter habe ich noch eine DIV, in der der Inhalt steht. Diese DIV-Box habe ich mit clear:both formatiert, die anderen darüber mit float:left. Jetzt entsteht allerdings ein Abstand zwischen der Titelleiste (die 3 Divs) und der Inhalts-Div. Bekomme ihn nicht weg. Der Abstand ist sowohl im IE6, IE7, FireFox2...

Danke im Voraus

heiko_rs · #2 (**permalink**) 17.05.2007, 18:45

Zitat:

Zitat von Phantom1410

indem ich aus drei weiteren DIVs eine Grafik zusammenbastel.

Das ist schonmal keine gute Idee und mit Sicherheit so auch nicht nötig.

Dein eigentliches Problem wird sich ohne Code und/oder Link nicht lösen lassen.

Phantom1410 · #3 (**permalink**) 17.05.2007, 18:49

Ok, hier ist mein Code:

Zitat:

====CSS====
.li {
background:url('images/li.gif') no-repeat;
height:22px;
width:12px;
margin:0px;
float:left;
display:block;
}

.mi {
background:url('images/mi.gif') repeat-x;
height:22px;
float:left;
padding-top:3px;
display:block;
}

.re {
background:url('images/re.gif') no-repeat;
height:22px;
width:46px;
float:left;
display:block;
}

.content {
background-color:#540403;
float:none;
clear:left;
}

====HTML====

<div style="width:230px;">
<div class="li"></div>
<div class="mi">[Hier kommt der Titel rein] </div>
<div class="re"></div>
<div class="content">[Ich bin für den Inhalt zuständig]</div>
</div>

Das war's schon an Code. Ich hoffe, es ist nur ein kleiner Fehler - ich finde ihn aber nicht..

Dankeschön

heiko_rs · #4 (**permalink**) 17.05.2007, 19:08

Code:

.mi {
background:url('images/mi.gif') repeat-x;
height:22px;
float:left;
padding-top:3px;
display:block;
}

Dieses div ist 3px höher als die anderen (Boxmodell), daher entsteht der Abstand (aber nur bei .li und .re, während es bei .mi keinen Abstand gibt).

Aber Du solltest eh keine leeren Elemente nutzen, sondern deren Grafiken Elementen zuweisen, die eh für Inhalte genutzt werden.

Übrigens solltest Du .mi noch eine Breite geben.

Phantom1410 · #5 (**permalink**) 17.05.2007, 19:11

Das verstehe ich nicht so ganz

Zitat:

Aber Du solltest eh keine leeren Elemente nutzen, sondern deren Grafiken Elementen zuweisen

Aber: Ich habe demnach bei content margin-top auf -3 gesetzt. Das klappt im IE wunderbar und sieht auch wieder richtig aus. Nur der FireFox ignoriert alle margin-angaben bei content. Kann auch -6px eingeben und es tut sich nix.

Ich bräuchte eine Möglichkeit, die padding-Eigenschaft setzen zu können, OHNE dass sich die Höhe des DIVs verändert. So sitzt der untere DIV direkt an dem oberen... *snief*

heiko_rs · #6 (**permalink**) 17.05.2007, 19:17

Weise die Grafiken z.B. dem umgebenden div und/oder .mi zu, dann kannst Du .li und .re rauswerfen.

Zitat:

Zitat von Phantom1410

Ich habe demnach bei content margin-top auf -3 gesetzt. Das klappt im IE wunderbar und sieht auch wieder richtig aus. Nur der FireFox ignoriert alle margin-angaben bei content. Kann auch -6px eingeben und es tut sich nix.

Das ist korrektes Verhalten, im Gegensatz zum IE. Du kannst allenfalls dem Float (d.h. in Deinem Falle .mi) margin-bottom: -3px; geben, aber das wäre Unsinn. Gleiche das padding-top einfach durch height: 19px; aus (Google-Suche: Boxmodell).

Abgesehen davon sind feste Höhen für Text enthaltende Elemente eh nicht sinnvoll.

Phantom1410 · #7 (**permalink**) 17.05.2007, 19:26

Vielen Dank.

Feste Höhen habe ich ja nur, weil die Bilder eine spezielle Höhe haben. Gebe ich diese nicht an, werden die Bilder nicht komplett angezeigt.

Mit der Höhe von 19px funktioniert es perfekt. Über das Boxmodell habe ich schon viel gelesen, nur immer an der falschen Stelle angewendet.

Allerdings verstehe ich jetzt nicht, wie du das meinst:

Zitat:

Weise die Grafiken z.B. dem umgebenden div und/oder .mi zu, dann kannst Du .li und .re rauswerfen

Ich kann doch immer nur ein Background-Image pro DIV setzen...

heiko_rs · #8 (**permalink**) 17.05.2007, 19:31

Zitat:

Zitat von Phantom1410

Ich kann doch immer nur ein Background-Image pro DIV setzen

Natürlich, mache also z.B. links und rechts zu einem und weise es dem umgebenden div zu. Möglichkeiten gibt's garantiert genug.

Dr Snuggles · #9 (**permalink**) 17.05.2007, 19:43

Hallo...

Aus deinen anderen 2 1/2 erstellten Threads zum (fast) gleichen Thema weiß ich ja zufällig, das es um "abgerundete Ecken" geht. Das auch als Hinweis an den unermüdlich hilfsbereiten Heiko. Anhand deines Code-Ausschnitt ist das natürlich nicht zu erkennen. Ändert aber eigentlich auch (fast) nichts an den Tipps, welche du auch nicht zum ersten Mal liest... Finde das zollt weder von Respekt gegenüber denen, die hier helfen, noch zeigt es eine Lernbereitschaft, von der hier all die unermüdlichen Helfer zunächst einmal ausgehen. So, das musste mal raus.

Schade eigentlich, das dir nicht zum 3. Mal in der ersten Antwort folgender Link empfohlen wurde: http://xhtmlforum.de/40080-fuer-frag...twortende.html
und ja, ich kenne den Abschnitt "für Antwortende"

Schönen Abend noch...
Christian

Phantom1410 · #10 (**permalink**) 17.05.2007, 21:21

Danke für den Link!

Was die Lernbereitschaft angeht, würde ich dir nicht ganz zustimmen... Nicht umsonst kämpfe ich jetzt schon 2 Tage mit diesem Problem und habe ich nicht gerade umsonst, eher genau gesagt, für 35€ ein Buch über CSS und die Probs gekauft.

Es mag sein, dass ich 3 Threads aufgemacht habe, aber wenn du genau liest, handelt es sich hier primär um ein anderes Problem. Heiko war nur so freundlich und hat versucht, meinen Code zu optimieren. Man kann zwar sagen, dass es sich hier bezüglich des Titels um Off-Topic handelt, aber das werde ich keinem zum Vorwurf machen, der versucht, einfach durch RANDKOMMENTARE, einen Code zu optimieren und einem Neuling dadurch besseren Programmierstil beizubringen.

Und was du über meinen Respekt gegenüber anderen "Helfern" sagst, werde ich nicht kommentieren. Nur möchte ich anmerken, dass es wirklich nicht einfach ist, durch alle Browser und deren Interpretationen von CSS durchzusteigen. Insofern ist es durchaus möglich, dass kleine Fragen schnell auftauchen. Foren sind ja dazu da, Fragen zu stellen und zu lernen. Und wenn ich hier alleine sitze und versuche, die mir gegebenen Tipps in die Tat umzusetzen, dies leider nicht gelingt und nochmal nachfrage (es ist ja leider keine flüssige Kommunikation), sollte das doch bitte nicht als Respeklosigkeit, sondern unter Auseinandersetzung mit einem Thema/Problem betitelt werden.

Gut, das war's jetzt auch von meiner Seite!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layoutcheck + Including	crimi	Site- und Layoutcheck	8	27.09.2008 21:08
IE6, float, clear, divs - Valider Code?	thebrains_de	CSS	1	28.08.2008 20:48
Probleme mit Hintergrundbild von Divs	wurzelchensen	CSS	0	13.06.2008 18:07
float & clear problem - nicht alle DIVs mit clear bearbeiten	Tobias0711	CSS	6	30.04.2008 18:51
So langsam bekomme ich die Krise mit den DIVs	Thuroc	CSS	12	12.11.2007 14:25