Footer formatieren

[Mauki]

Hab gerade Schwierigkeiten meinen Footer zu formatieren. Ich habe bis jetzt 2 Lösungen ausprobiert. Bei Lösung 1 sitzt der Footer direkt unter der Sidebar und unter dem Content. Bei Lösung zwei wird der Footer innerhalb des Content ausgegeben.

Nun muß ich bei Lösung 1 zusätzlich zum Footer nochmals ein DIV einsetzen um die Verlängerung der Sidebar zu gewährleisten, ansonsten wäre der Footer komplett weiß. Das klappt zwar aber es kommt teilweise zu unschönen Effekten wo der Hintergrund des Containers durchkommt.

Ich tendiere eher zu Lösung 2. Hier gibt es keine unerwarteten Effekte. Hier ist nur das Problem das ich den Footer mit Abstand zum Text ausgebe. Bei langen Seiten, die länger als die Mindesthöhe sind, klappt das perfekt. habe ich aber weniger Text dann hängt der Footer mitten auf der Seite. Gibt es hier vielleicht ne Möglichkeit den Footer so zu formatieren das er immer einen bstimmten Abstand nach unten hat, der Abstand zum Text aber dynamisch ist?

Die Seite wäre VCP Denkendorf

[Ammaletu]

Müsste man Lösung zwei nicht mit Positionierung hinbekommen? Ich stell mir das in etwa so vor:

.main {
  position: relative;
  top: 0px;
  padding-bottom: 3em;
}

.footer {
  position: absolute;
  bottom: 0px;
}

Damit müsste der Footer immer am Ende von "main" stehen, wo durch die padding-Angabe auch Platz sein sollte. Ist jetzt nur eine spontane Idee, nicht getestet, aber könnte gehen, denke ich.

[Frau_Braun]

Was verstehst du unter Footer? Man kann unter Footer einfach das Ende der HTML-Seite verstehen, wie sie üblicherweise in der footer.php eingegeben wird. Du kannst aber unter Footer auch den graphischen Abschluss einer Seite verstehen: Nämlich eine Fußleiste unter dem Haupttextfeld. Mir scheint, dass Du beide Dinge durcheinanderbringst. Wenn der Footer (nämlich die Info aus footer.php) in der Luft hängt, dann hat das meistens mit dem fehlenden oder falsch plazierten Clearer zu tun (Du erinnerst Dich aus Deinem anderen Thread).

Wenn Du Lösung 2 haben willst, setze die HTML-Angaben, die für die Graphik der Fußleiste zuständig sind, in den Container #content für das Hauptfenster in der index.php. (Beim Stylesheet musst Du natürlich noch darauf achten, dass für die Fußleiste keine Breite angegeben ist, die derjenigen des Haupttextfensters in die Quere kommt.) Danach kommt erst die Anweisung get_footer. In der footer.php braucht dann nichts mehr zu stehen außer </body> und </html> und möglicherweise der Abschluss von #container; dann gibt es hoffentlich auch keinen Ärger mehr mit dem in der Luft hängenden Footer.

Ach so, ja: Nicht vergessen, die Höhe der Fußleiste in die Gesamthöhe einzubeziehen (Das war schon mal eine Fehlerquelle bei einem deiner letzten Threads).

Dies in aller Kürze.

[Mauki]

Zitat von Frau_Braun

Wenn Du Lösung 2 haben willst, setze die HTML-Angaben, die für die Graphik der Fußleiste zuständig sind, in den Container #content für das Hauptfenster in der index.php. (Beim Stylesheet musst Du natürlich noch darauf achten, dass für die Fußleiste keine Breite angegeben ist, die derjenigen des Haupttextfensters in die Quere kommt.) Danach kommt erst die Anweisung get_footer. In der footer.php braucht dann nichts mehr zu stehen außer </body> und </html> und möglicherweise der Abschluss von #container; dann gibt es hoffentlich auch keinen Ärger mehr mit dem in der Luft hängenden Footer.

Hier steig ich nicht ganz durch. Was meinst du mit Graphik der Fußleiste?

So hab ich es aktuell, da hängt aber die Fußzeile, das ist die Ausgabe der footer.php mitten auf der Seite.

Am besten die Seiten mal durchklicken dann weiß man was ich mit "hängt mitten auf der Seite" meine.


Meine index.html

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="sidebar">
<?php get_sidebar(); ?>
</div>

<div class="content">

