• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Footer ausrichten

B

brainshock

Lounge-Member
So, mein nächstes Problem.

Wie kann ich einen Footer ausrichten? Er soll bei "left: 182px;" anfangen aber bis zum Ende nach rechts gehen. Wenn ich 100% als width nutze, wird er zu groß. Und eine Prozentangabe von 98% passt auch nicht immer.
 
Ich weiß ja nicht, was Du da rein packen willst,
aber Du könntest den Footer ja bei 0 anfangen lassen und den Inhalt mit padding-left steuern...
Falls das klappt - ungetestet...
 
Oder du trickst dir was und machst den footer mit nem border-left von 182px in der gleichen Farbe wie die Navi.
 
Zuletzt bearbeitet:
also so dann:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Layout</title>
<meta name="author" content="2median Webdesign"></meta>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body		{	width:100%;
			margin:0;
                         padding:0;
                         font-size:16px;
                         font-weight:bold;
                         color:white;
}
#aussen		{
			width:100%;
			background:black;
}
#header		{	background:green;
			height:100px;
}
#navi		{
			width:182px;
                         height:400px;
                         float:left;
                         background:darkblue;
}

#content		{       position:absolute;
			right:0;
			left:182px;
                         height:400px;
                         float:left;
			background:lightgray;
}

#footer		{       clear:both;
                         border-left: 182px solid darkblue;
                         height:50px;
			background:green;
}
</style>
</head>
        <body>

        <div id="aussen">

            <div id="header">header</div>

                <div id="content">content</div>
                <div id="navi">Navigation</div>
            </div>
            <div id="footer">footer</div>
         </div>
    </body>
 
Da geht aber der Footer leider auch über den rechten Rand hinaus.

Ich habe es jetzt so gelöst, dass der Footer 100% breit ist und die ersten 182px von einem weißen DIV überdeckt werden. Der Inhalt wird um 182px nach rechts verschoben.
 
Ich hätte ne kleine Frage!
Ich will mir auhc gerade einen footer basteln.. hättest du vielleicht Lust mir den Link zu deiner Seite zu geben das ich mir n bisschen was abschauen kann?
Wäre echt nett.. bin gerade nämlcih etwas ratlos!

Wäre echt nett!
Hellsing
 
Das ganze geht doch noch wesentlich einfacher:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Layout</title>
<meta name="author" content="2median Webdesign"></meta>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body{
    margin:0;
    padding:0;
    font-size:16px;
    font-weight:bold;
    color:white;
}
#header
{
    background:green;
    height:100px;
}
#navi
{
    width:182px;
    height:450px;
    float:left;
    background:darkblue;
    margin:0;
}

#content
{
    background:#ccc;
    height:400px;
}

#footer
{
    height:50px;
    background:green;
}
</style>
</head>
        <body>

            <div id="header">header</div>
                <div id="navi">Navigation</div>
                <div id="content">content</div>
                <div id="footer">footer</div>
    </body>

wobei der IE (mal wieder) ein paar pixel Abstand läßt.
 
Bei der Lösung beginnt der Footer aber auch schon bei 0. Aber zwischen Navi und Footer sollten in dem Fall 2px Abstand sein.
 
Ich habe den Footer mal auf eine Höhe von 90px verändert. Ergebnis ist im Screenshot zu sehen.
 

Anhänge

  • footer.jpg
    footer.jpg
    19,1 KB · Aufrufe: 16
das war ja der Punkt dabei, dass der Footer plus content eine bestimmte Höhe hat. Die navi muss einfach diese beiden Höhen addiert haben wenn du sie Links floaten lassen willst.

Wenn das nicht gewünscht ist, gibt es auch andere Lösungen ohne Tricks und fummeleien.
 
Nee, ich bin noch nicht fertig mit dem Ganzen.

@Brainie: Ich frage mich immer noch, warum bei Verwendung meines Codes der Footer über den Rand hinausragt. Im IE und im Mozi hab ich das bei mir nicht.

Aber da dieses Layout das Problem hatte, das der footer überschrieben wurde, wenn man zuviel content hatte und über die definierte Höhe kam, möchte ich noch ein anderes Beispiel zu diesem Thema abliefern.
Content und Navi-Breiten sind hier in % angegeben mit float:right versehen.
footer nach wie vor mit border left.

Funktioniert bei mir im IE6 und Mozi tadellos. Bis auf die horizontale Scrollbar im Mozi die mich stört.
Außerdem würd ich es generell dann besser finden man müsste keine Höhe definieren, sondern die Höhe von Navi und Content ergäbe sich aus der Menge des Inhalts und der footer würde automatisch weiter nach unten geschoben, damit man gar keine Scrollbar bräuchte.

http://www.divers.art-stylers.de/css-layout3.html

PS: unten mit dem footer und der Breite vom Border dort in pixel, das funktioniert nicht wirklich wenn man genau hinschaut. Aber ich bin ja auch noch nicht fertig mit det Janze.
 
Zuletzt bearbeitet:
Wenn ich jetzt den content nach unten ausweiten will
also mit overflow:visible;
dann verschiebt sihc um mozilla der footer selbst nich nach unten...
Im IE siehts mehr oder weniger gut aus aber wie gesagt im mozilla halt net.
Hellsing
 
@HsF: eben deshalb hab ich ja overflow:scroll gemacht.

Man könnte auch was tricksen mit ner body background-Grafik. Erstens das Ganze Layout height:100% setzen und eine kleine Grafik erstellen aus 182px blau und der Rest grün.
Dann würde es so aussehen als ob.
In Wirklichkeit würde man gar keinen footer definieren, sondern nur den Inhalt des footers unten drunter schreiben, in einen eigenen <p> trotzdem sähe es so aus als wäre der footer bei 182 px neben der navi.

edit: ;) Meine Güte, mach doch einfach ein klassisches 2 Spalten Layout mit Header Navi Content Footer :D
Ist es denn soo schlimm wenn der footer unter dem Content anfängt? ;)

Na ja ich kanns schon verstehen und wenn man das so haben will, dann muß man halt so lange basteln bis es so ist.
 
Zuletzt bearbeitet:
genau, und ich bin absolut der Meinung, das auch die noch so besondere Anforderung durch saubere Möglichkeiten erstellbar sein soll.

Meine Devise, eine Website soll so aussehen wie ich möchte und das Ganze soll mit dem zur Verfügung stehendenm Code möglichst einfach verwirkichen sein. Gut es gibt Grenzen die sich stark aus dem machbaren herausbewegen weil manche Dinge eben einfach unlogisch oder Bedienerunfreundlich oder zu kompliziert zu realisieren sind, aber im Allgemeinen möchte ich keine Grenzen haben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben