Hallo zusammen,
ich habe mal wieder ein Problem mit meinen DIV Boxen.
Auf meiner Seite habe ich eine Box in der Größe 800 px x 600 px. Darin liegt u.a. meine Menuebox, die die gleiche Höhe haben soll wie die Hauptbox.
Opera stellt mir das Ganze super dar, Firefox annehmbar und der ie kürzt mir die Box (height: auto), da er "min-height" nicht interpretiert. Gibt es hierfür eine Lösung?
HTML:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=iso-8859-1">
<meta name="language" content="de">
<title>
Leistungen
</title>
<meta name="author" content="Martin">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link rel="stylesheet" href="Style/style_mw.css" type=
"text/css">
</head>
<body>
<div id="hintergrund">
<table class="Haupttabelle" cellpadding="0" cellspacing=
"0">
<tr height="100px">
<td colspan="4">
<img src=
"../Eventtechnik/www/Grafik/puresound_logo_website_800.gif"
width="780" height="102" border="0" alt="">
</td>
</tr>
</table>
<div id="textfeld">
</div>
<div id="untermenue">
<br>
<br>
<a href="index.html">Start</a> <a href="wir.html">
Portrait</a> <a href="angebot.html">Leistungen</a> <a
href="news.html">Neues</a> <a href="links.html">Links</a>
<a href="kontakt.html">Kontakt</a> <a href="agb.html">
AGB</a> <a href="mailto:info@eventtechnik-weishaupt.de">
Email <img src="../Eventtechnik/brief.gif" width="11"
height="9" border="0" alt="Email"></a> <a href=
"impressum.html">Impressum</a>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #FFA500;
width: 100%;
height: 100%;
text-align: center;
margin: 0px 0px 0px 0px;
}
A:LINK {
background-color: transparent;
color: white;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:VISITED {
background-color: transparent;
color: white;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:HOVER {
background-color: orange;
color: black;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:LINK.untermenue {
background-color: smoke white;
color: blue;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
A:VISITED.untermenue {
background-color: silver;
color: blue;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
A:HOVER.untermenue {
background-color: orange;
color: black;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
p {
background-color: transparent;
color: black;
text-decoration: none;
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 13,5px;
}
h1 {
background-color: transparent;
color: black;
text-decoration: none;
font-weight: 600;
font-size: 14px;
font-family: sans-serif;
line-height: 16px;
}
#hintergrund {
background-color: silver;
z-index: 0;
width: 780px;
height: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px 0px 0px 0px;
text-align: left;
min-height: 600px;
}
#untermenue {
top: 102px;
left: 0px;
height: auto;
width: 150 px;
background-color: gray;
position: absolute;
padding-left: 20px;
min-height: 498px;
}
#textfeld {
top: 180px;
left: 160px;
height: auto;
width: 620px;
background-color: transparent;
position: absolute;
}
table.Haupttabelle {
width: 100%;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px;
}
td.Menue_Leerspalte {
border-collapse: separate;
width: 20px;
background-color: Gray;
}
td.Menue {
border-collapse: separate;
width: 130px;
background-color: Gray;
}
td.Textfeld {
background-color: silver;
width: 650px:
text-align: left;
font: normal;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 500;
}
tr.menue {
background-color: gray;
width: 100%;
text-align: center;
vertical-align: middle;
}
Vollansicht: Höheneinstellung Von <div> Im Ie
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
Blindgif?
Hi Worgan,
nett, dass du dein komplettes CSS hier eingestellt hast.
Ehrlich gesagt, ich hab gar nicht die Zeit mir das alles anzuschauen.
IE interpretiert kein min-height, richtig!
Lösungsvorschlag:
Aufbau mit DIV-Containern:
Headerbereich
Contentbereich mit gewünschter Höhe/Breite, darin
Menü mit float: left und
einem Container für den eigentlichen Seiteninhalt mit margin-left: Menübreite welcher sich dann rechts vom Menü anordnet.
Danach Footerbereich.
Der Contentbereich ist somit immer gleich hoch für Menü und Inhalt, das Menü ist immer Links und der Inhalt rechts daneben fließt nicht unter ein zu kurzes Menü. Willst du noch eine andere Hintergrundfarbe für das Menü, definierst du den kompletten Contentbereich mit dieser Farbe und den Bereich, der den eigentlichen Inhalt darstellt mit dessen Hintergrundfarbe.
So müsste das ganze kompatibel zu alle Browsern funktionieren.
nett, dass du dein komplettes CSS hier eingestellt hast.
Ehrlich gesagt, ich hab gar nicht die Zeit mir das alles anzuschauen.
IE interpretiert kein min-height, richtig!
Lösungsvorschlag:
Aufbau mit DIV-Containern:
Headerbereich
Contentbereich mit gewünschter Höhe/Breite, darin
Menü mit float: left und
einem Container für den eigentlichen Seiteninhalt mit margin-left: Menübreite welcher sich dann rechts vom Menü anordnet.
Danach Footerbereich.
Der Contentbereich ist somit immer gleich hoch für Menü und Inhalt, das Menü ist immer Links und der Inhalt rechts daneben fließt nicht unter ein zu kurzes Menü. Willst du noch eine andere Hintergrundfarbe für das Menü, definierst du den kompletten Contentbereich mit dieser Farbe und den Bereich, der den eigentlichen Inhalt darstellt mit dessen Hintergrundfarbe.
So müsste das ganze kompatibel zu alle Browsern funktionieren.
Yep, Ede's Beitrag möchte ich so bestätigen.
(Ich wurde es ziemlich genau so machen, bzw. habe das so auch schon umgesetzt.)
cu
Conny
(Ich wurde es ziemlich genau so machen, bzw. habe das so auch schon umgesetzt.)
cu
Conny
Hallo !
Wenn ich mal dazwischen fragen darf.
so habe ich es auch gemacht. Nur möchte ich gerne den Footerbereich "immer" unter dem Menübereich beginnen, egal wie kurz/breit der eigentliche Seiteninhalt-Container ist. Mit <br clear="all"> oder andere <br>'s bekomme ich das nicht hin.
Weiss jemand dazu eine Lösung ?
Gruß
alfonx
Wenn ich mal dazwischen fragen darf.
ZITAT(Ede @ 07.12.2004 - 11:30)
Lösungsvorschlag:
Aufbau mit DIV-Containern:
Headerbereich
Contentbereich mit gewünschter Höhe/Breite, darin
Menü mit float: left und
einem Container für den eigentlichen Seiteninhalt mit margin-left: Menübreite welcher sich dann rechts vom Menü anordnet.
Danach Footerbereich.
Aufbau mit DIV-Containern:
Headerbereich
Contentbereich mit gewünschter Höhe/Breite, darin
Menü mit float: left und
einem Container für den eigentlichen Seiteninhalt mit margin-left: Menübreite welcher sich dann rechts vom Menü anordnet.
Danach Footerbereich.
so habe ich es auch gemacht. Nur möchte ich gerne den Footerbereich "immer" unter dem Menübereich beginnen, egal wie kurz/breit der eigentliche Seiteninhalt-Container ist. Mit <br clear="all"> oder andere <br>'s bekomme ich das nicht hin.
Weiss jemand dazu eine Lösung ?
Gruß
alfonx
Hallo,
ich hatte mal eine Beispielseite gebastelt, kannst Du Dir HIER anschauen.
Guckst Du mal im Quelltext wie es gelöst wurde, vielleicht hilft es Dir weiter...
cu
Conny
ich hatte mal eine Beispielseite gebastelt, kannst Du Dir HIER anschauen.
Guckst Du mal im Quelltext wie es gelöst wurde, vielleicht hilft es Dir weiter...
cu
Conny
ZITAT(Conny @ 07.12.2004 - 15:01)
Hallo,
ich hatte mal eine Beispielseite gebastelt, kannst Du Dir HIER anschauen.
Guckst Du mal im Quelltext wie es gelöst wurde, vielleicht hilft es Dir weiter...
cu
Conny
ich hatte mal eine Beispielseite gebastelt, kannst Du Dir HIER anschauen.
Guckst Du mal im Quelltext wie es gelöst wurde, vielleicht hilft es Dir weiter...
cu
Conny
Hallo,
danke, an diesem Muster hatte ich mich auch orientiert, aber es löst mein Problem nicht. Um es zu verdeutlichen öffne dieses Seite im Vollbildmodus und du siehst, dass der footerbereich neben der Menü/Auswahlbereich sich schiebt. er Soll aber immer unter dem grünen Auswahl bleiben.
Gruß
alfonx
Hi,
Lies mal genau was ich geschrieben habe!
Erster Div-Container, der Header
Zweiter Div-Container Content (beinhaltet Menü links angeordnet und Inhalt rechts)
Dann schließt du diesen zweiter Container!
und packst darunter den Footerbereich wieder in einen Div-Container, dem kannst du auch ein clear: all mitgeben und gut.
Ähnliches hab ich auf meiner Seite und da funktioniert es doch auch!
http://home.arcor.de/e.kuchelmeister/
Allerdings hab ich da das margin-left für den Textteil noch nicht gemacht. Wenn ich mal wieder Lust und Zeit hab
Lies mal genau was ich geschrieben habe!
Erster Div-Container, der Header
Zweiter Div-Container Content (beinhaltet Menü links angeordnet und Inhalt rechts)
Dann schließt du diesen zweiter Container!
und packst darunter den Footerbereich wieder in einen Div-Container, dem kannst du auch ein clear: all mitgeben und gut.
Ähnliches hab ich auf meiner Seite und da funktioniert es doch auch!
http://home.arcor.de/e.kuchelmeister/
Allerdings hab ich da das margin-left für den Textteil noch nicht gemacht. Wenn ich mal wieder Lust und Zeit hab
Hallo,
alles klar, das Problem ist -in Deinem Fall- wenn die Auswahlbox größer ist als der Inhalt der Content-Box, verschiebt sich der Footer-Bereich an unerwüchter Stelle.
Um das zu Lösen kannst Du entweder das machen was Ede schreibt; es gibt also keine Auswahlbox, die Auswahlmöglichkeiten fließen in die Contentbox mit ein, oder die Auswahlbox bekommt mit dem Float-left noch eine feste Weite, die Contentbox ein Margin-Left die diese Weite (oder etwas mehr) entspricht.
Als Beispiel die geänderte Beispielseite
Deutlich zu erkennen ist der Spalt zwischen Auswahl und Content (margin-left = 1px mehr als die Weite der Auswahlbox) und, ist der Content kürzer als die Auswahlbox, wird der 'Nackte' Body bereich sichtbar (Weiß); ein Break-clear-all verhindert das 'hochrutschen' des Footer Bereichs.
Wenn Content und Body gleichermaßen eingefärbt werden (und man läßt die Border weg) wird der höhenunterschied 'unsichtbar' gemacht.
cu
Conny
alles klar, das Problem ist -in Deinem Fall- wenn die Auswahlbox größer ist als der Inhalt der Content-Box, verschiebt sich der Footer-Bereich an unerwüchter Stelle.
Um das zu Lösen kannst Du entweder das machen was Ede schreibt; es gibt also keine Auswahlbox, die Auswahlmöglichkeiten fließen in die Contentbox mit ein, oder die Auswahlbox bekommt mit dem Float-left noch eine feste Weite, die Contentbox ein Margin-Left die diese Weite (oder etwas mehr) entspricht.
Als Beispiel die geänderte Beispielseite
Deutlich zu erkennen ist der Spalt zwischen Auswahl und Content (margin-left = 1px mehr als die Weite der Auswahlbox) und, ist der Content kürzer als die Auswahlbox, wird der 'Nackte' Body bereich sichtbar (Weiß); ein Break-clear-all verhindert das 'hochrutschen' des Footer Bereichs.
Wenn Content und Body gleichermaßen eingefärbt werden (und man läßt die Border weg) wird der höhenunterschied 'unsichtbar' gemacht.
cu
Conny
E ist doch jedesmal wieder erstaunlich wie schnell man hier Hilfe bekommt!Arbeitet Ihr eigentlich nebenher noch was oder wohnt Ihr schon hier im Forum?
Jetzt muß ich mich nur noch an die Umsetzung der Vorschläge machen.
Auf jeden Fall erst mal vielen Dank.
Viele Grüße aus Karlsruhe
Martin
ZITAT(Worgan @ 07.12.2004 - 17:14)
E ist doch jedesmal wieder erstaunlich wie schnell man hier Hilfe bekommt!Ja, wenn die Kristalkugel hochglanz poliert sind, schaffen wir es fast zu antworten bevor die Frage gestellt wird.
cu
Conny
So weit so gut, ich habe jetzt die Vorschläge von Ede umgesetzt.
Der ie und Opera machen ihre Arbeit gut, lediglich der Firefox verschiebt die Box mit dem Inhalt nach rechts und nach unten.
Ich poste noch mal mein aktuelles Coding, vieleicht findet ja jemand von Euch den Fehler.
danke schon mal im Voraus.
Martin
Html:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=iso-8859-1">
<meta name="language" content="de">
<title>
Leistungen
</title>
<meta name="author" content="Martin">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link rel="stylesheet" href="Style/style_mw.css" type=
"text/css">
</head>
<body>
<div id="seitenformat">
<div id="seitenkopf">
<img src=
"../Eventtechnik/www/Grafik/puresound_logo_website_800.gif"
width="780" height="102" border="0" alt=
"PureSound Logo">
</div>
<div id="inhalt">
<br>
<br>
<br>
<a href="index.html">Start</a> <a href="wir.html">
Portrait</a> <a href="angebot.html">Leistungen</a> <a
href="news.html">Neues</a> <a href="links.html">Links</a>
<a href="kontakt.html">Kontakt</a> <a href="agb.html">
AGB</a> <a href="mailto:info@eventtechnik-weishaupt.de">
Email <img src="../Eventtechnik/brief.gif" width="11"
height="9" border="0" alt="Email"></a> <a href=
"impressum.html">Impressum</a>
<div id="textfeld">
Ich teste jetzt mal den Inhalt
</div>
</div>
<div id="fussbereich">
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #FFA500;
width: 100%;
height: 100%;
text-align: center;
margin: 0px 0px 0px 0px;
}
A:LINK {
background-color: transparent;
color: white;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:VISITED {
background-color: transparent;
color: white;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:HOVER {
background-color: orange;
color: black;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:LINK.untermenue {
background-color: smoke white;
color: blue;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
A:VISITED.untermenue {
background-color: silver;
color: blue;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
A:HOVER.untermenue {
background-color: orange;
color: black;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
p {
background-color: transparent;
color: black;
text-decoration: none;
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 13,5px;
}
h1 {
background-color: transparent;
color: black;
text-decoration: none;
font-weight: 600;
font-size: 14px;
font-family: sans-serif;
line-height: 16px;
}
#seitenformat {
z-index: 0;
width: 780px;
height: auto;
position: relative;
background-color: transparent;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px 0px 0px 0px;
margin-bottom: 0px;
}
#seitenkopf {
z-index: 1;
width: 780px;
height: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px 0px 0px 0px;
}
#inhalt {
top: 102px;
left: 0px;
width: 780 px;
background-color: gray;
position: absolute;
padding-left: 20px;
text-align: left;
float: left;
height: 500px;
}
#textfeld {
top: 0px;
height: 500px;
width: 630px;
background-color: silver;
position: absolute;
margin-left: 130px;
padding-left: 20px;
padding-top: 25px;
}
#fussbereich {
z-index: 0;
width: 780px;
top: 500px;
height: 10px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
}
Der ie und Opera machen ihre Arbeit gut, lediglich der Firefox verschiebt die Box mit dem Inhalt nach rechts und nach unten.
Ich poste noch mal mein aktuelles Coding, vieleicht findet ja jemand von Euch den Fehler.
danke schon mal im Voraus.
Martin
Html:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=iso-8859-1">
<meta name="language" content="de">
<title>
Leistungen
</title>
<meta name="author" content="Martin">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link rel="stylesheet" href="Style/style_mw.css" type=
"text/css">
</head>
<body>
<div id="seitenformat">
<div id="seitenkopf">
<img src=
"../Eventtechnik/www/Grafik/puresound_logo_website_800.gif"
width="780" height="102" border="0" alt=
"PureSound Logo">
</div>
<div id="inhalt">
<br>
<br>
<br>
<a href="index.html">Start</a> <a href="wir.html">
Portrait</a> <a href="angebot.html">Leistungen</a> <a
href="news.html">Neues</a> <a href="links.html">Links</a>
<a href="kontakt.html">Kontakt</a> <a href="agb.html">
AGB</a> <a href="mailto:info@eventtechnik-weishaupt.de">
Email <img src="../Eventtechnik/brief.gif" width="11"
height="9" border="0" alt="Email"></a> <a href=
"impressum.html">Impressum</a>
<div id="textfeld">
Ich teste jetzt mal den Inhalt
</div>
</div>
<div id="fussbereich">
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #FFA500;
width: 100%;
height: 100%;
text-align: center;
margin: 0px 0px 0px 0px;
}
A:LINK {
background-color: transparent;
color: white;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:VISITED {
background-color: transparent;
color: white;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:HOVER {
background-color: orange;
color: black;
display: block;
width: 130px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 14px;
}
A:LINK.untermenue {
background-color: smoke white;
color: blue;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
A:VISITED.untermenue {
background-color: silver;
color: blue;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
A:HOVER.untermenue {
background-color: orange;
color: black;
display: block;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 12px;
}
p {
background-color: transparent;
color: black;
text-decoration: none;
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 13,5px;
}
h1 {
background-color: transparent;
color: black;
text-decoration: none;
font-weight: 600;
font-size: 14px;
font-family: sans-serif;
line-height: 16px;
}
#seitenformat {
z-index: 0;
width: 780px;
height: auto;
position: relative;
background-color: transparent;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px 0px 0px 0px;
margin-bottom: 0px;
}
#seitenkopf {
z-index: 1;
width: 780px;
height: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px 0px 0px 0px;
}
#inhalt {
top: 102px;
left: 0px;
width: 780 px;
background-color: gray;
position: absolute;
padding-left: 20px;
text-align: left;
float: left;
height: 500px;
}
#textfeld {
top: 0px;
height: 500px;
width: 630px;
background-color: silver;
position: absolute;
margin-left: 130px;
padding-left: 20px;
padding-top: 25px;
}
#fussbereich {
z-index: 0;
width: 780px;
top: 500px;
height: 10px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
}
Hi Martin,
beim besten Willen, da steht viel zu viel unnötiges Zeug drin (position, z-index...)
Warum nicht einfach, wenn's umständlich auch geht
Hier mein ganz einfaches Grundgerüst:
Das kannst du nun mit notwendigen Attributen erweitern.
Ausserdem: Könntest du bitte nur die für die Frage notwendigen CSS-Formatierungen posten und nicht alles andere noch zusätzlich?
Macht Hilfestellung nicht gerade einfacher.
Ich versteh noch immer nicht, warum du nicht genau das getan hast, was ich geschrieben haben, siehe mein Listing. Hab ich mir halt die Arbeit gemacht und dir das Grundgerüst geliefert
Das wird im Firefox angezeigt, wie gewünscht.
beim besten Willen, da steht viel zu viel unnötiges Zeug drin (position, z-index...)
Warum nicht einfach, wenn's umständlich auch geht
Hier mein ganz einfaches Grundgerüst:
QUELLTEXT
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test mit Div-Containern</title>
<meta name="author" content="Admin">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
.Kopf {
background: #0080FF;
width:780px;
height:100px;
}
.Content {
background: #808080;
width:780px;
height:400px;
}
.Text {
background: #FFFFFF;
margin-left: 200px;
height:400px;
overflow: auto;
}
.Navigation {
float:left;
color:white;
}
.Footer {
background: #0080FF;
width:780px;
height:100px;
overflow: auto;
}
-->
</style>
</head>
<body>
<div class="Kopf">
<h1>Hier ist die Kopfzeile</h1>
</div>
<div class="Content">
<div class="Navigation">
<p><a href="#">Link1</a></p>
<p><a href="#">Link2</a></p>
<p><a href="#">Link3</a></p>
</div>
<div class="Text">
<h2>Textbereich</h2>
<p>Hier steht der Text drinne</p>
</div>
</div>
<div class="Footer">
<p>Last but noch least die Fusszeile</p>
</div>
</body>
</html>
<html>
<head>
<title>Test mit Div-Containern</title>
<meta name="author" content="Admin">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
.Kopf {
background: #0080FF;
width:780px;
height:100px;
}
.Content {
background: #808080;
width:780px;
height:400px;
}
.Text {
background: #FFFFFF;
margin-left: 200px;
height:400px;
overflow: auto;
}
.Navigation {
float:left;
color:white;
}
.Footer {
background: #0080FF;
width:780px;
height:100px;
overflow: auto;
}
-->
</style>
</head>
<body>
<div class="Kopf">
<h1>Hier ist die Kopfzeile</h1>
</div>
<div class="Content">
<div class="Navigation">
<p><a href="#">Link1</a></p>
<p><a href="#">Link2</a></p>
<p><a href="#">Link3</a></p>
</div>
<div class="Text">
<h2>Textbereich</h2>
<p>Hier steht der Text drinne</p>
</div>
</div>
<div class="Footer">
<p>Last but noch least die Fusszeile</p>
</div>
</body>
</html>
Das kannst du nun mit notwendigen Attributen erweitern.
Ausserdem: Könntest du bitte nur die für die Frage notwendigen CSS-Formatierungen posten und nicht alles andere noch zusätzlich?
Macht Hilfestellung nicht gerade einfacher.
Ich versteh noch immer nicht, warum du nicht genau das getan hast, was ich geschrieben haben, siehe mein Listing. Hab ich mir halt die Arbeit gemacht und dir das Grundgerüst geliefert
Das wird im Firefox angezeigt, wie gewünscht.
Asche über mein Haupt.Entschuldige bitte die Umstände die ich Dir verursacht habe. Ich habe das Ganze immer gerade nebenher "umgesetzt" und hatte wohl noch den halben Kopf auf meinen Baustellen.
Mittlerweile habe ich alles in Ruhe berarbeitet und siehe da, es funktioniert! 
Danke nochmal.
Martin
Hi Martin,
schön, dass es geklappt hat.
Ich habe interessanterweise festgestellt (wenn man/frau die einzelnen div-Container mit Hintergrundfarbe belegt), dass der FireFoxe immer einen vertikalen Abstand einbaut und dieses Verhalten auch mit padding oder margin nicht beeinflußt werden kann (der MS-IE macht das nicht).
Erst nach dem Einfügen der Attribute overflow: auto rückt er die Container zusammen.
Hab seither immer mit der gleichen Hintergrundfarbe gearbeitet, so dass ich dies nie bemerkt hab.
Nur mal als Ergänzung, warum die overflow-Attribute drin sind.
schön, dass es geklappt hat.
Ich habe interessanterweise festgestellt (wenn man/frau die einzelnen div-Container mit Hintergrundfarbe belegt), dass der FireFoxe immer einen vertikalen Abstand einbaut und dieses Verhalten auch mit padding oder margin nicht beeinflußt werden kann (der MS-IE macht das nicht).
Erst nach dem Einfügen der Attribute overflow: auto rückt er die Container zusammen.
Hab seither immer mit der gleichen Hintergrundfarbe gearbeitet, so dass ich dies nie bemerkt hab.
Nur mal als Ergänzung, warum die overflow-Attribute drin sind.
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.