Probleme mit der Div -Positionierung [geschlossen

Question

Dies beginnt jetzt, meinen Kopf zu tun, ich habe eine Div -ID -CSS namens Frontwidth, die 1 IMG 1 -Titel und 1 Text enthält.

Wenn ich eine zweite oder dritte Frontbreite mache, liegt es hinter sich, anstatt darunter und darunter zu gehen.

HILFE :-( http://www.e-fluential.com/offline/

Danke im Voraus

Answer 1

Gemäß meinem Kommentar:

Wow, das ist ... ein einzigartiger Ansatz? Sie haben viel zu viel position: absoluteund position: relative. Ich habe dies gerade in Firebug behoben, aber es wird ein paar Minuten dauern, um eine Antwort zu schreiben, die Anzahl der Regeln, die ich umschalten und hinzufügen musste.

Entferne das position Regel von jedem dieser Elemente:

• #mainbody.
• #frontwidth.
• #titlesbig.
• #greyline.
• #homepageimage.
• #titlesmedium.
• #homepagetext.
• Hoffe ich habe nichts vergessen: D.

Mit Ausnahme von mainbody, Sie verwenden jedes dieser Elemente mehrmals.

Wechseln Sie also in die Verwendung a class stattdessen.

Wechseln Sie beispielsweise in Ihrem HTML zu:

<div class="frontwidth">

Und in Ihrem CSS wechseln Sie zu:

.frontwidth {

}

Jetzt können wir diese Elemente so auslegen, wie Sie sie wollen:

• An .homepageimage, hinzufügen float: left.
• An .frontwidth, hinzufügen overflow: hidden (zu Löschen Sie die Schwimmer).
• An .titlesmedium und .homepagetext hinzufügen margin-left: 340px.

Answer 2

Sie haben alle Inhalte in der positioniert frontwidth Divs absolut. Die absolute Positionierung nimmt Elemente aus dem Fluss und alle anderen Elemente sind so positioniert, als wären sie nicht da.

Die beste Lösung wäre nicht, nicht zu verwenden position: absolute (Das ist eine "letzte Resort", die normalerweise sowieso verwendet werden kann). Schweben Sie stattdessen das Bild links und geben Sie den Titel und den Text einen linken Rand.

Noch ein weiterer Rat:

• Viele Ihrer Bilder fehlen alt Attribute.
• Ihr Quellcode ist groß div Suppe. "Tischloses Layout" bedeutet nicht "nur" verwendet " divS ". Wickeln Sie keine Dinge hinein divs zum Teufel. Zum Beispiel ist es unnötig, jedes Bild in eine DIV zu wickeln. Sie können den Stil direkt auf die Bilder anwenden. Und verwenden sinnvolle Elemente wie h1, h2, usw. für Schlagzeilen, p Für Textabsätze, ul und li Für Listen (Menues) usw. divS sind auch "Last Resort" -Ding. Verwenden Sie sie nur, wenn kein anderes HTML -Element geeignet ist.

Answer 3

Das Problem liegt in Ihrer Position der Position: Absolut und Position: Relativ.

Wenn Sie diese aus dem CSS entfernen, stapeln Sie sich nicht mehr übereinander. Versuchen Sie, diese zu entfernen und dann die HTML einzustellen

Answer 4

Der größte Teil des Layouts sortiert sich aus, wenn Sie entfernen position: absolute Aus den HomePageImage-, Titlesmedium- und HomePagetext -Klassen. Die verschiedenen position: relative Elemente verursachen keine Probleme, da sie keine Hinweise auf oben, unten, links oder rechts haben - im Wesentlichen ändern sie das Layout überhaupt nicht.

Um ein Element neben ein anderes sitzen zu lassen, können Sie Float verwenden. Schweben Sie zum Beispiel das Bild links und schweben Sie dann den Titel links. Dadurch wird der Titel neben dem Bild gelegt. Verwenden Sie danach unbedingt klar, um wie gewohnt wieder mit fließenden Elementen zu beginnen. Wenden Sie sich abwechselnd alle zusätzlichen Divs los - Sie ändern das Layout, indem Sie viele zusätzliche Elemente hinzufügen. Betrachten Sie ein Inline -Element, um ein Inline -Element zu wickeln und zu stylen <span> Tag stattdessen.