margin funktioniert nicht

[xXxPeterPanxXx]

Hi,
ich habe ein Problem mit meinem News-Bereich.

p.news_text rutscht bis zum oberen ende des Divs obwohl es einen Abstand von mindenstens 4em haben soll, dass wäre genau unter der Überschrift.


Besonders gut kann man das bei dem Eintrag vom 8. August sehen.

Ich kriege es nicht, darum wäre ich über Hilfe sehr erfreut.


http://little-coder.de/kategorie.php?name=news

User: gast
Passwort Gastgast19


MfG xXxPeterPanxXx

 

[neuroleptika]

Die Spezifität von div.news p.news_text reicht nicht um #content p zu überschreiben.
Spezifität | Webdesign mit XHTML und CSS

Wenn div.news p.news_text unter dem Float (h4) angezeigt werden soll würde ich aber eher clear (left) verwenden.

Tip:
Im ff-Firebug kannst du die Kaskade leicht verfolgen.

 

[xXxPeterPanxXx]

Tip:
Im ff-Firebug kannst du die Kaskade leicht verfolgen.

Kaskade? Was ist das?

Mit clear left war das ja Leicht nur der erste Eintrag will nicht, obwohl alle Einträge den gleichen Code verwenden.

MfG xXxPeterPanxXx

 

[neuroleptika]

Das clear in div.news p.news_text wirkt auch auf das float von ul.navi.

Damit du in div.news unabhängig floaten und clearen kannst müssen die Floats in einem eigenen Block Formating Context eingeschlossen werden.
z.B durch display: table;

div.news {
border:1px solid #999999;
display:table;
margin:30px auto 1.5625em;
width:600px;
}

Um es zu verstehen suche nach css bfc oder Block Formating Context und globales clearing.
Häufig wird auch zu overflow: hidden; geraten, was ich aber nicht empfehlen würde.
Width auf display: table; ist als min-width zu verstehen.

Ich würde es gerne einfacher erklären (kann ich aber nicht).

Kaskade? Was ist das?

http://fwpf-webdesign.de/css/die-kaskade

Sowas kann nur geraten sein:

margin:30px auto [COLOR="DarkRed"][B]1.5625em[/B][/COLOR];

 

[xXxPeterPanxXx]

Ich habe nun doch overflow: hidden; gewählt. Da es mit display: table auch Probleme gegeben hat.

Ist das ein Fehler overflow: hidden zu verwenden?

Danke für deine Hilfe neuroleptika

MfG xXxPeterPanxXx

 

[neuroleptika]

Ist das ein Fehler overflow: hidden zu verwenden?

1. Überstehende Floats können von den ersten ff-Versionen abgeschnitten werden.
2. Überstehende Elemente mit position: absolute; werden abgeschnitten.

 

[xXxPeterPanxXx]

1. Überstehende Floats können von den ersten ff-Versionen abgeschnitten werden.
2. Überstehende Elemente mit position: absolute; werden abgeschnitten.

Zu 1: Das wird es nur bei einem extrem kleinem Viewport geben. Immoment passiert es wenn man den Viewport minimiert, aber auch nur weil manche Wörter unlogisch lang sind.

Zu 2: Verwende ich nicht.

MfG xXxPeterPanxXx

 

[neuroleptika]

Na dann, ... ;-)

 

[xXxPeterPanxXx]

Na dann, ... ;-)

display:table hat nicht funktioniert, das schon.


MfG xXxPeterPanxXx

P.s: Sei mir nicht böse :mrgreen:

 

[neuroleptika]

display:table hat nicht funktioniert, das schon.

doch,
du darfst dann aber kein min-width benutzen.

Die Seite ist gerade nicht zu erreichen. Aber wenn du beide Spalten floaten würdest, gäbe es diese Probleme nicht.

 

[xXxPeterPanxXx]

So,
ich habs versucht, aber ich "kapier" das nicht. Wo benutze ich min-width?

MfG xXxPeterPanxXx

 

[neuroleptika]

Normalwerweise für eine Mindestbreite.
Bei display: table; (oder display: table-cell) verwendest du stattdessen width.
Width bewirkt dort eine Mindestbreite.

 

[xXxPeterPanxXx]

Jetzt habe ich vestanden wie du es meinst.

Kannst es dir angucken, aber ich werde es wieder ändern, weil ich max-width verwenden will.

Mit min-width gibt es das Problem das man den Viewport nicht kleiner als 1000px bekommt.(ohne Anzeige-fehler).


MfG xXxPeterPanxXx

 

[neuroleptika]

PeterPan,
Heute sehe ich mir wohl nichts mehr an.
Wenn du mit overflow: hidden; zufrieden bist belasse es einfach dabei.