Lücke zwischen Content und Footer

bra1ved · 03.02.2011

Hi,

bin grade dabei ein Design in HTML und CSS umzusetzen, was auch bisher ganz gut klappte, doch nun bin ich auf ein Problem gestoßen.
Sitze schon knapp 2 Stunden daran, und habe auch schon vieles ausprobiert..
Und zwar ist zwischen dem Contentbereich und der Fußleiste eine Lücke.
Ich habe schon herausgefunden das es an der Höhe des Contentbereiches liegt, wenn ich richtig liege

Hier der Code:

Code:

img{border:0;}

#body        {width: 820px; height: auto; margin: 0 auto; color:#000; }
#header        {width: 820px; height: 160px; margin: 0 auto; background: url(images/header.png); }
#main        {width: 820px; height: auto; margin: 0 auto; }
#nav_bar    {width: 820px; height: auto; margin: 0 auto; }
#content    {background:url(images/content_background.png) no-repeat; width: 820px; height: auto; background-color:#fff; }
#titel        {width: 800px; height: auto; margin: 0 auto; text-align:center; }
#titel h1    {padding: 7px 0 0 10px; font-size: 24px; font-family: trebuchet ms, tahome, verdana, arial, sans-serif; padding-top: 60px; }
#content p    {padding: 0 15px 0 15px; padding-bottom: 60px; font-family: trebuchet ms, tahoma, verdana, arial, sans-serif; }
#footer        {width: 820px; height: auto; margin: 0 auto; }

ul {margin: 0; padding: 0; list-style: none; } 
li {display: inline; padding: 0; float: left; }

Bleccer · 03.02.2011

AW: Lücke zwischen Content und Footer

gib dem footer einfach ein
margin-top: -30px;

oder halt nicht 30px eben die pixel anzahl die es zu weit unten ist

Doitsu · 03.02.2011

AW: Lücke zwischen Content und Footer

1. ist dein CSS-Code ziemlich unuebersichtlich. Einruecken ist das Zauberwort.
2. hast du ziemlich viel ueberfuessiges Zeug drin, z.B. 'height: auto' bzw. im content p das doppelte padding..
3. Wo ist dein HTML? raetselraten ist ziemlich uncool - vieles wird erst sichtbar, wenn man das Markup kennt. (Am besten waere ein Link zur Seite.)

gib dem footer einfach ein
margin-top: -30px;

Tolle loesung, ein Fehler weg zu machen, in dem man den naechsten macht!

bra1ved · 03.02.2011

AW: Lücke zwischen Content und Footer

Bleccer schrieb:
gib dem footer einfach ein
margin-top: -30px;

oder halt nicht 30px eben die pixel anzahl die es zu weit unten ist

Hat geklappt. Danke

Und nun das nächste Problem.
Wie verändere ich den Inhalt der anderen Seiten?
Einfach die Index.html kopieren, umbenennen in blabla.html und dort den Inhalt einfügen?

Kennt jemand ein gutes Gästebuch zum einfügen?

Das ist die Seite..

Bleccer · 03.02.2011

AW: Lücke zwischen Content und Footer

warum Fehler

?
Edit ja einfach Inhalt ändern^^

Doitsu · 03.02.2011

AW: Lücke zwischen Content und Footer

Dein Markup ist Fehlerhaft, du hast an saemtlichen stellen deine Container nicht geschlossen.

Code:

