Header oben festgemacht, Footer unten festgemacht

Hi liebe Community,

gerne hätte ich, dass bei meinem Layout der Headerbereich ganz oben festgemacht ist (das habe ich auch soweit hinbekommen) und der Footer eben ganz unten festgemacht ist, also bei allen Auflösungen und der Content-Bereich soll sich halt dementsprechend verschieben, bei einer niedrigen Auflösungen ist es sowieso lang genug, aber wenn man einen größere hat, ist unten immer eine Lücke, hab schon einige Code-Schnipsel ausprobiert die ich so gefunden habe, aber da verlängert sich dann immer nur der Footer, es soll sich aber der Content Bereich verlängern.
Hier der Link zum Design: http://holiday-lienz.bplaced.net/index.php
Und hier der Quelltext:

[HTML]

Holiday Lienz html,body { height:100%; background-color:#2b455c; margin-top:0; margin-left:0; margin-bottom:0; } td {Font-Family: Tahoma; font-size: 10pt; COLOR: #7d7d7d; TEXT-DECORATION: none} A:visited {Font-Family: Tahoma; font-size: 7pt; COLOR: #7d7d7d; TEXT-DECORATION: none} A:link {Font-Family: Tahoma; font-size: 7pt; COLOR: #5c9bce; TEXT-DECORATION: none} A:hover {Font-Family: Tahoma; font-size: 7pt; COLOR: #5c9bce; TEXT-DECORATION: dashed} img { border: 0px; } #one { display: block; background-image: url(Bilder/Unbenannt-3_03.jpg); width: 71px; height: 41px; } #one:hover { background-image: url(Bilder/Unbenannt-3_03r.jpg); } #two { display: block; background-image: url(Bilder/Unbenannt-3_04.jpg); width: 70px; height: 41px;

}
#two:hover {
background-image: url(Bilder/Unbenannt-3_04r.jpg);
}
#three {
display: block;
background-image: url(Bilder/Unbenannt-3_05.jpg);
width: 81px;
height: 41px;
}
#three:hover {
background-image: url(Bilder/Unbenannt-3_05r.jpg);
}
#four {
display: block;
background-image: url(Bilder/Unbenannt-3_06.jpg);
width: 75px;
height: 41px;
}
#four:hover {
background-image: url(Bilder/Unbenannt-3_06r.jpg);
}
#five {
display: block;
background-image: url(Bilder/Unbenannt-3_07.jpg);
width: 86px;
height: 41px;
}
#five:hover {
background-image: url(Bilder/Unbenannt-3_07r.jpg);
}
#six {
display: block;
background-image: url(Bilder/Unbenannt-3_16.jpg);
width: 102px;
height: 44px;
}
#six:hover {
background-image: url(Bilder/Unbenannt-3_16r.jpg);
}
#seven {
display: block;
background-image: url(Bilder/Unbenannt-3_17.jpg);
width: 161px;
height: 21px;
}
#seven:hover {
background-image: url(Bilder/Unbenannt-3_17r.jpg);
}
#content {
width: 795px;
}
td.c1 {background-image:url(Bilder/Unbenannt-3_01.jpg)}
td.c2 {background-image:url(Bilder/Unbenannt-3_02.jpg)}
td.c3 {background-image:url(Bilder/Unbenannt-3_08.jpg)}
td.c4 {background-image:url(Bilder/Unbenannt-3_09.jpg)}
td.c5 {background-repeat:repeat-y;background-image:url(Bilder/Unbenannt-3_10.jpg);}
td.c6 {background-repeat:repeat-y;background-image:url(Bilder/Unbenannt-3_11.jpg);}
td.c7 {background-repeat:repeat-y;background-image:url(Bilder/Unbenannt-3_12.jpg);}
td.c8 {background-repeat:repeat-y;background-image:url(Bilder/Unbenannt-3_13.jpg);}
td.c9 {background-image:url(Bilder/Unbenannt-3_14.jpg)}
td.c10 {background-image:url(Bilder/Unbenannt-3_15.jpg)}
td.c11 {background-image:url(Bilder/Unbenannt-3_16.jpg)}
td.c12 {background-image:url(Bilder/Unbenannt-3_18.jpg)}
td.c13 {background-image:url(Bilder/Unbenannt-3_19.jpg)}
td.c14 {background-image:url(Bilder/Unbenannt-3_17.jpg)}