<div class="breadcrumb">
<?php
if (class_exists('breadcrumb_navigation_xt'))
{
// Display a prefix
echo 'Sie befinden sich hier: ';
// new breadcrumb object
$mybreadcrumb = new breadcrumb_navigation_xt;
// Apply options
$mybreadcrumb->opt['static_frontpage'] = true;
$mybreadcrumb->opt['title_home'] = 'VCP Denkendorf';
$mybreadcrumb->opt['separator'] = ' &raquo; ';
$mybreadcrumb->opt['title_blog'] = '';

// Display the breadcrumb
$mybreadcrumb->display();
}
?>
</div>
<div class="main">

<?php the_content(); ?>

<?php get_footer(); ?>
</div>

</li>
</div>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

[Frau_Braun]

Zitat von Frau Braun

In der footer.php braucht dann nichts mehr zu stehen außer </body> und </html> und möglicherweise der Abschluss von #container; dann gibt es hoffentlich auch keinen Ärger mehr mit dem in der Luft hängenden Footer.

Das kannst Du jetzt erst mal vergessen, nachdem ich gesehen habe, dass und wie Du die Box #footer definiert hast.

Also noch mal langsam:

Fußleiste
Die Fußleiste ist das, was bei Dir #footer heißt: Ein Balken, der unten quer über die Seite läuft, oder ein anschließender Hinweis, oder Administrationslinks, oder was das Herz sonst noch so begehrt. Das alles sind graphische Abschlüsse, denn sie markieren graphisch den unteren Rand des dargestellten Inhalts. Jeder merkt dann: hier ist Ende Gelände. Bei Dir sind steht da:

"2000 - 2008 usw. - letze Aktualisierung: 18. August 2008" (Rechtschreibung wie bei Dir).

footer.php
Die Fußleiste solltest Du aber nicht verwechseln mit footer.php. Dort steht (ganz allgemein gesprochen) vor allem und als allerwichtigstes drin, dass der Code der HTML-Seite hier endet. Es können natürlich auch noch andere Sachen drin stehen, besonders wenn man diese nicht für jedes Template neu definieren will.

Struktur:

header.php
Header
#container Anfang -------------------------------------------
---
index.php
get_header
Sidebar Anfang und Ende
#content Anfang -------------------------------------
#breadcumb Anfang und Ende
#main Anfang und Ende
get_footer (=footer.php)
----
footer.php
#footer (=Fußleiste) Anfang und Ende
#content Ende ---------------------------------------
#container Ende -----------------------------------------------
</body>
</html>

Reihenfolge:

Logischerweise ist die Anweisung
<?php get_footer(); ?>
immer die letzte Anweisung, die in der index.html zu finden ist!

Die Box #footer, die offensichtlich in der footer.php steckt, gehört nicht in die Box #main, sondern nur in die Box #content, also nach #main.
Die Abschlüsse (</div>) von #content und #container gehören folglich ebenfalls in die footer.php und nicht in die index.php.


Hinweis:

Warum steht die Zeile
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
nicht innerhalb von #content und #main?

Warum stehen die Zeilen
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
nicht ebenfalls dort?

Die Sidebar wird anscheinend nicht korrekt dargestellt. Was soll das "17:00", das vermutlich in einen nicht sichtbaren Kontext gehört?

Allgemeiner Hinweis
In der Stylesheet schreibt man alle Boxen, die nur einmal auf einer Seite (aber durchaus mehrmals in einer Webseite) vorkommen so: #box und nicht so: .box. Das letztere ist eine Klasse, die Du den Elementen zuweist, die im Prinzip mehrmals vorkommen können (meistens ist das Text) und die individuell gefüllt werden.

Ein kleiner Tip
Du musst Dir die einzelnen Container und Boxen wirklich wie einen Baukasten von ineinander steckenden Schachteln vorstellen. Mach Dir eine Zeichnung der ineinander und nebeneinander liegenden Schachteln. Außerdem empfehle ich Dir dringend die Anschaffung eines visuellen CSS- und eines HTML-Editors, bei dem Du eins zu eins sehen kannst, welche Veränderungen an den CSS-Angaben und an der HTML-Struktur welche Auswirkungen auf das Design haben.

[Mauki]

Hab jetzt mal bischen rumprobiert nach deinen Vorschlägen aber irgendwie sieht das jetzt anders aus

Die Box main hast du wohl falsch verstanden. Die definiert die Höhe und umschließt die Sidebar und den Content!

Geh jetzt an die Sonne und lass die Seite liegen