|
|||
Header/Footer Problem
Hallo zusammen,
ich habe ein kleines Problem bei dem Layout meiner Website. Ich möchte einen Header, einen Footer sowie einen Inhaltsteil haben. Der Header soll über die komplette Seitenbreite gehen. Der Inhalt und der Footer sollen jedoch beide eine fixe Breite haben. Nun habe ich versucht dieses Problem mit einem Wrapper zu lösen. Dieser steht außerhalb des Headers und umschließt somit den Inhalt und den Footer. Da der Wrapper (um den Footer am Ende der Seite zu halten) eine Höhe von 100% haben muss, verschiebt sich der Footer um die 300px Höhe des Headers nach unten, was natürlich unschön ist. Meine eigentliche Intention ist das der Footer immer am Ende der Seite steht und bei längeren Seiten nur sichtbar ist wenn man ganz nach unten scrollt. HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <style> * { margin: 0px; padding: 0px; } html, body { height: 100%; } header { height: 300px; width: 100%; background: #F00; } #wrapper { position: relative; height: 100%; margin: 0 auto; width: 700px; } footer { background: #00F; height: 100px; position: absolute; width: 100%; bottom: 0; } </style> </head> <header> </header> <div id="wrapper"> <section> Cusaperi nosaniendam, simoluptam quost, et quati dolor aut ma consedi volorro et pererio temquis dolum fugiaspellam quaerum corio. Itiniti illeceperi audae sam fuga. Ut rem rem ilicimp elentet laborum andentibus plaut adi comniet elis porrorum ea vid quae. Nequia alit fuga. Lupis aliquam, utam, atatenis est esto eossit que latatae cuptati consequam con num is velitiore comnim il int at estrume magnimus, tem fuga. Nequidus ium et et et officieniet quoditi unt offictate elit unt que imilit ium endit vit andio quam ut quis ut volum quo mil ium voluptatum ut occust la veriore voluptassit quae consequat ipsumqu ossinci enihiliquat ad que dolupiet laborae culpa conse iduntem qui debitem porenec ercius, untoreh enimet volorep edictur mo berchilitio eost rerumquo odignatur aut et isquia sumquidest quis qui necea sit verumqui optur, ex erchici mustia alitinis veliatus et, officias acienda nosant. Evel iligniandes as et voluptatus, oditatur asped mo qui il magnihil ilitatis reium asped ut de latur ab id maximi, volesequate pernatis dolorro et andae estiis net, que sum idem quibusda nestrunt por sequas modionse exeriasped est od qui core pa ipit quunt pratem eaquoditam aliqui undunt quas alit que nobis endit ent venis es nestrum et, quae voluptatis erumet autentur, alitate quam, erumquam quidunt magnim re, sint ducient quias ullam quibus eos nita aut exeribe arumquunt eveleste vel iliquidis volupta spelestem iumet acias aut rest voluptius magnatem. Ucienias doluptatur, ommos delendae. Ihilluptas sunt ea autecaturepe consedi pictore aut evel mo ventist, inis denieni magnatus dolupta tionsed eossimuscid quistem aut dolor autenitas nobis in conem. Neque voluptati temquatum consed qui tecepelene velluptati bearum qui corporehenet minum que volor re non rae. Cias doluptius atemporibus, que dolestia ni cus dolleceaquam volora dolo te ni as est que estet et doluptur, nus aut il im raerum apientiosam, tem labori velique que eume omnime vidunt fugianis nus, quasperum venim fugitat esciusdam sitem faccuptatur? Elendi con corem a volumqui tecae eos modi cullit, conseque sit et pa quameni hillorio blaborro berupic ipsandebis quo te occus sequian dernat mil maiorehenimo blaci </section> <footer> </footer> </div> <body> </body> </html> |
Sponsored Links |
|
||||
Wenn du schon neue Elemente wie "header" oder "footer" nutzt, solltest du auch den HTML5-Doctype nutzen.
Zur Lösung deines Problems: Sticky-Footer ist das Zauberwort. (vgl. Sticky Footer | CSS-Tricks)
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
|
||||
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
|
|||
Bitte keine Crosspostings erstellen -> Header/Footer Problem
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Entschuldigt das Crossposting.
Diese Lösungen haben mir beide nicht weitergeholfen. Mein Wrapper bwz. mein Inhalt soll eine feste Größe besitzen und nicht je nach Fenstergröße zentriert werden. Daher funktioniert der flexible Footer nicht... Gibt es noch weitere Ideen? |
|
||||
Morgen,
Zitat:
Viele Grüße, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
|
|||
Nein das Prinzip ist genau so. Du hast schon recht, der Container für Inhalt und Footer ist der einzige der zentriert ist und eine feste Pixelbreite hat. Dieses Prinzip soll auch so bleiben, es soll lediglich der Footer richtig funktionieren.
Vielleicht steh ich grade auf dem Schlauch aber wie kann ich das "problemlos anpassen"? |
|
||||
Morgen,
Zitat:
Viele Grüße, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
|
|||
Wahrscheinlich hast du die margins nicht an deine Verhältnisse angepasst oder etwas anderes übersehen, denn so wie lottikarotti es gezeigt hat ist das gängige Vorgehen in diesem Fall. Bitte zeige uns dann mal deinen Code, den du verwendest hast.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Font der Überschrift ändern (Problem) | artist | CSS | 2 | 07.12.2007 10:01 |
Design zu CSS/HTML verarbeiten - Problem häufen sich. | Grafikamateur | CSS | 2 | 06.08.2007 09:57 |
Problem mit WordPress und dem Bilder Upload | Maxefix | Serveradministration und serverseitige Scripte | 0 | 19.12.2006 14:58 |
Problem bei Div's - zwei mal das gleiche und doch nicht ... | Niriel | CSS | 10 | 09.06.2005 17:39 |
Problem mit einem CSS Layout | nARC | CSS | 20 | 21.05.2005 06:28 |