Omega: Footer über die ganze Breite
Eingetragen von wrestler (216)am 04.10.2012 - 10:44 Uhr in
Ich habe eben ein neues Projekt mit Omega gestartet. Ich habe ein eigenes Subtheme erstellt und arbeite mit dem 960 Grid.
Nun möchte ich den Header und den Footer horizontal 100% wie etwas hier http://omega.developmentgeeks.com/.
Ich habe dies mit CSS am Footer auf meiner Seite gemacht. Dann verschiebt es aber den Grid, d.h. der Inhalt des Footers korrespondiert nicht mehr mit dem Rest der Seite. Ich gehe davon aus, dass man das anders bzw. elegeanter und einfacher machen kann.
Aber wie und wo?
Vielen Dank für jegliche Hilfe.
Gruss
Wrestler
| Anhang | Größe |
|---|---|
| Bildschirmfoto 2012-10-04 um 11.43.34.png | 587.06 KB |
- Anmelden oder Registrieren um Kommentare zu schreiben
Du kannst in der UI des
am 04.10.2012 - 11:15 Uhr
Du kannst in der UI des Subthemes in der Konfiguration der entsprechenden Zone die Option " Provide full width wrapper around this zone " aktivieren. Dann bekommst Du einen zusätzlichen Div, der über die ganze Breite geht.
Ja, das funktioniert, so kann
am 04.10.2012 - 14:43 Uhr
Ja, das funktioniert, so kann man den Wrapper zum Beispiel einem Background geben und den Footerinhalt zum Beispiel auf eine 960er Breite, mittig ausgeben.
Leider gibt es da ein Problem, denn Du kannst mit der Omega Struktur keinen Footer anlegen, der unten angezeigt wird, wenn die Höhe der restlichen Zones niederiger als die viewport höhe ist, das musst Du dann mit einer dynamischen Anpassung von zum Beispiel der content-region über JQuery machen. Falls es doch eine Lösung dazu gibt,würde ich mich freuene, darüber zu lesen.
Liebe Grüße
Lars
HTML/CSS
am 04.10.2012 - 16:56 Uhr
Man kann es auch über HTML und CSS lösen. Dazu die page.tpl.php in das Subtheme kopieren und über den Footer einen extra Div einbauen (im Beispiel id="wrapper")
<div id="wrapper">
<div <?php print $attributes; ?>>
<?php if (isset($page['header'])) : ?>
<?php print render($page['header']); ?>
<?php endif; ?>
<?php if (isset($page['content'])) : ?>
<?php print render($page['content']); ?>
<?php endif; ?>
</div>
</div>
dann in der entsprechenden CSS
html, body {
height: 100%;
}
#section-content {
min-height: 100%;
height: auto !important;
height: 100%;
}
#wrapper {min-height: 81%;}
#page {min-height: 81%;}
Nachteil: Durch die Verwendung von % bekommt man den Footer nie hundertprozentig unten ran, so dass entweder immer ein paar pixel frei sind, oder ein kleines bisschen gescrollt werden muss.
Naja, also "ein kleines
am 04.10.2012 - 18:01 Uhr
Naja, also "ein kleines bisschen scrollen" ist halt nicht so gut. Ich habe das mit einer wrapper-div auf min height 100% und footer negativ um die footerhöhe einrücken schon probiert. Doof ist nur, dass der footer da ausgegeben wird, wo noch andere wrapper sind und wenn man page auf min-height 100% macht und danach ein wrapper kommt, kannst den auch auf min-height: 100% setzen, aber er wird nicht 100% haben.
es ist irgendwie wahnsinn, ich hatte es schon soweit, dass sich der footerwrapper korrekt positioniert hat(also sichum seine eigene Höhe nach oben gesetzt hat), aber der Footercontent ist unten stehengeblieben.
- keine absolute positionerung des Footers
- keine falsch verschachtelten divs (validiert)
Würde echt gerne eine omega seite sehen, mit unten positioniertem Footer, die jquery geschichte ist etwas tricky mit admin menue etc. aber auf Omega werde ich nicht verzichten :-)
Liebe Grüße
Lars
Da schein ich nicht der
am 04.10.2012 - 20:46 Uhr
Da schein ich nicht der Einzige mit diesem Anliegen zu sein…
Du kannst in der UI des Subthemes in der Konfiguration der entsprechenden Zone die Option " Provide full width wrapper around this zone " aktivieren. Dann bekommst Du einen zusätzlichen Div, der über die ganze Breite geht.
Das habe ich so gemacht und gehe mit meinem CSS auf den Wrapper…
Es wurde hier jetzt nur vom Footer gesprochen. Verhält es sich mit dem Header genauso? Mein Ziel ist ja dies: http://omega.developmentgeeks.com/
Ich probiers mal so.
Man kann es auch über HTML und CSS lösen. Dazu die page.tpl.php in das Subtheme kopieren und über den Footer einen extra Div einbauen (im Beispiel id="wrapper")
Gibts das schon irgendwo? Wo? Oder muss ich es selber machen?
N´abend. Du musst immer
am 04.10.2012 - 22:43 Uhr
N´abend.
Du musst immer schauen. Templates sind im omega/templates und im alpha/templates Ordner. Diese kopierst Du in Deinen Themenamen/templates Ordner und passt sie an.
Grundsätzlich haben wir aber von einem speziellen footer geredet. Es gibt zu jedem Haupt-Bereich Wrapper, die über die ganze Seitenbreite gehen.
Ganz abgesehen davon sehe ich auf der omega seite keinen Footer, der über 100 % breit wäre.
Und den header kannst Du Dir mal mit Firebug anschauen, der hat einen Zone-wrapper und das Menü ist position: fixed.
background: url("/sites/all/themes/ophiuchus/i/menu-bg.png") repeat scroll left top transparent;display: block;
height: 50px;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;