M
Maik
Das pre-Element dient in dem in dem Beispiel lediglich zur Auszeichnung des Quellcodes 
mfg Maik
mfg Maik
✔ CSS-Layout Höhe ist größer als 100%
- Themenstarter Necro_nomicon
- Beginndatum
- Status
Necro_nomicon
Erfahrenes Mitglied
Ja, bin ich grad draufgekommen
dachte ist was neues *g*
Jedenfalls ist es so, dass dieser Aufbau sich ueber ein Hintergrundbild definiert.
Dadurch funktioniert es auch. Soweit so gut.
Wenn ich nun die diversen anderen div-Tags einarbeite, dann funkt das mit dem Inhalt, aber natuerlich nicht mit denen, die ein Hintergrundbild haben, weil das Hintergrund vom body vorrangig ist..
Tja, Notloesung waere fuer den inneren Bereich vielleicht einfach ne Table zu machen?
Koennte das funken, oder ist sowas generell ein Bloedsinn?
dachte ist was neues *g*Jedenfalls ist es so, dass dieser Aufbau sich ueber ein Hintergrundbild definiert.
Dadurch funktioniert es auch. Soweit so gut.
Wenn ich nun die diversen anderen div-Tags einarbeite, dann funkt das mit dem Inhalt, aber natuerlich nicht mit denen, die ein Hintergrundbild haben, weil das Hintergrund vom body vorrangig ist..
Tja, Notloesung waere fuer den inneren Bereich vielleicht einfach ne Table zu machen?
Koennte das funken, oder ist sowas generell ein Bloedsinn?
Necro_nomicon
Erfahrenes Mitglied
hm....geht sich bei meinem Layout aus, da es die gleiche Farbe ist. Werd mal einfach das Bild aendern...
die einzigen Probleme sind jetzt noch, dass sich ein repeat-bild einbringen muss und dann stimmt der Abstand noch wo nicht..
ich mach mich auf die Suche
die einzigen Probleme sind jetzt noch, dass sich ein repeat-bild einbringen muss und dann stimmt der Abstand noch wo nicht..
ich mach mich auf die Suche
Necro_nomicon
Erfahrenes Mitglied
arghl....jetzan funkt es f
nur noch ein Problem ist da...
wie mach ich nun neben dem abgerundeten Bild (ist das Bild im div=zwei), dass ein Balken in der gleichen Farbe weitergeht auf die ganze Breite...Hintergrundbild geht nicht, weil da schon eines drinnen ist......
Allerdings nimmt er auch bei div=vier die Hintergrundfarbe hellblau.
Warum nimmt er sie dann nicht bei div=zwei
+++edit+++ weil man die width auf 100 setzen muss....argl.
Jetzt schein es wirklich zu funken!
+++edit+++
bis auf eines *heul*
es funkt zwar im IE und im Firefox, aber wenn im Inhalt mehr Text drinnen ist geht der Footer nicht mit runter((((
Noch jemand ne Ahnung?
+++edit+++
footer funkt.....
Nur noch die Hintergrundfarbe hellblau geht nicht mir runter, wenn mehr Text ist...
nur noch ein Problem ist da...
wie mach ich nun neben dem abgerundeten Bild (ist das Bild im div=zwei), dass ein Balken in der gleichen Farbe weitergeht auf die ganze Breite...Hintergrundbild geht nicht, weil da schon eines drinnen ist......
Allerdings nimmt er auch bei div=vier die Hintergrundfarbe hellblau.
Warum nimmt er sie dann nicht bei div=zwei
+++edit+++ weil man die width auf 100 setzen muss....argl.
Jetzt schein es wirklich zu funken!
+++edit+++
bis auf eines *heul*
es funkt zwar im IE und im Firefox, aber wenn im Inhalt mehr Text drinnen ist geht der Footer nicht mit runter
((((Noch jemand ne Ahnung?
+++edit+++
footer funkt.....
Nur noch die Hintergrundfarbe hellblau geht nicht mir runter, wenn mehr Text ist...
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Col Stretch</title>
<meta name="Big John" content="August 24, 2002" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content=" A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="SHORTCUT ICON" href="im/favicon.ico" />
<style type="text/css">
<!--
html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; font-family: verdana, sans-serif; font-size: 80%;
background: #6FAFAA repeat-y url(img/bg_pic.gif);
overflow:auto;}
pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}
a {color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
/*******************************************************************************
Positioning rules
*******************************************************************************/
div#leftbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 10px;
width: 150px;
color: #ee8;
padding-top: 10px;
}
#middlebox {
position:absolute;
bottom:25px;
top:96px;
left:200px;
right:0px;
/* padding: 10px; */
background-color: #6FAFAA; /*** This div has a background to cover the 2-tone body BG ***/
}
div#rightbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
right: 25px; /*** IE5/mac will show a horizontal scrollbar
if this is less than 16px, or other units are used
http://www.l-c-n.com/IE5tests/right_pos/index.shtml ***/
width: 30%;
color: #820;
padding-top: 10px;
}
/*** VON MIR NEU ***/
/* h5 ist der header */
h5 {
background-image:url(img/layout_035_2.jpg);
background-repeat:repeat-x;
margin:0px;
}
/*** h6 ist der footer
h6 {
background-image:url(img/grau.gif);
background-repeat:repeat-x;
background-color:#B4B4B4;
height:25px;
margin:0px;
} ***/
#unten {
position:fixed;
bottom:0px;
height:25px;
background-image:url(img/grau.gif);
background-repeat:repeat-x;
background-color:#B4B4B4;
width:100%;
}
#adressleiste {
position:absolute;
background-color:#B4B4B4;
width:100%;
height:25px;
padding:0px;
bottom:0px;
margin:0px;
}
/* CONTENT VORBAU */
#eins {
font-weight:bold;
font-size:10pt;
line-height:2em;
height:20px;
color:#D5E4EE;
padding-left:5px;
padding-right:5px;
text-align:right;
}
#zwei {
position:absolute;
top:25px;
left:0px;
/*** background-color:#D5E4EE;
background-image:url(img/layout_035_7.jpg);
background-repeat:no-repeat; ***/
height:25px;
width:100%;
background-color:#D5E4EE;
}
#drei {
position:absolute;
top:50px;
left:0px;
width:100%;
height:3px;
line-height:3px;
margin:0px;
padding:0px;
background-color:#6FAFAA;
}
/* vier - hier ist der eigentlich Inhalt drinnen */
div#vier {
position:absolute;
top:53px;
left:0px;
bottom:0px;
background-color:#D5E4EE;
width:100%;
}
#top_navigation {
/* position:absolute; */
/* top:30px; */
/* left:35px; */
width:100%;
height:25px;
}
a.top_link {
display:block;
position:absolute;
font-family:Verdana, sans-serif;
font-size:10pt;
text-decoration:none;
color:#1266A4;
margin-left:35px;
}
a.top_link:link, a.top_link:visited {
color:#1266A4;
}
a.top_link:hover, a.top_link:active {
color:#FFFFFF;
background-color:#1266A4;
}
a#ziele {
bottom:0px;
text-decoration:none;
}
a#statuten {
bottom:0px;
left:40px;
text-decoration:none;
}
-->
</style>
</head>
<body>
<h5>
<img src="img/layout_035_1.jpg" width="640" height="96" alt="Logo">
</h5>
<div id="leftbox">
<p>
<strong>This column</strong> has a background provided by a vertically repeating image on the body.
The image is as wide as the left margin on the middle column, and 20px high, to reduce the number
of image repeats, allowing quicker rendering.
</p>
The column content (#leftbox)
is absolutely positioned into that left margin area, and given a pixel 'width'. This is necessary due to the
underlying background image.</p>
</div>
<!--
<div id="rightbox">
<pre>
<strong>#rightbox</strong> {
position: absolute;
right: 2%;
width: 30%;
}
</pre>
<p>
<strong>This column</strong> also allows the 'body' background to show, but since the 'body' BG image is repeated
only vertically, and is only as wide as the middle column's left margin, the 'body' background-color shows
here instead. The 'width' of this column, and the margin area in which it sits are defined as percentages,
but may be given in other units if desired.
</p>
<p>
If the page is narrowed below 640px wide, the rigid 'pre' elements in the middle and right columns
may cause the content to overlap.
</p>
<p>
<a href="#"><strong>Test link</strong></a>
</p>
</div>
-->
<div id="middlebox">
<div id="eins">
xyuser angemeldet | abmelden | <img src="img/sitemmap.gif" alt="Button Sitemap" align="bottom"> |
<span style="font-size:8pt">A</span><span style="font-size:10pt">A</span><span style="font-size:12pt">A</span></div>
<div id="zwei"><img src="img/layout_035_7.jpg" width="33" height="25" id="balken" alt="Test">
<div id="top_navigation">
<a href="ziele.html" class="top_link" id="ziele">Ziele</a>
<a href="statuten.html" class="top_link" id="statuten">Statuten</a></div>
</div>
<div id="drei"> </div>
<div id="vier">
<h1>Überschrift</h1>
<p>Lorem ipsum sdf sjdflk jsdfkl sdjfkl sdjkfl dsfjkl djsfkl dsjfl dsjklf dsflk djsfkl djksfl dsjfkl sd
sdjf sdjklf djsfk djsfkl djsf sdjklf sdjlf djlsfk sdjlf sdjklf djsklf djskl fj sdf dsf sdf </p>
<p>Das ist ein <a href="test.html">Link</a>.</p>
<h2>Überschrift 2</h2>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
</div>
<div id="unten">
<img src="img/grau.gif" width="2" height="2">Adresse</div>
</body>
</html>
Zuletzt bearbeitet:
Necro_nomicon
Erfahrenes Mitglied
Wie oben geschrieben....es funkt, bis auf zwei Sachem:
1.)
Der Footer ist jetzt dank position: fixed, immer unten, aber auch wenn man das Fenster kleiner macht. Schoener waere da schon eine Loesung, dass wenn mehr Text ist, der Footer mit runtergeht.
2.)
Die Hintergrundfarbe #D5E4EE beim Inhalt geht nicht bis ganz runter, wenn der Text laenger wird. Sie geht nur bis zu den 100% der Fenstergroesse, egal ob wenig oder viel Inhalt drinnen ist.
Any ideas?
1.)
Der Footer ist jetzt dank position: fixed, immer unten, aber auch wenn man das Fenster kleiner macht. Schoener waere da schon eine Loesung, dass wenn mehr Text ist, der Footer mit runtergeht.
2.)
Die Hintergrundfarbe #D5E4EE beim Inhalt geht nicht bis ganz runter, wenn der Text laenger wird. Sie geht nur bis zu den 100% der Fenstergroesse, egal ob wenig oder viel Inhalt drinnen ist.
Any ideas?
HTML:
div#vier {
position:absolute;
top:53px;
left:0px;
bottom:0px;
background-color:#D5E4EE;
width:100%;
}
Zuletzt bearbeitet:
M
Maik
Sodele, ich war mal zwischendurch im Office Talers verdienen, und bin nun für den Rest des Tages im Forum erreichbar
Da du dich ja, wie in deiner PN erwähnt, an meinem CSS-Tutorial "CSS-Layout mit 100-Höhe" orientiert hast, empfehle ich dir, die Spalten mit Hilfe der float-Eigenschaft einzurichten, und auf alle absoluten Positionsangaben bis auf den "Footer-Bereich" zu verzichten, da diese die Ursache dafür sind, dass der Footer bei zunehmenden Seiteninhalt in seiner Ausgangsposition verharrt, und der Hintergrund des Inhaltbereiches in der Höhe nicht mitwächst.
Wenn du dir in meinem Tutorial das Stylesheet der Beispiel-Variante "Modell mit Header und Footer" näher betrachtest, siehst du, dass das alles umschliessende DIV #wrapper relativ positioniert ist, und eine Mindesthöhe von 100% besitzt.
Der Footer ist darin wiederum am unteren Elementrand absolut positioniert.
Wenn der Seiteninhalt nun die Mindesthöhe überschreitet, wächst das DIV #wrapper mit und der Footer wird automatisch nach unten verschoben.
Wichtig für diese Funktionalität ist aber, dass die Floatumgebung zum Schluß wieder aufgehoben wird - hierfür verwende ich die Klasse .clearfix, die im DIV #wrapper aufgerufen wird.
mfg Maik
Da du dich ja, wie in deiner PN erwähnt, an meinem CSS-Tutorial "CSS-Layout mit 100-Höhe" orientiert hast, empfehle ich dir, die Spalten mit Hilfe der float-Eigenschaft einzurichten, und auf alle absoluten Positionsangaben bis auf den "Footer-Bereich" zu verzichten, da diese die Ursache dafür sind, dass der Footer bei zunehmenden Seiteninhalt in seiner Ausgangsposition verharrt, und der Hintergrund des Inhaltbereiches in der Höhe nicht mitwächst.
Wenn du dir in meinem Tutorial das Stylesheet der Beispiel-Variante "Modell mit Header und Footer" näher betrachtest, siehst du, dass das alles umschliessende DIV #wrapper relativ positioniert ist, und eine Mindesthöhe von 100% besitzt.
Der Footer ist darin wiederum am unteren Elementrand absolut positioniert.
Wenn der Seiteninhalt nun die Mindesthöhe überschreitet, wächst das DIV #wrapper mit und der Footer wird automatisch nach unten verschoben.
Wichtig für diese Funktionalität ist aber, dass die Floatumgebung zum Schluß wieder aufgehoben wird - hierfür verwende ich die Klasse .clearfix, die im DIV #wrapper aufgerufen wird.
mfg Maik
Necro_nomicon
Erfahrenes Mitglied
Ok, das wird ne lange Nacht . die zweite
Ich dreh gleich durch mit dem ganzen
Koennen wir da Schritt fuer Schritt vorgehen?
Ich bin nervlich und geistig schon sehr angegriffen!
Mein derzeitiger Quelltext ist:
Ich dreh gleich durch mit dem ganzen
Koennen wir da Schritt fuer Schritt vorgehen?
Ich bin nervlich und geistig schon sehr angegriffen!
Mein derzeitiger Quelltext ist:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Col Stretch</title>
<meta name="Big John" content="August 24, 2002" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content=" A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="SHORTCUT ICON" href="img/favicon.ico" />
<style type="text/css">
<!--
html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; font-family: verdana, sans-serif; font-size: 80%;
background: #6FAFAA repeat-y url(img/bg_pic.gif);
overflow:auto;}
a {color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
/*******************************************************************************
Positioning rules
*******************************************************************************/
/*** h1, h2 {
font-size: 30px;
margin: 0;
color: #040;
background-color: #c83;
border-top: 4px solid #000;
border-bottom: 5px solid #000;
}
h2 {background-color: #638; color: #fff;} ***/
div#leftbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 10px;
width: 150px;
padding-top: 10px;
}
#middlebox {
position:absolute;
bottom:25px;
top:96px;
left:200px;
right:0px;
/* padding: 10px; */
background-color: #6FAFAA; /*** This div has a background to cover the 2-tone body BG ***/
}
div#rightbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
right: 25px; /*** IE5/mac will show a horizontal scrollbar
if this is less than 16px, or other units are used
http://www.l-c-n.com/IE5tests/right_pos/index.shtml ***/
width: 30%;
color: #820;
padding-top: 10px;
}
/*** VON MIR NEU ***/
/* h5 ist der header */
h5 {
background-image:url(img/layout_035_2.jpg);
background-repeat:repeat-x;
margin:0px;
}
/*** h6 ist der footer
h6 {
background-image:url(img/grau.gif);
background-repeat:repeat-x;
background-color:#B4B4B4;
height:25px;
margin:0px;
} ***/
#unten {
/* position: relative; */
/* postion:fixed, immer unten, aber auch kleines Fenster */
position:absolute;
bottom:0px;
margin:0;
height:25px;
background-image:url(img/grau.gif);
background-repeat:repeat-x;
background-color:#B4B4B4;
width:100%;
}
#adressleiste {
position:absolute;
background-color:#B4B4B4;
width:100%;
height:25px;
padding:0px;
bottom:0px;
margin:0px;
}
/* CONTENT VORBAU */
#eins {
font-weight:bold;
font-size:10pt;
line-height:2em;
height:20px;
color:#D5E4EE;
padding-left:5px;
padding-right:5px;
text-align:right;
}
#zwei {
position:absolute;
top:25px;
left:0px;
/*** background-color:#D5E4EE;
background-image:url(img/layout_035_7.jpg);
background-repeat:no-repeat; ***/
height:25px;
width:100%;
background-color:#D5E4EE;
}
#drei {
position:absolute;
top:50px;
left:0px;
width:100%;
height:3px;
line-height:3px;
margin:0px;
padding:0px;
background-color:#6FAFAA;
}
/* vier - hier ist der eigentlich Inhalt drinnen */
div#vier {
position:absolute;
top:53px;
left:0px;
bottom:0px;
background-color:#D5E4EE;
width:100%;
}
#top_navigation {
/* position:absolute; */
/* top:30px; */
/* left:35px; */
width:100%;
height:25px;
}
a.top_link {
display:block;
position:absolute;
font-family:Verdana, sans-serif;
font-size:10pt;
text-decoration:none;
color:#1266A4;
margin-left:35px;
}
a.top_link:link, a.top_link:visited {
color:#1266A4;
}
a.top_link:hover, a.top_link:active {
color:#FFFFFF;
background-color:#1266A4;
}
a#ziele {
bottom:0px;
text-decoration:none;
}
a#statuten {
bottom:0px;
left:40px;
text-decoration:none;
}
-->
</style>
</head>
<body>
<div id="container">
<h5>
<img src="img/layout_035_1.jpg" width="640" height="96" alt="Logo">
</h5>
<div id="leftbox">
<p>
<strong>This column</strong> has a background provided by a vertically repeating image on the body.
The image is as wide as the left margin on the middle column, and 20px high, to reduce the number
of image repeats, allowing quicker rendering.
</p>
The column content (#leftbox)
is absolutely positioned into that left margin area, and given a pixel 'width'. This is necessary due to the
underlying background image.</p>
</div>
<!--
<div id="rightbox">
<pre>
<strong>#rightbox</strong> {
position: absolute;
right: 2%;
width: 30%;
}
</pre>
<p>
<strong>This column</strong> also allows the 'body' background to show, but since the 'body' BG image is repeated
only vertically, and is only as wide as the middle column's left margin, the 'body' background-color shows
here instead. The 'width' of this column, and the margin area in which it sits are defined as percentages,
but may be given in other units if desired.
</p>
<p>
If the page is narrowed below 640px wide, the rigid 'pre' elements in the middle and right columns
may cause the content to overlap.
</p>
<p>
<a href="#"><strong>Test link</strong></a>
</p>
</div>
-->
<div id="middlebox">
<div id="eins">
xyuser angemeldet | abmelden | <img src="img/sitemmap.gif" alt="Button Sitemap" align="bottom"> |
<span style="font-size:8pt">A</span><span style="font-size:10pt">A</span><span style="font-size:12pt">A</span></div>
<div id="zwei"><img src="img/layout_035_7.jpg" width="33" height="25" id="balken" alt="Test">
<div id="top_navigation">
<a href="ziele.html" class="top_link" id="ziele">Ziele</a>
<a href="statuten.html" class="top_link" id="statuten">Statuten</a></div>
</div>
<div id="drei"> </div>
<div id="vier">
<h1>Überschrift</h1>
<p>Lorem ipsum sdf sjdflk jsdfkl sdjfkl sdjkfl dsfjkl djsfkl dsjfl dsjklf dsflk djsfkl djksfl dsjfkl sd
sdjf sdjklf djsfk djsfkl djsf sdjklf sdjlf djlsfk sdjlf sdjklf djsklf djskl fj sdf dsf sdf </p>
<p>Das ist ein <a href="test.html">Link</a>.</p>
<h2>Überschrift 2</h2>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
</div>
<h6>Adresse</h6>
<div id="unten">
<img src="img/grau.gif" width="2" height="2">Adresse</div>
</div>
</body>
</html>
M
Maik
Das Einfachste wird wohl sein, wenn du meine Vorlage nimmst, darin das dreispaltige Layout in ein zweispaltiges umwandelst, und dann deine Inhalte einbindest.
mfg Maik
mfg Maik
Necro_nomicon
Erfahrenes Mitglied
Ich hab jetzan all deine Elemente eingefuegt, aber das Problem mit dem Footer ist immer noch da....
Hab aber die absolute noch nicht rausgenommen bei den diversen dazwischen....
sollte ich das tun, oder?
jetzan ist derzeit halt alles zentriert, aber das ist ja mal ega.
+++edit+++
Also das Problem was ich grad seh, ich hab jetzan bei den div#leftCol und div#rightCol das float reingegeben, aber bei dir ist das linke 200px; und das rechte auch. Aber das rechte soll bei mir ja die restliche Breite sein *wonders*
+++edit+++
Soll ich einmal dein File hernehmen und dann Stueck fuer Stueck meine Sachen einbauen? Meinst, waere das besser?
hier der Code:
Hab aber die absolute noch nicht rausgenommen bei den diversen dazwischen....
sollte ich das tun, oder?
jetzan ist derzeit halt alles zentriert, aber das ist ja mal ega.
+++edit+++
Also das Problem was ich grad seh, ich hab jetzan bei den div#leftCol und div#rightCol das float reingegeben, aber bei dir ist das linke 200px; und das rechte auch. Aber das rechte soll bei mir ja die restliche Breite sein *wonders*
+++edit+++
Soll ich einmal dein File hernehmen und dann Stueck fuer Stueck meine Sachen einbauen? Meinst, waere das besser?
hier der Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Col Stretch</title>
<meta name="Big John" content="August 24, 2002" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content=" A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="SHORTCUT ICON" href="img/favicon.ico" />
<style type="text/css">
<!--
html {margin: 0; padding: 0; height:100%;}
body {margin: 0; padding: 0; font-family: verdana, sans-serif; font-size: 80%;
background: #6FAFAA repeat-y url(img/bg_pic.gif);
height:100%;
overflow:auto;}
a {color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
/*******************************************************************************
Positioning rules
*******************************************************************************/
/*** h1, h2 {
font-size: 30px;
margin: 0;
color: #040;
background-color: #c83;
border-top: 4px solid #000;
border-bottom: 5px solid #000;
}
h2 {background-color: #638; color: #fff;} ***/
div#leftbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 10px;
width: 200px;
padding-top: 0px;
}
div#middlebox {
position:absolute;
bottom:25px;
top:96px;
left:200px;
right:0px;
/* padding: 10px; */
background-color: #6FAFAA; /*** This div has a background to cover the 2-tone body BG ***/
}
/*** UMGESTALTUNG ***/
div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
background: url(3cols.png) repeat-y;
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}
/* clearfix zum Aufheben der Floatumgebung */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 800px;
height: 20px;
background: #fff;
border-top: 1px solid #b8b8b8;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*** VON MIR NEU ***/
/* h5 ist der header */
h5 {
background-image:url(img/layout_035_2.jpg);
background-repeat:repeat-x;
margin:0px;
}
/*** h6 ist der footer
h6 {
background-image:url(img/grau.gif);
background-repeat:repeat-x;
background-color:#B4B4B4;
height:25px;
margin:0px;
} ***/
#unten {
/* position: relative; */
/* postion:fixed, immer unten, aber auch kleines Fenster */
position:absolute;
bottom:0px;
margin:0;
height:25px;
background-image:url(img/grau.gif);
background-repeat:repeat-x;
background-color:#B4B4B4;
width:100%;
}
/* CONTENT VORBAU */
#eins {
font-weight:bold;
font-size:10pt;
line-height:2em;
height:20px;
color:#D5E4EE;
padding-left:5px;
padding-right:5px;
text-align:right;
}
#zwei {
position:absolute;
top:25px;
left:0px;
/*** background-color:#D5E4EE;
background-image:url(img/layout_035_7.jpg);
background-repeat:no-repeat; ***/
height:25px;
width:100%;
background-color:#D5E4EE;
}
#drei {
position:absolute;
top:50px;
left:0px;
width:100%;
height:3px;
line-height:3px;
margin:0px;
padding:0px;
background-color:#6FAFAA;
}
/* vier - hier ist der eigentlich Inhalt drinnen */
div#vier {
position:absolute;
top:53px;
left:0px;
bottom:0px;
background-color:#D5E4EE;
width:100%;
}
#top_navigation {
/* position:absolute; */
/* top:30px; */
/* left:35px; */
width:100%;
height:25px;
}
a.top_link {
display:block;
position:absolute;
font-family:Verdana, sans-serif;
font-size:10pt;
text-decoration:none;
color:#1266A4;
margin-left:35px;
}
a.top_link:link, a.top_link:visited {
color:#1266A4;
}
a.top_link:hover, a.top_link:active {
color:#FFFFFF;
background-color:#1266A4;
}
a#ziele {
bottom:0px;
text-decoration:none;
}
a#statuten {
bottom:0px;
left:40px;
text-decoration:none;
}
-->
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<h5>
<img src="img/layout_035_1.jpg" width="640" height="96" alt="Logo">
</h5>
<div id="leftbox">
<p>
<strong>This column</strong> has a background provided by a vertically repeating image on the body.
The image is as wide as the left margin on the middle column, and 20px high, to reduce the number
of image repeats, allowing quicker rendering.
</p>
The column content (#leftbox)
is absolutely positioned into that left margin area, and given a pixel 'width'. This is necessary due to the
underlying background image.</p>
</div>
<!--
<div id="rightbox">
<pre>
<strong>#rightbox</strong> {
position: absolute;
right: 2%;
width: 30%;
}
</pre>
<p>
<strong>This column</strong> also allows the 'body' background to show, but since the 'body' BG image is repeated
only vertically, and is only as wide as the middle column's left margin, the 'body' background-color shows
here instead. The 'width' of this column, and the margin area in which it sits are defined as percentages,
but may be given in other units if desired.
</p>
<p>
If the page is narrowed below 640px wide, the rigid 'pre' elements in the middle and right columns
may cause the content to overlap.
</p>
<p>
<a href="#"><strong>Test link</strong></a>
</p>
</div>
-->
<div id="middlebox">
<div id="eins">
xyuser angemeldet | abmelden | <img src="img/sitemmap.gif" alt="Button Sitemap" align="bottom"> |
<span style="font-size:8pt">A</span><span style="font-size:10pt">A</span><span style="font-size:12pt">A</span></div>
<div id="zwei"><img src="img/layout_035_7.jpg" width="33" height="25" id="balken" alt="Test">
<div id="top_navigation">
<a href="ziele.html" class="top_link" id="ziele">Ziele</a>
<a href="statuten.html" class="top_link" id="statuten">Statuten</a></div>
</div>
<div id="drei"> </div>
<div id="vier">
<h1>Überschrift</h1>
<p>Lorem ipsum sdf sjdflk jsdfkl sdjfkl sdjkfl dsfjkl djsfkl dsjfl dsjklf dsflk djsfkl djksfl dsjfkl sd
sdjf sdjklf djsfk djsfkl djsf sdjklf sdjlf djlsfk sdjlf sdjklf djsklf djskl fj sdf dsf sdf </p>
<p>Das ist ein <a href="test.html">Link</a>.</p>
<h2>Überschrift 2</h2>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
</div>
<h6>Adresse</h6>
<div id="footer">
<img src="img/grau.gif" width="2" height="2">Adresse</div>
</div>
</body>
</html>
Zuletzt bearbeitet:
Necro_nomicon
Erfahrenes Mitglied
So, ich hab nun deines als Vorlage genommen.
Jetzt stellt sich die Frage welche Spalte ich nun rausnehmen soll....die centerCol oder die rightCol....
ist das egal?
Jetzt stellt sich die Frage welche Spalte ich nun rausnehmen soll....die centerCol oder die rightCol....
ist das egal?
- Status
