css horizontal

[Jule]

hallo,
ich habe ziemliche probleme mein 750 width, horizontal-layout zusammen zu bekommen wie vorgestellt.
eigentlich sollte es vier-spaltig horizontal werden:
ganz oben ein bild, width 750px und height 100,
direkt daran anschliessend die navigation - auch horizontal,
dann der content bereich, eigentlich mit einer min-width (was ich für den IE nicht hinbekomme).
am ende der footer der mit dem seitenende abschliessen soll, egal wieviel inhalt im content div.
anbei das was ich bisher wild zusammengeschrieben/gesammelt habe, im IE haben weder footer noch navi die gesammte breite des wrapper (container) und schliessen so nach rechts nich ab.
vielen dank für die hilfe!

/* global styles
-----------------------------------------------------------------------------*/

* { margin:0; padding:0; border:0; }

body {
 font:62,5% arial, helvetica, sans-serif
 text-align:center;
 margin:0px 10px;
 background:#666 url(../img/shadow-back.gif) repeat-y center;
 }
h1 {
 color:#5F6469;
 background-color:#F4F4F4;
 font:bold 2em/1.5em arial, helvetica, sans-serif;
 margin:0 0 0.5em 0;
 }
h3 {
 color:#5F6469;
 background-color:#D4D4D4;
 font:normal 1em/1.5em arial, helvetica, sans-serif;
 padding:0.1em 0 0 0.55em;
 margin:1.5em 0 0 0;
 }
h4 {
 color:#5F6469;
 font:bold 1.3em/1.3em arial, helvetica, sans-serif;
 margin:1.5em 0 0.2em 0;
 }
h5 {
 color:#4A525A;
 margin:1em 0 0.5em 0;
 font:normal 1em/0.5em arial, helvetica, sans-serif;
 }
p {
 margin:0 0 15px 0;
 }
b {
 color:#4D5257;
 }
table {
 border-collapse:collapse;
 }
td {
 border:1px solid grey;
 }

/* divs
-----------------------------------------------------------------------------*/

/*--- centering */

#wrapper {
 height:100%;
 width:740px;
 margin-top:1px;
 margin-bottom:0px;
 margin-right:auto;
 margin-left:auto;
 padding:0px;
 text-align:left;
 border-left:2px solid #ADADAD;
 border-right:2px solid #ADADAD;
 background-color:#F4F4F4;
 }

/*--- banner */

#banner {
 height:100px;
 background-color:#F4F4F4;
 }
#banner img {
 display:block;
 }
#banner h1 {
 display:none;
 font-size:1em;
 }

/*--- topnavi */

#topnavi {
 color:#4A525A;
 float:left;
 width:100%;
 border-bottom:1px solid #4A525A;
 border-top:1px solid #4A525A;
 background-color:#818987;
 }
#topnavi ul {
 padding-left:0px;
 list-style-type: none;
 }
#topnavi li {
 border-left:1px solid #4A525A;
 }
#topnavi ul li {
 display: block;
 float:left;
 font: 0.8em/20px arial, helvetica, sans-serif;
 text-align:center;
 }
#topnavi a {
  display:block;
 padding:0px 15px;
  background-color:#818987;
  text-decoration:none;
 }
#topnavi a:link, #topnavi a:visited {
 color:#F4F4F4;
 text-decoration:none;
 }
#topnavi a:hover {
 background-color:#A8ADAC;
 color:#F4F4F4;
 }
#topnavi .red {
 background-color:#CC0000;
 }
#topnavi .border {
 border-right:1px solid #4A525A;
 }

/*-- content */

#content {
 height:100%;
 padding:10px;
 color:#4A525A;
 margin:30% 0 0 0;
 width:740px;
 }

/*--- footer */

#footer {
 width:740px;
 padding:0px;
 color:#4A525A;
 text-align:center;
 font:.7em/1.5em arial, helvetica, sans-serif;
 border-top: 1px solid #96958B;
 background-color:#ccc;
  }

[MudGuard]

Hi,

ich habe ziemliche probleme mein 750 width, horizontal-layout zusammen zu bekommen wie vorgestellt.
eigentlich sollte es vier-spaltig horizontal werden:

Was meinst Du mit vier-spaltig horizontal?

ganz oben ein bild, width 750px und height 100,
direkt daran anschliessend die navigation - auch horizontal,
dann der content bereich, eigentlich mit einer min-width (was ich für den IE nicht hinbekomme).
am ende der footer der mit dem seitenende abschliessen soll, egal wieviel inhalt im content div.

Also 4 untereinanderliegende Teile. Keine Spalten.

Aber irgendwas wolltest Du doch mit vier-spaltig.

Paßt nicht zusammen.

Erklär das mal genauer.

cu,
Andreas

[Jule]

hi, ja - du hast recht, da hab ich mich falsch ausgedrückt. 4 untereinander liegende teile möchte ich. (ging davon aus das das gleich 4 horizontale spalten wären?)
danke das du mich drauf aufmerksam machst

[Peter Müller]

Schau dir mal folgende Webseite an:

Ungestaltete Beispielseite (nur HTML, ohne CSS) und dann dieselbe Seite ...

1.  ... mit einfacher Navigation

2. ... mit Tabbed-Navigation

3. ... mit senkrechter Navigation

Allen drei Seiten liegt dasselbe HTML mit folgenden div-Bereiche zu Grunde:

• #wrapper als Schutzumschlag
• #kopfbereich (Logo und Slogan)
• #navibereich (Die Navigation)
• #textbereich (Der Inhalt)
• #fussbereich (Adresse etc.)

Ist das in etwa so, wie du dir das vorstellst? Nicht von Farbe und Art der Navigation (Reiter) etc. her, sondern vom Aufbau.

[Jule]

1.  ... mit einfacher Navigation

2. ... mit Tabbed-Navigation

danke, ja - das ist was ich mir vorstelle. allerdings soll der footer immer am seitenende (fensterende (aber nicht position:fixed;) da der content div auf fensterhöhe oder textinhalt des content bereichs sich automatisch anpassen soll (min-height:100% ?)
entsprechende der header ganz oben im fenster, aber auch nicht position:fixed;
eigentliche frage also im klartext:
was muss ich eingeben damit sich der content bereich immer auf mind. fensterhöhe/platz zwischen header/menue - content - footer fensterhöhe anpasst?
vielen dank!

[at]

Hallo.

allerdings soll der footer immer am seitenende (fensterende (aber nicht position:fixed;) da der content div auf fensterhöhe oder textinhalt des content bereichs sich automatisch anpassen soll (min-height:100% ?)

Hast du diese Angabe ausprobiert? Falls ja, für welche Elemente. Außerdem willst die Fußzeile doch offenbar absolut positionieren.

entsprechende der header ganz oben im fenster, aber auch nicht position:fixed;

Ergibt sich das nicht ohne jedes Zutun?

was muss ich eingeben damit sich der content bereich immer auf mind. fensterhöhe/platz zwischen header/menue - content - footer fensterhöhe anpasst?

Du solltest dem Hauptteil unten einen Rand verpassen, damit die Fußzeile nicht den Inhalt überdeckt.
MfG, at

[Jule]

habe ne alternative möglichkeit gefunden und den css code komplett neu geschrieben, jetzt klappts - danke

[at]

Hallo.

habe ne alternative möglichkeit gefunden und den css code komplett neu geschrieben, jetzt klappts - danke

Würdes es dir viel ausmachen, diese Alternative hier näher auszuführen, so dass sie als Lösung mit diesen Thread archiviert wird und damit später Suchenden zur Verfügung steht?
MfG, at