✔ Fluides Design?

[aphaean]

Mein Problem ist recht schwer zu umschreiben - jedoch einfach anzugucken :

http://onestone.selfhost.tv/akvadrat/

Man betrachte unten den Text - der leider, sobald er über den zunächst sichtbaren Browser bereich hinausläuft, ohne dunkelgrauen Hintergrund und graphischen Tüddels rechts und links auskommen muss.

Der Fehler erscheint übrigens (meines Wissens) nicht bei einem Opera Browser auf Windoof Platform.

Die Semantik ist folgendermassen:

<div id="left"></div>                 <!-- graphische tüddels links und rechts -->
<div id="right"></div>
		
<div id="vertical">                    <!-- grauer hintergrundstreifen (mit rand) -->
   <div id="leftmargin"></div>       <!-- linke textspalte -->
   <div id="rightmargin"></div>     <!-- rechte textspalte -->
</div>

Der überflüssige Content in leftmargin marschiert einfach über den vertical container hinaus - dh, er passt sich nicht der Menge seines Inhalts an. Was mache ich falsch?

If it helps - hier noch der css code für die relevanten Container:

#left
{
width: 100px;
height: 100%;
position: absolute;
left: 45px;
top: 0px;
background-image: url(left.gif);
background-repeat: repeat-y;
}

#vertical
{
width: 500px;
height: 100%;
position: absolute;
background-color: #505050;
left: 145px;
top: 0px;
border-left: 1px dotted #949494;
border-right: 1px dotted #949494;
}

#leftmargin
{
top: 80px;
left: 20px;
width: 220px;
position: absolute;
}

Wäre über jeglichen Feedback ausgesprochen dankbar *smile*

cheerio,
anna

 

[Maik]

Ich empfehle ein CSS-Layout mit floatenden DIVs, die in einem übergeordneten DIV eingebettet sind, das eine Hintergrundgrafik besitzt, die die drei Spalten (incl. linke / rechte Grafik und den gepunkteten Rahmen der mittleren Spalte) simuliert und vertikal wiederholt wird.

Anmerkung: Opera stellt bei mir die Seite ebenfalls falsch dar (Win2000, Opera 8.5).

 

[aphaean]

Danke für den Hinweis bezüglich Opera ... meiner leidet schlagartig auch darunter - entweder das Problem ist ansteckend, oder ich leide plötzlich unter einem Sehfehler .

Werde es mal versuchen mit der float + Hintergrundgraphik Lösung .... was mich aber ein bisschen davon abschreckt, ist die Resultierende Größe des Hintergrundbildes ... die Graphiken rechts und links sind bereits schon einzeln ziemlich gross ...

Aber auf jeden Fall danke für den Tipp *smile*

cheerio,
anna