CSS Divs sollen nicht überlappen

Beitrag von **Ice Man** » 12.02.2008, 16:15

Da ich vorhin im Google Beitrag den Tipp bekam, meinen Text mit CSS weiter vor zu verlagern, bin ich nun am Testen

Ich hatte vorher 4 Inhalte Block1

1. Bild
2. Technische Details / Fakten
3. Text
4. Kommentare

Nun hab ich per Div den Text fest positioniert, und dieser Steht nun im Quelltext weit vorn.

Das Problem, wenn der Text größer ist, dann braucht er mehr Platz.
Das hat zur Folge, das der Text dann über die Kommentare geht.

Verwende ich nun "z-index:1" dann hat das nur zur Folge, das die 2. Div Ebene nur darunter oder darüber gelegt wurde. Also wie bei Photoshop.

Ich will aber, das der 4. Block erst nach dem 3. Block (Text) kommt.
Beim alten Tabellen Design war das kein Problem, da der 4. erst nach dem 3. Kam.

Aber die Divs überlappen, statt nacheinander zu liegen.
Hab schon geegoogelt, aber leide finde ich nicht, wie ich die Überlappung verhindern kann ?

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **Anonymous** » 12.02.2008, 16:25

versteh ich jetzt nicht so ganz?
aber im einfachsten fall doch mit "clear" ?

wenn poste mal nen link oder ne zeichnung ...

Beitrag von **Troll** » 12.02.2008, 16:55

Da ich vorhin im Google Beitrag den Tipp bekam, meinen Text mit CSS weiter vor zu verlagern, bin ich nun am Testen

Du hattest eine Theorie. Ich habe gesagt, dass andere auch der Meinung sind, ich allerdings davon persönlich nichts halte. Ich habe Dir keinen Tipp dies bezüglich gegeben!

Dein Porblem dürfte allderdings float:left; beheben (zumindest weiterhelften)

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **Ice Man** » 12.02.2008, 16:55

Das sollte es erklären.
Wie schon geschrieben, ich bekomme es nicht hin, das Div3 an Div2 andockt, egal wie groß Div2 ist.

Beitrag von **Anonymous** » 12.02.2008, 17:19

also hinter das </div2 Tag> und vor <div3 Tag> machst du ein neues

< div class="clear" (hier die Klammer schließen)

und in die css datei schreibst du

Code: Alles auswählen

.clear &#123;
	clear&#58; both;
	height&#58; 5px;
&#125;

dat müsste ausreichen ...

Beitrag von **Ice Man** » 12.02.2008, 17:56

Funktioniert leider nicht.

Hier nochmal der Aufbau

Zuerst kommt im Quelltext das Div2 mit

echo "<div style=\"position:absolute; top:500px; \">";

dann

DIV1

und dann DIV3

Ich verzweifle langsam an dem DIV Kram.
Mit Tabellen gings irgendwie einfacher

Beitrag von **grossy** » 12.02.2008, 18:54

Nicht verzweifeln!!!!!!

das Position:absolute stellte das Element frei. D.h. alle anderen DIV's wissen gar nicht, dass es dieses DIV gibt. Ergo, sie können sich gar nicht nach diesem DIV richten.

Beitrag von **Troll** » 12.02.2008, 20:49

Prinzip:

<div style="float:left;width:800px;">Inhalt 1</div>
<div style="float:left;width:800px;">Inhalt 2</div>
<div style="float:left;width:800px;">Inhalt 3</div>

Wie grossy schon meint: keine Verwendung von position

Beitrag von **Ice Man** » 12.02.2008, 21:28

@ Troll, das nützt mir leider nix.

Das Problem ist doch, das der Text, erst am Ende der Seite kommt.
Mit deinem Code ist es doch wie jetzt.

Ich wollte doch den Text von unten im Quelltext nach oben positionieren.
Also das <div>text soll im Quelltext vor <div1, <div2 kommen.
Aber im Browser soll es weiterhin unten stehen.
Dafür muss man doch position verwenden.

Optisch finde ich es schöner, wenn der Text nach Bild und Infos kommt.
Aber ich will ja mal testen, ob es Auswirkungen hat, wenn der Text ganz oben steht. Deswegen wollte ich den Text ja nur im Quelltext nach vorn schieben.

Beitrag von **800XE** » 13.02.2008, 01:08

Troll hat geschrieben:Prinzip:

<div style="float:left;width:800px;">Inhalt 1</div>
<div style="float:left;width:800px;">Inhalt 2</div>
<div style="float:left;width:800px;">Inhalt 3</div>

Wie grossy schon meint: keine Verwendung von position

Ice Man hat geschrieben:@ Troll, das nützt mir leider nix.

Das Problem ist doch, das der Text, erst am Ende der Seite kommt.
Mit deinem Code ist es doch wie jetzt.

das geht nicht, pasda

Ice Man hat geschrieben:Ich wollte doch den Text von unten im Quelltext nach oben positionieren.

eventuell wenn man nicht HTML sondern XML Seiten hat

Aber da bräuchte es qusie zusätzlich zu CSS HTML/XML noch eine Dritte Datei .....
CSS = Style
XML = Inhalt
??? = Positionierung der Objecte .... die kann(soll/muß) anders sein wie die reihenvolge in der XML ..... deswegen das muß in der () sonst wäre sie ja unnötig .....

Aber so eine DritteDatei gibt es glaube nicht

@w3c
position:top
position:bottom
bzw
float:top
float:bootom

=

Code: Alles auswählen

<div>ich bin der Inhalt</div> <!-- dieser div ist eigentlich unnötig -->

<div style=float&#58;top>ich komme unten imQuelltext, aber auf der SIte erscheine ich oben .... da ich ein Ofizieller STandard bin hat mein StyleFloat zur folge das alles was schon da ist nach unten geschoben wird um für mich platz zu machen</div>

// EDIT
so täts auch ohne dritte Datei gehen

// EDIT 2
<hidden>sorry das ich böse bin</hidden>
vielleicht wirds was ab IE23

Beitrag von **Troll** » 13.02.2008, 11:06

das geht nicht, pasda

Klar geht das!

Folgendes:

1. Den Header Bereich und von mir aus die linke Navigation ganz normal mit div float erstellen

2. Alles was nach unten Variable ist erst mal weglassen

3. Die Höhe des Headers wie auch die Breite der linken Navigation sind ja wohl bekannt

4. Erstellen einen div "Content Master" Containers positionierten mit absolut direkt unter des Headers auf die volle Breite inkl. Navigation. Dieser wird im Quelltext (body) ganz oben angelegt.

5. Auch die Höhe der Navigation sollte bekannt sein (ein wenig spielen).

6. Im div Content Master Container einen weiteren div Block erstellen und mit margin-left die Navigation freihalten und height: xxx px; die Höhe der Navigation

7. mit float-left: die Inhalte erstellen

7. mit float-left: den Footer erstellen (margin-left wieder zurücksetzen)

8. Content Master div schließen

Was ist daran nicht möglich? Hat man jetzt keine Linke Navigation ist das ganze Kiderfasching. Im Quelltext ist nun gleich nach dem div Container die H1 Überschrift zu sehen.

Tipp:
Bug bei IE 6 aufpassen. Kommt bei float-left in zusammenhang mit margin-left vor. Einfach "display: inline;" in den Master Container einfügen. Auf padding Angaben verzichten, sonst giebt es Probleme mit den unterschiedlichen Browsern.

Ich hoffe das ist Verständlich.