Zum Inhalt springen

Inhalt links unter Menu stellen

Erstellt am 7. September 2006 · 2 Antworten · letzte Antwort am 7. September 2006

Tags: HTML & CSS, Frage

groeg ·

Hallo,
ich habe es so weit geschafft den Inhalt Links in das Template einzubinden der Inhalt soll unter dem Menu links mit einem Abstand von xy Pixel stehen. Nur habe ich folgendes Problem das die untere Box nicht nach unten geschoben wird, sondern es kommt zu einer Überlappung, genau genommen wird die Box für den Inhalt links auf die Menu Box aufgeschoben. Ich habe im Moment keine Idee wie ich das lösen kann und CSS ist auch nicht meine Stärke. Kann mir freundliche Weise jemand helfen?

Hier der Auszug aus dem Template

</div>

<div id="content-wrap">

<div id="utility">
<!-- ###MENU_LINKS### Start -->
Menu
<!-- ###MENU_LINKS### Start -->
</div>

<div id="inhalt-links">
<!-- ###INHALT_LINKS### Start -->
<h2>INHALT_LINKS</h2>
<!-- ###INHALT_LINKS### Ende-->
</div>

<div id="content">

<div id="breadcrumb">
<!-- ###BREADCRUMP### Start -->
Breadcrump
<!-- ###BREADCRUMP### Stop -->
</div>

Hier der Auszug aus dem CSS

#content-wrap {
position:relative;
width:100%;
height: 100%;
}
#utility {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}

#inhalt-links {position:absolute;left:10px;width:190px;border-top: 0px solid #999;padding-bottom: 40px; margin-top: 80px; }

#content {margin: 0 50px}

Unbekannter Benutzer ·

Hier ein Teil des CSS von dir:

#utility {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}

#inhalt-links {position:absolute;left:10px;width:190px;border-top: 0px solid #999;padding-bottom: 40px; margin-top: 80px; }

mit position:absolute; setzt du die jeweilige box auf eine feste Position. Sie wird da auch nicht wegrücken o.ä., sondern halt überlagern wie es jetzt passiert. Du müsstest deinen #inhalt-links nach unten verschieben, indem du top: setzt z.B. top:400px; verschiebt den inhalt-links um 400px nach unten...

Sinnvoller wäre aber natürlich wenn die beiden Boxen einfach untereinander ständen und sich je nach Größe verschieben.
Dann müsste ich aber dein CSS komplett neu schreiben...

Gruß

Christian

groeg ·

(Sinnvoller wäre aber natürlich wenn die beiden Boxen einfach untereinander ständen und sich je nach Größe verschieben.)

Genau Das will ich erreichen.

Die Boxen habe ich schon untereinander gestellt, und das habe ich auch schon ausprobiert

#inhalt-links {float: left; border: 0px solid; padding: 5px; width: 18%; }

aber jetzt überdeckt die Menubox die Box mit dem linken Inhalt.