<? if (!isset($_GET['id'])) { $_GET['id']="home"; } if (file_exists($_GET['id'].".php")) { include($_GET['id'].".php"); } else { echo "

Error 404 "; }
?>

<? include("anfrage.php"); ?>


<? include("anschauen.php"); ?>

[/HTML]

Danke schonmal für eure Hilfe :slight_smile:

Liebe Grüße
Manuel

Das ist ein Tabellenkonstrukt à la 1997 mit teilweise ungültigen Tags, da gibt es nichts zu flicken.

Zur Lösung deines Problems musst du schon eine Seite bauen, die semantisch dem heutigen Stand entspricht. Am besten, du besorgst dir erstmal ein Buch über HTML/CSS und eignest dir Grundlagenwissen an.

Also die Tags sind jetzt alle gültig (hab den Code nochmal geändert).

Okay also ist es so nicht möglich?
Versteh nicht so ganz, was so schlimm an den Tabellen ist, immerhin funktioniert so alles tadellos.

Tabellen sind für tabellarische Daten gedacht und nicht zum Vergewaltigen von Layouts. Klar funktioniert das damit auch, aber immer nach dem Motto: „Der Meister will’s kaum glauben, auch mit 'nem Hammer kann man schrauben“

Siehe http://www.css4you.de/wslayout1/index.html

Es funktioniert ja eben nicht, wenn es um das Styling geht, siehe dein Problem. Aus dem Grunde ist man bereits vor langer Zeit vom Tabellenlayout abgerückt.

Also, ich habs mal mit divs versucht und es schaut eigentlich ganz gut aus, wie bekomme ich es jetzt hin, dass der Content Bereich automatisch mit verlängert wird, der Footer ist schonmal am Boden sowie es sein soll. Achja und mittig sollte das Ganze auch noch sein:
http://holiday-lienz.bplaced.net/index.php

Hier der neue Code:
[HTML]

Holiday Lienz * { margin: 0; padding: 0; Font-Family: Tahoma; font-size: 10pt; color: #7d7d7d; text-decoration: none; A:visited {Font-Family: Tahoma; font-size: 7pt; COLOR: #7d7d7d; TEXT-DECORATION: none} A:link {Font-Family: Tahoma; font-size: 7pt; COLOR: #5c9bce; TEXT-DECORATION: none} A:hover {Font-Family: Tahoma; font-size: 7pt; COLOR: #5c9bce; TEXT-DECORATION: dashed} } html,body { height:100%; background-color:#2b455c; margin-top:0; margin-bottom:0;

}

#one {
display: block;
background-image: url(Bilder/Unbenannt-3_03.jpg);
width: 71px;
height: 41px;
float: left;
}
#one:hover {
background-image: url(Bilder/Unbenannt-3_03r.jpg);
}
#two {
display: block;
background-image: url(Bilder/Unbenannt-3_04.jpg);
width: 70px;
height: 41px;
float: left;

}
#two:hover {
background-image: url(Bilder/Unbenannt-3_04r.jpg);
}
#three {
display: block;
background-image: url(Bilder/Unbenannt-3_05.jpg);
width: 81px;
height: 41px;
float: left;
}
#three:hover {
background-image: url(Bilder/Unbenannt-3_05r.jpg);
}
#four {
display: block;
background-image: url(Bilder/Unbenannt-3_06.jpg);
width: 75px;
height: 41px;
float: left;
}
#four:hover {
background-image: url(Bilder/Unbenannt-3_06r.jpg);
}
#five {
display: block;
background-image: url(Bilder/Unbenannt-3_07.jpg);
width: 86px;
height: 41px;
float: left;
}
#five:hover {
background-image: url(Bilder/Unbenannt-3_07r.jpg);
}
#six {
display: block;
background-image: url(Bilder/Unbenannt-3_16.jpg);
width: 102px;
height: 44px;
}
#six:hover {
background-image: url(Bilder/Unbenannt-3_16r.jpg);
}
#seven {
display: block;
background-image: url(Bilder/Unbenannt-3_17.jpg);
width: 161px;
height: 21px;
}
#seven:hover {
background-image: url(Bilder/Unbenannt-3_17r.jpg);
}
#textcontent {
width: 795px;
padding-left: 100px;
margin-top: 0px;
float: left;
}
#sidecontent {
width: 176px;
float: left;
padding-left: 126px;
margin-top: 0px;
}
#header {
width: 1242px;
height: 333px;
background-image: url(Bilder/header.jpg);
margin-top: 0px;
}
#content {
width: 1242px;
display: block;
background-image: url(Bilder/content.jpg);
background-repeat: repeat-y;
float: left;
}
#navigation {
margin-left: 350px;
padding-top: 220px;
}
#footer {
width: 1242px;
height: 206px;
background-image: url(Bilder/footer.jpg);
position: absolute;
bottom: 0;
}
.clear {
clear: both;
}
.textinput {
width:110px;
height:16px;
color: #7d7d7d;
font-size: 11px;
border: 1px solid #c0c0c0;
background-color: #f5f5f5;
}
.textarea {
width:110px;
color: #7d7d7d;
font-size: 11px;
border: 1px solid #c0c0c0;
background-color: #f5f5f5;
resize: none;
}

<? if (!isset($_GET['id'])) { $_GET['id']="home"; } if (file_exists($_GET['id'].".php")) { include($_GET['id'].".php"); } else { echo "

Error 404 "; }
?>

<? include("anfrage.php"); ?>
<? include("anschauen.php"); ?>
[/HTML]

Hi,
hier ists ganz einfach erklärt wie man das am Besten macht: http://html-einfach.de/visuelles/css_design_textboxen.php

Zum zentrieren: Entweder ein Div um alles und dieses mit position relative und margin:auto; zentrieren
Oder den Content Hintergrund als Seitenhintergrund nehmen. Dann schaut überall da, wo die Lücke ist der Hintergrund nochmal durch :PP

Hallo,

ich befürchte, du hast etwas falsch verstanden. Tronjer schrieb

Zur Lösung deines Problems musst du schon eine Seite bauen, die semantisch dem heutigen Stand entspricht. Am besten, du besorgst dir erstmal ein Buch über HTML/CSS und eignest dir Grundlagenwissen an.

Es geht also nicht nur um das Tabellenlayout, das der Lösung deines Wunsches entgegensteht, sondern um den gesamten Quellcode. Den musst du erst einmal semantisch korrekt erstellen.

Dazu gehört zum Beispiel auch, das Text immer Text ist und nicht als Grafik angezeigt wird. Außerdem werden Rahmen heutzutage nicht mehr als Grafiken angezeigt, sondern per CSS mit border.

Dein verwendetes XHTML 1.0 ist bereits 2006 zu Grabe getragen worden und wird nicht mehr weitererentwickelt. Das zeigen die Browser nur noch als Erinnerungswert an und irgendwann wird es als Altballast von den Browsern ignoriert werden. Neue Seiten sollten deshalb mit HTML5 erstellt werden.

Wenn du eine aktuelle Seite mit all ihren Möglichkeiten erstellen willst wirst du nicht darum herumkommen, erst einmal die Grundlagen vom aktuellen HTML5 und CSS3 zu lernen.

Edith:

Als erstes müssen Sie eine Textbox in einem Grafikbearbeitungsprogramm erstellen

Autsch, das ist veraltete Technik, die nicht mehr angewandt werden sollte, schon gar nicht bei neuen Seiten.

Gruss

MrMurphy

Hi, die Content-Box ist auch variabel, aber ich will dass sie immer am Footer anschließt, egal bei welcher Auflösung (siehe erster Post).

MfG

Hallo,

egal bei welcher Auflösung

Das geht nicht so lange du Grafiken als Rahmen nutzt.

Gruss

MrMurphy

Was ist jetzt das Problem, weil am Anfang das hier steht?:
[HTML]

[/HTML]

Das ist eine automatische Ausgabe vom Dreamweaver.
Der HTML Code sin
Ansonsten sind es nur CSS Werte und danach ein paar div Boxen, mehr ist’s nicht.

Was? Das glaub ich nicht, das ist eine Hintergrundgrafik im Content-Bereich, die sich ja unendlich repeaten kann. Daher nutze ich ja keine eigene Grafik als Rahmen. Mit ner Hintergrundfarbe wirds wohl auch gehen, warum soll es dann mit einer Grafik nicht gehen.
Das Layout besteht aus 3 Grafik, Header, Mitte und Footer (und halt extra noch die Navigation Buttons).

Also ich wette ich bekomms früher oder später noch hin, aber danke für deine Hilfe…

Hallo,

Das ist eine automatische Ausgabe vom Dreamweaver.

Nein, das stimmt nicht. Ich kenne den DW selbst sehr gut und weiß deshalb, das er nur das macht, was du ihm vorgibst. Den Doctype für XHTML vergibt er also nur, wenn du ihn auch ausgewählt hast. Wenn du mit den DW arbeiten willst solltest du vorher die Bedienung lernen. Die ist nichts für Anfänger.

Außerdem habe ich das Gefühl, das die anderen Hilfswilligen noch gar nicht erkannt haben, was du alles in Grafiken untergebracht hast, weil sie sich das heutzutage schlicht nicht mehr vorstellen können. Ansonsten hätten sie dich in der Mehrheit auch schon darauf hingewiesen, das es so mit einem flexiblen Layout nichts werden kann. Zudem sind alle textlichen Schlüsselinformationen als Grafik eingefügt.

Gruss

MrMurphy

Nur weil ich den falschen Doctype ausgewählt habe, machst du mich so runter? Toll dass du so gut bist und alles kannst, aber anstatt helfen kannst du auch nur rummotzen.
Also ich weiß echt nicht was dein Problem ist, es sind gerade mal DREI Grafiken (+die Navigationselemente).
Naja aufjedenfall hab ichs hinbekommen, aber trotzdem danke für deine super tolle Hilfe, dass es nicht funktionieren wird.

Lg

Hallo,

ich will dich nicht ärgern sondern davor bewahren eine veraltete Schrottseite zu erstellen.

dass es nicht funktionieren wird.

Dir ist schon aufgefallen, das weder dein gesamter Text noch deine Bewertungssternchen angezeigt werden? Außer du wählst einen kleinen Zoom-Faktor?

Gruss

MrMurphy

Danke :slight_smile:

Haha, ja hast recht, bei mir bei 100% fällt es gar nicht auf, hab grad rangezoomt und alles verschwindet.
Aber ich glaub ich bin schon ganz nah dran, irgendwie muss es doch gehen… :stuck_out_tongue:

Ich häng nochmal den Code an, vielleicht hat ja wer ne Idee:
[HTML]

Holiday Lienz * { margin: 0; padding: 0; Font-Family: Tahoma; font-size: 10pt; color: #7d7d7d; text-decoration: none; }

a:link {
color: #5c9bd0;
text-decoration: none;
}
a:visited {
color: #5c9bd0;
text-decoration: none;
}
a:hover {
color: #5c9bd0;
text-decoration: dashed;
}

html,body {
height:100%;
background-color:#33465c;
margin-top:0;
margin-bottom:0;

}
#box{
min-height: 100%;
height:auto !important;
height:100%; /* IE */
position: relative;
background-image: url(Bilder/content.jpg);
margin:0 auto;
width: 1242px;
}
#inbox
{
height:100%;
overflow:hidden;
}
#one {
display: block;
background-image: url(Bilder/Unbenannt-3_03.jpg);
width: 71px;
height: 41px;
float: left;
}
#one:hover {
background-image: url(Bilder/Unbenannt-3_03r.jpg);
}
#two {
display: block;
background-image: url(Bilder/Unbenannt-3_04.jpg);
width: 70px;
height: 41px;
float: left;

}
#two:hover {
background-image: url(Bilder/Unbenannt-3_04r.jpg);
}
#three {
display: block;
background-image: url(Bilder/Unbenannt-3_05.jpg);
width: 81px;
height: 41px;
float: left;
}
#three:hover {
background-image: url(Bilder/Unbenannt-3_05r.jpg);
}
#four {
display: block;
background-image: url(Bilder/Unbenannt-3_06.jpg);
width: 75px;
height: 41px;
float: left;
}
#four:hover {
background-image: url(Bilder/Unbenannt-3_06r.jpg);
}
#five {
display: block;
background-image: url(Bilder/Unbenannt-3_07.jpg);
width: 86px;
height: 41px;
float: left;
}
#five:hover {
background-image: url(Bilder/Unbenannt-3_07r.jpg);
}
#six {
display: block;
background-image: url(Bilder/Unbenannt-3_16.jpg);
width: 102px;
height: 44px;
float: left;
}
#six:hover {
background-image: url(Bilder/Unbenannt-3_16r.jpg);
}
#seven {
display: block;
background-image: url(Bilder/Unbenannt-3_17.jpg);
width: 161px;
height: 21px;
float: left;
}
#seven:hover {
background-image: url(Bilder/Unbenannt-3_17r.jpg);
}
#textcontent {
width: 795px;
padding-left: 100px;
margin-top: 0px;
float: left;
}
#sidecontent {
width: 176px;
float: left;
padding-left: 126px;
margin-top: 0px;
}
#header {
width: 1242px;
height: 333px;
background-image: url(Bilder/header.jpg);
margin-top: 0px;
}
#content {
width: 1242px;
display: block;
background-image: url(Bilder/content.jpg);
background-repeat: repeat-y;
float: left;
}
#navigation {
margin-left: 350px;
padding-top: 220px;
}
#footer {
width: 1242px;
height: 206px;
background-image: url(Bilder/footer.jpg);
position: absolute;
bottom: 0;
}
.clear {
clear: both;
}
.textinput {
width:110px;
height:16px;
color: #7d7d7d;
font-size: 11px;
border: 1px solid #c0c0c0;
background-color: #f5f5f5;
}
.textarea {
width:110px;
color: #7d7d7d;
font-size: 11px;
border: 1px solid #c0c0c0;
background-color: #f5f5f5;
resize: none;
}
#footernavi {
margin-left: 957px;
padding-top: 162px;
}

<? if (!isset($_GET['id'])) { $_GET['id']="home"; } if (file_exists($_GET['id'].".php")) { include($_GET['id'].".php"); } else { echo "

Error 404 "; }
?>

<? include("anfrage.php"); ?>
<? include("anschauen.php"); ?>
[/HTML]

Liebe Grüße :slight_smile:

Jetzt funktionierts, glaub ich zumindest :stuck_out_tongue:
[HTML]#inbox{
min-height: 955px;
height:100%;
overflow:hidden;
}[/HTML]

Bitte testen: http://holiday-lienz.bplaced.net/index.php

Liebe Grüße