Layout Problem -.-

[87er]

Hallo Html Freunde

Hab ein kleines,
sehr dummes Problem mit einem Layout:

(bitte nicht lachen, bin noch am lernen)

body {
  padding: 0px;
  margin: 0px;
  background-color: #0080c0;
}
#inhalt {
  width: auto;
  margin: 20px 170px;
  background-color: #ffffc6;
}
#links {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 130px;
  height: 300px;
  background-color: #ffcc00;
}
#rechts {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 130px;
  height: 300px;
  background-color: #ffcc00;
}

...

<div id="inhalt">...</div>
<div id="links">...</div>
<div id="rechts">...</div>

Wie bekomme ich das Design so hin,
dass die 3 Spalten fest bleiben?
Und wie kann ich bei diesem Layout die gesamt breite angeben?
Hätte es gerne mittig und die größe fest definiert damit sich das design nicht
bei verschiedenen Bildschirmauflösungen verändert.

Schonmal vielen Dank für Hilfe :)

All meine Tests (und ich bin jetzt seit 2 Stunden dran)
haben nicht funktioniert -.-

 

[stromij]

Hi,

ich verstehe nicht genau, was du meinst. Meinst du, das du die drei spalten nebeneinander hast und dann noch, egal wie groß das Fenster/wie hoch die auflösung ist, die Spalten nebeneinander bleiben und nicht verrutschen?

 

[threadi]

Verzichte auf absolute Positionierung. Wenn Du Boxen nebeneinander haben willst, verwende float.

 

[DarkDragon193]

Die gesamte Breite der drei Spalten würde ich angeben, indem ich diese von einem weiteren Div umschließen lasse und diesem dann die gewünschte Breite gebe. Um sie mittig zu stellen verwende man margin: auto; oder ggf. auch margin-left: auto; margin-right: auto;. Und hier auch wieder am besten im umschließenden Tag.

 

[Elroy]

Hallo.

Ein weiteres div ist in diesem Fall nicht nötig.
Gib einfach deinem body die gewünschte Breite und zentriere ihn mit margin: 0 auto;

Gruss
Elroy

 

[87er]

Danke für die Antworten :)

Also ich möchte das Layout so haben das es nicht mehr "mitwächst".
Jetzt passt es sich ja immer der bildschirmauflösung an, das möchte ich nicht.

Und mit Float komme ich grad irgendwie nicht klar.
Hab mir einige Tuts angeguckt und auch getestet, aber es funktioniert nie bei mir.

Könnte mir das jemand am obrigen script zeigen?

Als beispiel möchte ich eine max. gesamtbreite von 800px haben.
der mittlere bereich soll max. 500px breit sein, die spalten links und rechts je 150px.

Ich weiss leider nicht wie ich das erklären kann,
also die 3 spalten sollen mittig zentriert sein. das soll heißen,
wenn die bildschirm auflösung größer als zb die 800px ist,
sollen die 3 spalten trotzdem insgesamt 800px behalten und mittig angezeigt werden.
so das links und rechts halt einfach mehr hintergrund kommt.

Ich habs so immer einfach mit Tabellen gemacht,
aber diesmal bruach bzw möchte ich es in Css haben

Hoffe es gut erklärt zu haben ^^

 

[DarkDragon193]

Eigentlich ganz einfach. Meine Vorgehensweise sähe ungefähr so aus:

body {
  padding: 0px;
  margin: 0px;
  background-color: #0080c0;
  width: 800px;
}
#spalten {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
#spalten .spalte {
  width: 33%;
  margin: 1px;
  display: inline;
  /* oder eben float: left;, nur dann könnte ohne clear: both; links und rechts noch
      ungewollt Text eingefügt werden... bin mir da nicht sicher */
}

Der Gebrauch sollte klar sein. Falls das nicht geht entschuldige ich mich, ich arbeite hier die meiste Zeit theoretisch... ;)

 

[87er]

Bei mir funktioniert es irgendwie nicht.
Hab jetzt:

body {
  padding: 0px;
  margin: 0px;
  background-color: #0080c0;
  width: 800px;
}
#spalten {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
#spalten .spalte {
  width: 33%;
  margin: 1px;
  display: inline;
  /* oder eben float: left;, nur dann könnte ohne clear: both; links und rechts noch
      ungewollt Text eingefügt werden... bin mir da nicht sicher */
}


<div id="inhalt">Test<br /><br />Test</div>
<div id="spalten">Test Links</div>
<div id="spalten.spalte">Test Rechts</div>

 

[mermshaus]

Poste generell bitte immer eine komplette HTML-Seite mit DOCTYPE als Beispiel.

- DOCTYPE-Switch und seine Auswirkungen

 

[Elroy]

Hallo.

Normalerweise gebe ich keine Codebeispiele das es genau für dein Problem bei Google zirka 10.000 Anleitungen gibt.
Aber da du hier in eine falsche Richtung geführt wirst hier mal mein Lösungsansatz.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3 Spalte Layout</title>
<style type="text/css">
html {background-color: #99CCFF;}

body {padding: 0px;
      margin: 0px;
      background-color: #0080c0;
      width: 800px;
      margin: 0 auto;}

#links {width: 150px;
        float: left}

#rechts{width: 150px;
        float: right;}

#inhalt {width: 500px;}
</style>
</head>
<body>
<div id="links">Linke Spalte</div>
<div id="rechts">Rechte Spalte</div>
<div id="inhalt">Inhalt</div>
</body>
</html>

Musst du natürlich noch an deine Verhältnisse anpassen.

Gruss
Elroy

 

[threadi]

In deinem Beispiel, Elroy, hat der Content (#inhalt) eine feste Breite. Das kann man natürlich auch ohne Breite machen, wenn der Topiceröffner das beabsichtigt. Dazu muss man nur beim body und bei #inhalt die Breite weglassen.

 

[Elroy]

Hallo.

Ich weiss, aber ich bin davon ausgegangen:

Als beispiel möchte ich eine max. gesamtbreite von 800px haben.
der mittlere bereich soll max. 500px breit sein, die spalten links und rechts je 150px.

Gruss
Elroy

 

[DarkDragon193]

Oh man, ich hab das falsch verstanden... Ich dachte, die 2 Spalten rechts und links sollen lediglich einen Rand bilden. Kein Wunder, dass ich ihn "in die falsche Richtung geführt" habe...