zwei oder drei Spalten innerhalb eines Containers

[pod-o-mart]

Hallo,
ich habe das Design soweit fertig, siehe http://podolak.net/css, es unterscheidet sich zwischen IE und FF geringfügig, ich habe zwei CSS-Dateien definiert.

Wie fügt man hier am Besten zwei oder drei Spalten ein? ich beiße mir damit am IE die Zähne aus.

Die Navigation habe ich bereits eingefügt, ich weiß noch nicht, ob ich dafür eine extra Spalte einfügen soll?!

Rechts soll eine Spalte mit festen Seiten entstehen, die Spalte in der Mitte soll eine flexible Breite erhalten.

Ich habe zuvor schon anhand von margin:left und margin:right mittig eine Textbox erstellt, dass größte Problem war hier, dass der Container sich nicht an die Höhe der Textbox angepasst hat, sie überlappte einfach.

Hier mein das CSS für http://podolak.net/css:

Code: Alles auswählen

body, p a {color: black; background-color: white; font-size: 100.01%; font-family: Helvetica,Arial,sans-serif; margin: 20px;}   
.Seite {text-align: left; margin: 0 auto; width: relative; min-height: 100%;}

#kopfleiste {background: #000080; background: url(verlauf2.jpg); position:relative; top:50px; z-index:1;}
.ro {background:url(ro.gif) top right no-repeat; z-index:3}
.lo {background:url(lo.gif) top left no-repeat; z-index:3}
.ru {background:url(ru.gif) bottom right no-repeat; z-index:3}
.lu {background:url(lu.gif) bottom left no-repeat; z-index:3}

.schatten_unten {background:url(schatten_unten.jpg) bottom center; background-repeat: repeat-x; z-index:2}
.schatten_rechts {background:url(schatten_rechts.jpg) right center; background-repeat: repeat-y; z-index:2}

#abstand_deko_oben {position:absolute; left:48px; top:25px; right:80px;}
#abstand_deko_unten {background:url(waagerecht.gif); position:absolute; left:177px; bottom:42px; right:80px; height:25px}

#deko_oben {background:url(waagerecht.gif); background-position:absolute; width: 100%; z-index:3; height: 25px; background-repeat: repeat-x;}
#deko_unten {background:url(waagerecht.gif); background-position:absolute; width: 100%; z-index:3; height: 25px; background-repeat: repeat-x;}

#abstand_senkrecht {background:url(waagerecht.gif); position:absolute; left:152px; bottom:67px; top:127px; width:25px}

#senkrecht {background:url(senkrecht.gif); z-index:3; height:100%; width: 25px; background-repeat: repeat-y;}

#deko_lo {background:url(links.gif); position:absolute; left: 30px; top: 25px; z-index:3; height:25; width: 18px; background-repeat: no-repeat}
#deko_ro {background:url(rechts.gif); position:absolute; right: 65px; top: 25px; z-index:3; height:25px; width: 15px; background-repeat: no-repeat}
#deko_ru {background:url(rechts.gif); position:absolute; right: 65px; bottom: 42px; z-index:3; height:25px; width: 15px; background-repeat: no-repeat}
#deko_lu {background:url(lunten.gif); position:absolute; left: 152px; bottom: 42px; z-index:3; height:25px; width: 25px; background-repeat: no-repeat}

#menu {background:url(button_hintergr.jpg); position:absolute; left: 50px; top: 75px; z-index:3;
background-repeat: no-repeat; color:white; height: 25px; width: 100px; vertical-align: 50%; font-weight: bold; float:left}
#menu2 {background:url(button_hintergr.jpg); position:relative; left: 0px; top: 5px; z-index:3;
background-repeat: no-repeat; color:white; height: 25px; width: 100px; vertical-align: 50%; font-weight: bold; margin-top:2px; float:left}
#zeiger {background:url(waagerecht.gif); position:relative; left: 0px; top: 5px; z-index:3;
height:25px; width: 102px; background-repeat: repeat-x; font-weight: bold; margin-top:2px}

#deko_start {background:url(menu.gif); position:absolute; left: 152px; top: 102px; z-index:3; height:36px; width: 25px; background-repeat: no-repeat}
#links_zeiger_start {background:url(links.gif); position:absolute; left: 32px; top: 102px; z-index:3; height:25px; width: 18px; background-repeat: no-repeat}


#abstand_hauptfenster {position:relative; left:250px; right:150px; top:127px; bottom:150px}
#hauptfenster {position:relative; border:1px solid #000000; -moz-border-radius:10px; background-color: white; font-size: 10px; margin-left:180px; margin-right:200px; top:75px; min-width:250px}


Und hier der HTML

Code: Alles auswählen

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>neue Seite</title>
<link rel="stylesheet" type="text/css" href="design/design.css">
<!--[if IE]>
<style type="text/css">@import url(design/design_ie.css);</style>
<![endif]-->
</head>

<body alink="#ffffff" link="#ffffff" vlink="#ffffff">
<div style="position: absolute; top: 15px; left: 25px;"><img src="design/martinpodolak.jpg" height="52" width="531"></div>

<div class="seite">

<div id="kopfleiste">

<div class="schatten_unten">
<div class="schatten_rechts">

<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">

<div id="deko_lo"></div>
<div id="deko_ro"></div>
<div id="deko_lu"></div>
<div id="deko_ru"></div>

<div id="abstand_deko_oben"><div id="deko_oben"></div></div>

<div id="menu"> Menü
<div id="zeiger"> Startseite</div>
<div id="menu2"> Dokumente</div>
<div id="menu2"> Reisen</div>
<div id="menu2"> Projekte</div>
<div id="menu2"> Links</div>
<div id="menu2"> Freies Feld</div>
<div id="menu2"> Login</div>
<div id="menu2"> Kontakt</div>
<div id="menu2"> Blog</div></div>

<div id="deko_start"></div>
<div id="links_zeiger_start"></div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>l<br><br><br><br><br><br><br><br><br>
<div id="abstand_senkrecht"><div id="senkrecht"></div></div>
<div id="abstand_deko_unten"><div id="deko"></div></div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

[Laus]

Hab mich mal mit dem Thema näher beschäftigt da ich so etwas ähnliches für einen Kunden brauche.
Hier mal der vereinfachte Code

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body{margin:0;padding:0;}

#wrapper{
background: url(5.gif);background-repeat: repeat-y; background-position: left ;
height:1%;weight:auto;
margin:0;
}
#box1{position:relative;
background: url(2.gif);background-repeat: no-repeat; background-position: right; #cde0eb;
height: 136px;
padding:0px;
margin:0 0px 0 0px;}

#box2{
position: absolute; top:136px; left:0px;
background: url(5.gif);background-repeat: repeat-y; background-position: top 0px; #cde0eb;
padding:10px 40px 10px 30px;
margin:0px 0 0 0;
width:130px;
}

#box3 {
position:relative;
background: url(6.gif);background-repeat: repeat-y; background-position: right ;
padding:10px 250px 10px 10px;
margin:0 0px 0 200px;}

#box4{
background: url(4.gif);background-repeat: no-repeat; background-position: right ; #cde0eb;
clear:booth;
height:86px
padding:10px;
margin:0 0px 0 0px;}
-->
</style>
</head>
<body>
<div id="wrapper">

<div id="box1"><img src="1.gif" width="575" height="136" border="0" alt=""></div>

<div id="box2">
<img src="7.gif" width="200" height="284" border="0" alt="">  </div>

<div id="box3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate
  velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros
  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
  te feugait nulla facilisi. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  zzril delenit augue duis dolore te feugait nulla facilisi.</p></div>

<div id="box4"><img src="3.gif" width="230" height="86" border="0" alt=""></div>
</div>
</body>
</html>

Das ganze mit den Grafiken dazu kannst Du hier downloaden.
Die Navigation kannst Du in box2 als Liste einfügen und dieser Liste dann den passenden Hintergrund zuweisen. Die Teaser rechts kannst Du absolut oder mit float:right positionieren. Mit den von mir erstellten Grafiken klappt das ganze nur bis zu einer auflösung von 1024px. Darum solltest du die langen Hintergrundbilder mindestens 1200px lang machen.
Dies ist natürlich keine 100 Prozentige Copie aber zumindest ein Ansatz der in allen Browsern funktioniert.

[pod-o-mart]

Vielen Dank für deinen Vorschlag.
Ich arbeite an der Webseite nun anhand deines Vorschlags weiter (http://podolak.net/css).
Eigentlich wollte ich zuvor noch durch viele sehr kleine Grafiken Platz sparen.
Ausprobiert sieht es dann so aus, dass eine Webseite mit einigen großen Grafiken sogar schnellere Ladezeiten hat.
Das ist alles sehr gut so, zumal es auf IE und FF gleich gut läuft.