Wie kann ich diesen Kundenwunsch (Gestaltung einer Seite) am besten umsetzen?

**Raynaldo** · 06.01.2012, 22:25

Hallo,

ich beschäftige mich schon den ganzen Abend mit dem Layout einer Seite, komme aber nicht so richtig weiter.

Der Kunde möchte die Seite so umgesetzt haben:

seite.jpg

Also im Hintergrund die Skyline, die fix am Fuß des Browser-Fensters sitzt. Dazu noch der Himmel und die Wolken.
Ist das Browserfenster breiter als das Bild der Skyline, soll einfach nur der Hintergrund grün sein, und zwar so hoch wie der tiefste grüne Punkt des Bildes (rechts und links außen bei diesem Bild).

Über der Skyline liegt der Content-Bereich, der zwar auf dem Bild in sich abgeschlossen ist, je nach Textlänge des Inhaltes aber nach unten wandert, so dass der Besucher scrollen muss. In diesem Content-Bereich findet sich der Header, das Menü und der Inhalt der Seite.
Außerhalb des Content-Bereiches liegt noch eine kleine Navigation für Impressum...etc.

Mein erste Idee war, um den #wrapper (graue Fläche) noch ein weiteres DIV nur für das Hintergrundbild (Skyline) zu machen. Da fehlt aber dann noch der Himmel/die Wolken. Des weiteren habe ich mich dann ziemlich in absoluten Positionierungen verloren, so dass das Endergebnis in allen Browsern anders aussah.

Hat vielleicht jemand eine Idee für einen Ansatz, wie man das umsetzen kann?

Danke schon mal und viele Grüße
Raynaldo

**tblumrich** · 06.01.2012, 23:49

Hi.

Jetzt mal ohne es getestet zu haben würde ich grundsätzlich analog zu einer StickyFooter - Methode vorgehen. Z.B.:
http://de.contaowiki.org/Footer_am_u..._positionieren (Hier gehts weniger darum den Footer nach unten zu legen sondern dem wrapper 100% Höhe zu verpassen). Gleichzeitig darf dieser aber keine feste Breite im Seitenlayout bekommen und auch nicht positioniert werden!

So gibst du dem body dein Grün, dem wrapper dein Hintergundbild mit der Skyline und dem Himmel und positionierst es unten und horizontal zentriert. Gleichzeitig gibts du dem wrapper als Hintergrundfarbe das Blau vom obersten Pixel deines Bildes.

Um deine Inhalte zu zentrieren, musst du nun #header, #container und ggf. #footer per margin:0 auto; zentrieren und diesen deine gewählte Layoutbreite angeben.

Jetzt mal rein theoretisch...

Gruß
Thomas

**MiTsch** · 07.01.2012, 10:26

Hallo Raynaldo,

wie es schon tblumrich beschrieben hat ist dein Vorhaben sicherlich am besten mit dem StickyFooter umzusetzen.
Schau mal hier:

Viele Grüße
MiTsch

**Raynaldo** · 10.01.2012, 14:31

Vielen Dank euch beiden. MiTsch, Du hast Dir da ja gut Mühe gemacht. Herzlichen Dank!!

Habe es jetzt umgesetzt bekommen. Zwar nicht 100%ig wie ihr vorgeschlagen hattet (gebe zu, eure Variante ist noch etwas eleganter), aber wenn nichts unvorhergesehenes passiert, lasse ich es so.

Viele Grüße
Ray

**Raynaldo** · 10.01.2012, 16:47

OK, hab es dann doch noch so geändert, wie ihr es vorgeschlagen hattet

Hätte aber noch zwei Fragen dazu:

1. Sehe ich das richtig, dass ich dazu im Template den #footer aus dem #wrapper lösen muss, so dass der #footer breiter ist als der #wrapper? Anders klappt es nämlich nicht

?

2. Am Ende des grauen Bereiches (also am Ende des #wrapper) soll eine Art Fußzeile erscheinen (Sponsorenlogos, die auf jeder Seite auftauchen sollen). Ebenso soll wie im obigen Bild außerhalb des grauen Bereiches eine Art Metanavigation auf jeder Seite auftauchen.
-> wie setze ich das am besten um?

Erste Ideen von mir: eigene Layoutbereiche, oder zumindest den Text der Metanavigation in den #footer und dann absolut positionieren!?

Vielen Dank schon mal für ein Feedback

Viele Grüße
Raynaldo

**MiTsch** · 10.01.2012, 21:00

Hallo Rynaldo,

1. Sehe ich das richtig, dass ich dazu im Template den #footer aus dem #wrapper lösen muss,

Ja damit dieser immer unten am Bilschirmrand positioniert werden kann.

so dass der #footer breiter ist als der #wrapper?

Nein, musst Du nicht.

Anders klappt es nämlich nicht

?

Doch, geht auch anders versuche mal dieses Template (fe_page_sticky_footer.tpl):

Code:

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<?php echo $this->stylesheets; ?>
<?php echo $this->mooScripts; ?>
<?php echo $this->head; ?>
</head>
<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper">
<?php if ($this->header): ?>
<div id="header">
<div class="inside">
<?php echo $this->header; ?> 
</div>
</div>
<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>
<div id="container">
<?php if ($this->left): ?>
<div id="left">
<div class="inside">
<?php echo $this->left; ?> 
</div>
</div>
<?php endif; ?>
<?php if ($this->right): ?>
<div id="right">
<div class="inside">
<?php echo $this->right; ?> 
</div>
</div>
<?php endif; ?>
<div id="main">
<div class="inside">
<?php echo $this->main; ?> 
</div>
<?php echo $this->getCustomSections('main'); ?> 
<div id="clear"></div>
</div>
<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->
</div>
<?php echo $this->getCustomSections('after'); ?>

</div>
<?php if ($this->footer): ?>
<div id="footer">
<div class="inside">
<?php echo $this->footer; ?> 
</div>
</div>
<?php endif; ?>
<?php echo $this->mootools; ?>
</body>
</html>

2. Am Ende des grauen Bereiches (also am Ende des #wrapper) soll eine Art Fußzeile erscheinen (Sponsorenlogos, die auf jeder Seite auftauchen sollen). Ebenso soll wie im obigen Bild außerhalb des grauen Bereiches eine Art Metanavigation auf jeder Seite auftauchen.
-> wie setze ich das am besten um?

Ich würde sagen eigener Html-Code oder Individuelle Navigation und der Rest ist CSS.

Viele Grüße
MiTsch