✔ Hilfe beim erstellen des Styles. 2 DIVs in einer übergeordneten

sobald in der "boxcontentbig" ein längerer Text steht, überlappt diese unten den eigentlichen Seitenbereich. Ich hätte es gerne so, dass der Bereich sich dementsprechend vergrößert, dass die Überlappung ausgeschlossen ist. Mit der

overflow: auto;

Eigenschaft finde ich sieht das nciht so ganz so dolle aus.
 
So wie ich das beim ersten Überflug einschätze, sollten die beiden "Rahmen"-Grafiken in einem Bild vereint, und als Hintergrundbild in einem Elternelement genutzt werden. Diese beiden seperaten DIV-Blöcke wachsen nämlich in ihrer Höhe nicht automatisch mit, wenn der Inhalt in #boxcontentbig zunimmt.

mfg Maik
 
gab es da nicht mal die möglichkeit eine große DIV zu machen und dann den Rahmen Hintergrundbilder zuzuweisen. ungefähr in dem Stil:

border-background-image-left: url (PFAD);

damit wäre mein Problem denke ich größtenteils gelöst bzw. ich könnte es bequemer lösen...
 
Gut, ich habs jetzt ausprobiert aber nicht so ganz hinbekommen. Das 3 Spalten Layout ist, finde ich, die beste Lösung, wenn es 4 Spalten hätte. Ich habs versucht dahin umzuschreiben, aber irgendwie will das nicht so wie ich. Könntest du mit vielleicht nochmal aushelfen?
 
Im "Blindflug" ein schweres Unterfangen. Wie sieht denn überhaupt dein Versuch aus?

Wenn du aber meinem Rat folgst, die beiden "border"-Grafiken in einem Hintergrundbild zu vereinen, und es im Elternelement einzusetzen, benötigst du in deinem Seitenlayout maximal zwei Spaltenblöcke, denn die beiden äußeren "Rahmen-Blöcke" fallen mit dieser Technik gänzlich aus dem HTML-Code ;)

mfg Maik
 
also, hier mal die beiden Codeauszüge und ein Screenshot ;)

HTML: 
<div id="wrapper" class="clearfix">
     <div id="leftborder">
          <h2>leftCol</h2>
     </div>
     <div id="rightborder">
          <h2>rightCol</h2>
     </div>
     <div id="usernavigation">
     </div>
     <div id="mainarea">
          <h2>centerCol</h2>
     </div>
</div>

Code: 
#wrapper {
position: relative;
margin: 0px;
width: 1120px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url(3cols.png) repeat-y;
}

#leftborder{
background-image: url(img/border-left.jpg);
background-repeat: repeat;
width: 80px;
float: left;
}

#usernavigation{
margin-left: 80px;
width: 150px;
min-height: 150px;
background: red;
}

#rightborder{
background-image: url(img/border-right.jpg);
background-repeat: no-repeat;
width: 200px;
float: right;
}

#mainarea{
background: #FFF;
margin: 0 230px;
}

hoffe das hilft weiter ;)
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    54,8 KB · Aufrufe: 14
Wie ich dir vorgestern schon geantwortet hatte, entfallen die beiden äußeren Spaltenblöcke #leftborder und #rightborder. Stattdessen werden die beiden Grafiken "border-left.jpg" und "border-right.jpg" in einer Grafik vereint, die als Hintergrundbild in #wrapper fungiert

In CSS-Layout mit 100%-Höhe, einem meiner beiden empfohlenen Tutorials, handelt es sich um die Grafik "3cols.png", die da in deinem CSS-Code noch herumgeistert :-)

Dabei solltest du dir auch mal das Modell "3cols_centered_border.htm" im Attachment meiner zweiten Tutorial-Empfehlung Zentriertes Layout mit drei Spalten genauer anschauen :suspekt:

Deine beiden "Rahmen"-Blöcke #leftborder und #rightborder werden nämlich, wie schon in deinem Ausgangslayout, weiterhin nicht in der Höhe mitwachsen, wenn im mittleren Bereich (#usernavigation, #mainarea) der Inhalt zunimmt. Schau doch einfach, bis wohin deren Hintergrundbild derzeit reicht. Wenn du ihre enthaltenden <h2>-Tags entfernst, verabschiedet sich der Rahmen unterhalb des Header-Bereichs, in dem Höhenangaben für die Rahmenblöcke existieren, gänzlich aus der Seite.

Das Markup für den Header-Bereich liesse sich übrigens ebenfalls reduzieren, da auch hier der vertikale Rahmen mit #wrapper erzeugt wird.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück