Antworten auf deine Fragen:
Neues Thema erstellen

Lücke zwischen Content und Footer

bra1ved

Noch nicht viel geschrieben

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 :D

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; }
 

B

Bleccer

Guest

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

Aktives Mitglied

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

Noch nicht viel geschrieben

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

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..
 
Zuletzt bearbeitet:
B

Bleccer

Guest

AW: Lücke zwischen Content und Footer

warum Fehler :D?
Edit ja einfach Inhalt ändern^^
 

Doitsu

Aktives Mitglied

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:
Weil es an der Stelle bloedsinn ist, einen margin - Wert einzufuegen, wenn man Valides HTML & CSS hat kommt der Fehler sich nicht zu Stande.
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

AW: Lücke zwischen Content und Footer

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

Noch nicht viel geschrieben

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:
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.
 
Zuletzt bearbeitet:

Doitsu

Aktives Mitglied

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)
 
Zuletzt bearbeitet:

bra1ved

Noch nicht viel geschrieben

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 ;)


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 ;)
 
Zuletzt bearbeitet:
B

Bleccer

Guest

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

Aktives Mitglied

AW: Lücke zwischen Content und Footer

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

Noch nicht viel geschrieben

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..
 
B

Bleccer

Guest

AW: Lücke zwischen Content und Footer

ja was ist dein Problem musst halt bisschen besser sagen
 

bra1ved

Noch nicht viel geschrieben

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..
 
Zuletzt bearbeitet:

Doitsu

Aktives Mitglied

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.
 
Zuletzt bearbeitet:

bra1ved

Noch nicht viel geschrieben

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.

Danke für die Hilfe, aber das ganze verstehe ich leider überhaupt nicht..
Gibts ne Möglichkeit ohne PHP?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben