zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Header/Footer Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.08.2013, 09:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2013
Beiträge: 3
Semi8 befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.08.2013, 10:18
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.08.2013, 10:25
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallöchen,

auf Anhieb fällt mir nur folgendes ein:

- Flexibler Footer

Viele Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #4 (permalink)  
Alt 28.08.2013, 10:31
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Bitte keine Crosspostings erstellen -> Header/Footer Problem
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 28.08.2013, 10:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2013
Beiträge: 3
Semi8 befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 28.08.2013, 11:08
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Morgen,

Zitat:
Zitat von Semi8 Beitrag anzeigen
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...
Das einzige was in meinem Beispiel zentriert wird, ist der Container für den Inhalt und der Footer. Das lässt sich aber problemlos anpassen. Ansonste passt mein Beispiel (meiner Meinung nach) auf deine Beschreibung - also entweder hast du uns Informationen vorenthalten oder aber du bastelst mal ein lauffähiges Beispiel (mit Inhalt innerhalb des <body>-Elements!!) zusammen und stellst es online.

Viele Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #7 (permalink)  
Alt 28.08.2013, 11:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2013
Beiträge: 3
Semi8 befindet sich auf einem aufstrebenden Ast
Standard

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"?
Mit Zitat antworten
  #8 (permalink)  
Alt 28.08.2013, 11:20
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Morgen,

Zitat:
Zitat von Semi8 Beitrag anzeigen
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"?
Dann beschreibe was bei dir nicht richtig funktioniert - ich kann deine Gedanken leider nicht lesen. Bei mir sitzt der Footer am unteren Ende der Seite bis der Inhalt mehr Platz benötigt. Dann wird der Footer nach unten verschoben.

Viele Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #9 (permalink)  
Alt 28.08.2013, 11:39
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:56 Uhr.