✔ Positionierungsprobleme

[Jukkales]

Hallo mal wieder,

ich habe zwar zum gleichen sachverhalt schon ein Thema jedoch hab ich nun ein anderes Problem, da die andere Frage schon geklärt wurde dazu hoffe ich das es ok ist ein neues Thema zu öffnen.

Wieder zu der Seite:
http://testserver.records-of-lunia.de/test.html

Ich habe schon viel rumprobiert jedoch erlange ich nicht das Ergebniss welches ich anstrebe. Der Aufbau der "Tabelle" soll wie im Dokumentenfluss sein also:
1. Header
2. Post
3. Kommentare

Jedoch erlange ich ein Ergebniss welches völliges wirrwar ist.

Wo liegt mein Fehler dork?


MfG Jukkales~

PS Frage am Rande:

Kann ich Klassen einteilen alsso so in der Art

div .news.header {}

(Klasse "header" in der Klasse "news" welche nur in <div> vorkommt)

 

[Maik]

Hi,

vielleicht hilft dir das hier weiter?

.newsheader
{
        width: 93%;
        position: relative;
        /*float: left;*/ /* auskommentiert = deaktiviert */
}

.imageholder
{
        margin: 3px;
        padding: 3px;
        width: 100px;
        height: 100px;
        /*float: left;*/ /* auskommentiert = deaktiviert */
}

Ansonsten poste mal eine Vorschau-Grafik, aus der hervorgeht, wie die einzelnen Elemente konkret angeordnet sein sollen.

Selbstverständlich kannst du eine Regel für Nachfahrenelemente aufstellen - siehe Selektoren für Nachfahren.

 

[Jukkales]

Damit hatte ich nicht gerechnet das die floats schuld sind, es geht nun so wie ich es mir Vorgestellt hatte, ein weiteres mal Danke

Nun zur Frage mit den Nachfahren:

<div class="news">
    <div class="newsheader">
        <div class="imageholder">
            <img src="test.gif" class="image" />

Ich hab einen solchen Aufbau und möchte .image eindeutig zuweisen. Auf dieser seite steht:

div .news > .newsheader .imageholder .image

Jedoch geht das nicht oder ich hab im falschen Abschnitt geschaut.

MfG Jukkales~

 

[Maik]

Scheinbar wird durch das entfernen der floats wird im Internet Explorer das Bild nicht korrekt angezeigt und auch die anderen Texte werden einfach "überdeckt".

Versuch es mal anstelle von:

div.news > .newsheader
{
        position: relative;
}

mit:

div.news .newsheader
{
        position: relative;
}

Du hast im falschen Abschnitt nachgeschaut, denn das ">"-Zeichen steht für Kind-Selektoren, die aber von den älteren IE-Versionen nicht unterstützt werden.

Zudem werden die vier genannten Klassen in deinem HTML-Code von keinem weiteren DIV umschlossen, weshalb der Selektor nicht greift - also muss es so lauten:

.news .newsheader .imageholder .image { ... }

 

[Jukkales]

Vielen dank nun geht alles.

Das Problem mit der Überdeckung hab ich gelöst indem ich dem header-element eine feste Höhe zugewiesen habe.

Nochmals danke.

Mfg Jukka