<div id="content"[color=#FF0000]>[/color]
<div id="titel"[color=#FF0000]>[/color]

Wahrscheinlich daher der Fehler.
Und nimm das margin: -30px; wieder raus - das ist mist.

zum thema inhalt aendern:
entweder kopieren und aendern, was einfacher ist, oder PHP benutzen - was Arbeit spart. Da du nicht alle Seiten aendern musst, wenn mal ein Link in der Navi hinzukommt o.ae.

edit:

warum Fehler ?

Weil es an der Stelle bloedsinn ist, einen margin - Wert einzufuegen, wenn man Valides HTML & CSS hat kommt der Fehler sich nicht zu Stande.

patrick_l · 03.02.2011

AW: Lücke zwischen Content und Footer

Doitsu schrieb:
Tolle loesung, ein Fehler weg zu machen, in dem man den naechsten macht!

Dem kann ich mich anschließend. Ziel ist es doch Fehler zu beheben und nicht welche zu produzieren. Alles andere ist doch für die Tonne. Back zum TE. Hast du vielleicht auch einmal selber die Suche bemüht? Sowohl die Suchmaschine als auch die neue Portal/Forensuche? Anscheinend nicht.

Gästebuch 1: und viele Bücher mehr gibt es hier für dich

bra1ved · 03.02.2011

AW: Lücke zwischen Content und Footer

Doitsu schrieb:
Dein Markup ist Fehlerhaft, du hast an saemtlichen stellen deine Container nicht geschlossen.

Code:

<div id="content"[COLOR=#ff0000]>[/COLOR] <div id="titel"[COLOR=#ff0000]>[/COLOR]

Wahrscheinlich daher der Fehler.
Und nimm das margin: -30px; wieder raus - das ist mist.

zum thema inhalt aendern:
entweder kopieren und aendern, was einfacher ist, oder PHP benutzen - was Arbeit spart. Da du nicht alle Seiten aendern musst, wenn mal ein Link in der Navi hinzukommt o.ae.

edit:
Weil es an der Stelle bloedsinn ist, einen margin - Wert einzufuegen, wenn man Valides HTML & CSS hat kommt der Fehler sich nicht zu Stande.

Danke für den Hinweis.
Das mit dem PHP hab ich schonmal gelesen, ich werd mal schauen ob ich das hinkriege.
Die div-Container sind nun geschlossen, aber das Problem mit dem Footer ist immernoch vorhanden :x

@DerOtto: Ja, habe ich. Aber ich bin zu keinem Script gestoßen, welches meinen Vorstellungen entspricht. An so einem Zeug wie Multiguestbook besteht sowieso kein Interesse. Und das mit dem GB war nur eine zusätzliche Frage, und nicht das Thema des Threads. Danke trotzden.

Herr_D · 03.02.2011

AW: Lücke zwischen Content und Footer

Schnelllösung

Code:

* {margin:0; padding:0; }

ins CSS

...und leg dir anderen webspace zu funpiq ist Mist... .. bplaced.net Webhosting | Freehost :: 2GB Webspace wenn du nicht mal 12€ im Jahr übrighast

Doitsu · 03.02.2011

AW: Lücke zwischen Content und Footer

Dein Markup ist immer noch fehlerhaft.

FireBug sagt mir, dass dein Footer nicht richtig im Body-Bereich platziert ist - du hast diesen nicht mal an der richtigen Stelle geoeffnet. Dazu hast du mehrere body-tags drin, das ist nicht 'erlaubt'.

Arbeite mal das durch, bis es dir sagt, dass deine Seite valide ist:
[Invalid] Markup Validation of http://bra1ved.br.funpic.de/csrpage/ - W3C Markup Validator

zum Problem:
Es ist der p-Tag im Contentbereicht, der hat einen Margin wert der sich unter den Content ablegt. (Loesung: div-Container um den p-Tag legen)

bra1ved · 03.02.2011

AW: Lücke zwischen Content und Footer

Herr_D schrieb:
Schnelllösung

Code:

* {margin:0; padding:0; }

ins CSS

...und leg dir anderen webspace zu funpiq ist Mist... .. bplaced.net Webhosting | Freehost :: 2GB Webspace wenn du nicht mal 12€ im Jahr übrighast

Hat geklappt. Danke

Wer den Fehler entdeckt hat, kann ja trotzdem noch posten.
Der Webspace ist jetzt nur für die Umsetzung.
TLD und Webspace werden gekauft, sobald die Seite fertig ist.

So, laut Validator ist die Seite nun valide.
Doitsu, kannste mir erklären was du meinst mit dem p-Tag?

/e Hat sich geklärt. Hab n margin: 0 eingefügt bei content p und nun klappt das ganze auch.
Danke für eure Hilfe

Bleccer · 03.02.2011

AW: Lücke zwischen Content und Footer

aber das ist kein Fehler, kla kommt es nicht zu stande ohne Fehler war nur n Vorschlag^^

Doitsu · 03.02.2011

AW: Lücke zwischen Content und Footer

bra1ved schrieb:
Doitsu, kannste mir erklären was du meinst mit dem p-Tag?

Auch wenn es sich erledigt hat:

Margin top / bottom richten sich an das Element welches ueber / unter dem Element steht. Wenn da nun allerdings kein Element ist, an welches es sich ausrichten kann, wird dieser Wert auf das Elternelement uebertragen. Deswegen kam es zu dem Abstand - der Marginwert vom p-Tag hat sich auf das div#content gelegt.

bra1ved · 03.02.2011

AW: Lücke zwischen Content und Footer

Wie mache ich das bei meinem Code nun mit den PHP Includes?
Habe schon Google benutzt, aber verstehe das nicht ganz..

Bleccer · 03.02.2011

AW: Lücke zwischen Content und Footer

<?php
include "Dateiname.Endung";
?>

bra1ved · 03.02.2011

AW: Lücke zwischen Content und Footer

Bleccer schrieb:
<?php
include "Dateiname.Endung";
?>

Habe ich auch schon gesehen..
Aber ich versteh nicht wie ich das bei mir machen soll..
Habe mir auch schon hier zwei Tutorials angeschaut und bei Google auch schon geguckt..

Bleccer · 03.02.2011

AW: Lücke zwischen Content und Footer

ja was ist dein Problem musst halt bisschen besser sagen

bra1ved · 03.02.2011

AW: Lücke zwischen Content und Footer

Brauche am besten ein Tutorial, in dem genau erklärt wird wie das geht..
Also bis jetzt habe ich ja nur ne index.html und ne .css Datei.
Wo müsste der Code dann hin?
Zudem hatte ich mit PHP auch noch nie was zutun :x
/e habs wahrscheinlich doch verstanden..

Doitsu · 03.02.2011

AW: Lücke zwischen Content und Footer

Na ja.
an sich hast du 2 Moeglichkeiten:
Die 1. waere alles ueber die index-Datei (die du in index.php umbenennen musst) & 2. durch mehrere PHP-Dateien, die die gebrauchten Sachen holen.
Bei 1. muesste dann dein Code so in etwa aussehen:

PHP:

<html>
<head>
[..]
</head>
<body>
<div id="main">
[..]
<div id="content">
<?php
$page = $_GET['page'] . '.html';
if(is_file($page)) { // Seite die uebergegen wurde vorhanden?
  $page_content = file_get_contents($page); // wenn ja, Seiteninhalt in eine variable speichern
} else {
  $page_content = file_get_contents('home.html'); // Wenn nicht 'home' anzeigen - oder eine Fehler Seite von wegen Seite nicht gefunden
}
echo $page_content; // Seiteninhalt ausgeben
?>
</div> <!-- content ende -->
[..]
</html>

So, dein Seitenaufruf muesste dann z.B. so lauten: domain.tld/index.php?page=home - in dem Fall wird der Inhalt der Seite 'home.html' als content angezeigt - wenn der Seitenaufrufdann halt domain.tld/index.php?page=kuenstler heisst, wird 'kuenstler.html' als content angezeigt.

Die 2. variante lasse ich mal weg - laeuft aber aehnlich ab: Nur dass du dir den GET-Parameter sparst, und gleich auf die Seiten verlinkst. Musst dann aber auf jeder Navi den Header / Footer includen, was den Quelltext dann wieder etwas aufblaeht.

bra1ved · 03.02.2011

AW: Lücke zwischen Content und Footer

Doitsu schrieb:
Na ja.
an sich hast du 2 Moeglichkeiten:
Die 1. waere alles ueber die index-Datei (die du in index.php umbenennen musst) & 2. durch mehrere PHP-Dateien, die die gebrauchten Sachen holen.
Bei 1. muesste dann dein Code so in etwa aussehen:

PHP:

<html> <head> [..] </head> <body> <div id="main"> [..] <div id="content"> <?php $page = $_GET['page'] . '.html'; if(is_file($page)) { // Seite die uebergegen wurde vorhanden? $page_content = file_get_contents($page); // wenn ja, Seiteninhalt in eine variable speichern } else { $page_content = file_get_contents('home.html'); // Wenn nicht 'home' anzeigen - oder eine Fehler Seite von wegen Seite nicht gefunden } echo $page_content; // Seiteninhalt ausgeben ?> </div>  [..] </html>

So, dein Seitenaufruf muesste dann z.B. so lauten: domain.tld/index.php?page=home - in dem Fall wird der Inhalt der Seite 'home.html' als content angezeigt - wenn der Seitenaufrufdann halt domain.tld/index.php?page=kuenstler heisst, wird 'kuenstler.html' als content angezeigt.

Die 2. variante lasse ich mal weg - laeuft aber aehnlich ab: Nur dass du dir den GET-Parameter sparst, und gleich auf die Seiten verlinkst. Musst dann aber auf jeder Navi den Header / Footer includen, was den Quelltext dann wieder etwas aufblaeht.

Danke für die Hilfe, aber das ganze verstehe ich leider überhaupt nicht..
Gibts ne Möglichkeit ohne PHP?