Mo3bius: Richtige Positionierung des Footers

SELF-Forum

Richtige Positionierung des Footers

Mo3bius
– Informationen zu den Bewertungsregeln

Hi,
ich versuche im Moment eine Seite nach dem folgenden Muster aufzubauen:

http://www.imgbox.de/?img=f29764p126.jpg

Dafür habe ich jetzt ein div für den Header einen für die Grafi, einen für den Inhalt, einen für die Navigationsleiste und einen für den footer.

  
  div#header {  
    font-size: 1.5em;  
    margin: 0; padding: 0;  
    text-align: center;  
    height:159px;  
    background-image: url(test_header2.jpg);  
  }  
  
div#Grafik  
{  
float: left;  
width: 200px;  
height:100px;  
margin:0;  
background-image: url(test.jpg);  
}  
  
  ul#Navigation {  
    position:absolute;  
    top: 300px;  
    left: 10px;  
    font-size: 0.83em;  
    float: left; width: 18em;  
    margin: 1em 0 1.2em; padding: 0;  
    border: 1px solid silver;  
  }  
  div#Inhalt {  
    background-color:white;  
    margin: 1em 12em 1em 16em;  
    padding: 1em 1em 1em 1em;  
    border: 2px solid #BBBBBB;  
  }  
  
div#Fusszeile {  
    clear: both;  
    font-size: 0.9em;  
    margin: 0; padding: 0.1em;  
    text-align: center;  
    background-color: #fed; border: 1px solid silver;  
  }

So, nun richtet sich der Footer aber nur nach dem div Inhalt aus, nicht mehr nach Der Navigation.
Hat da wer einen Rat?

Mfg Mo3bius

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Richtige Positionierung des Footers

    Steel
    – Informationen zu den Bewertungsregeln

    Hi!

    ul#Navigation {
        position:absolute;

    ---------------------------

    top: 300px;
        left: 10px;
        font-size: 0.83em;
        float: left; width: 18em;
        margin: 1em 0 1.2em; padding: 0;
        border: 1px solid silver;
      }

    Was sollte sich daran auch ausrichten, wenn Du es total aus dem elementfluss herausnimmst?

    Du hast keinerlei HTMLcode gepostet, aber ich fuerchte dein Grundkonzept ist schon nicht gut durchdacht.

    Warum z.B. ein div nur fuer ein Bild? Warum nicht das Bild direkt bearbeiten? Wenn Du Spalten hast, dann koennte ein Div fuer jede Spalte eine gute Loesung sein.

    Schau mal hier: http://www.intensivstation.ch/templates/

    Eventuell laesst sich Das Bild auch als Hintergrund benutzen.

    --
    Trau Dich!
     
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Richtige Positionierung des Footers

      Moebius
      – Informationen zu den Bewertungsregeln

      Ok, hier erstmal der Html-Code dazu.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title>Dreispaltiges Layout mit Kopf- und Fu&szlig;zeile</title>  
<link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
<div id="header"></div>  
<div id="header2"></div>  
<ul id="Navigation">  
  <li><a href="test2.html">Home</a></li>  
  <li><a href="zurperson.html">Zur Person</a></li>  
  <li><a href="../navigationsleisten.htm">Studio</a></li>  
  <li><a href="../mehrspaltige.htm">Angebot</a></li>  
  <li><a href="../navigationsleisten.htm">Kontakt</a></li>  
  <li><a href="../browserweichen.htm">G&auml;stebuch</a></li>  
  <li><a href="../fixbereiche.htm">Anfahrt</a></li>  
  <li><a href="../navigationsleisten.htm">Impressum</a></li>  
</ul>  
  
<div id="Info">  
  <h2>Info-Box</h2>  
  
</div>  
  
<div id="Inhalt">  
  <h2>3-spaltiges Layout mit Kopf- und Fu&szlig;zeile</h2>  
  
<p>blub blub</p>  
</div>  
  
<div id="Fusszeile">Diese Fu&szlig;zeile stellt &uuml;ber die CSS-Eigenschaft 'clear'  
   den Elementenfluss wieder her.</div>  
  
</body>  
</html>

      Wie soll ich das besser machen? Ich möchte das meine Headergrafik nach links unten weitergeht. Dafür habe ich das div Grafik eingefügt. Wenn ich aber einfach 2mal float:left schreibe, dann wird natürlich das 2te Element rechts vom ersten angezeigt.
      Genau deshalb habe position:absolute genommen,damit die Navigationsleiste Links bleibt, aber trotzdem umflossen wird.

      Dein Link ist gut, hilft mir aber in diesem Fall leider nicht weiter.

      Mfg Mo3bius

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Richtige Positionierung des Footers

        Steel
        – Informationen zu den Bewertungsregeln

        Hiho!

        Wie soll ich das besser machen? Ich möchte das meine Headergrafik nach links unten weitergeht. Dafür habe ich das div Grafik eingefügt. Wenn ich aber einfach 2mal float:left schreibe, dann wird natürlich das 2te Element rechts vom ersten angezeigt.

        Total einfach und vielleicht etwas codelastig waere:

        <div>Header</div>
        <div>
         <img>Bild</img>
         <ul>
          <li>Navi</li>
         </ul>
        </div>
        <div>
         Inhalt
        </div>
        <div>
         Fuss
        </div>

        Die beiden Divs fuer die Spalten floaten und fertig.

        Genau deshalb habe position:absolute genommen,damit die Navigationsleiste Links bleibt, aber trotzdem umflossen wird.

        Wird sie ja nicht wirklich. Sieht nur so aus.

        Dein Link ist gut, hilft mir aber in diesem Fall leider nicht weiter.

        Warum nicht? Du nimmst dir ein Layout, das du haben moechtest und fuellst es mit deinen Elementen. Das ist zwar nicht immer optimal, weil man eventuele einige Elemente sparen koennte, aber es ist okay. Vielleicht moechte man spaeter ja wirklich noch etwas unter oder ueber die Navi packen und dann hat man bereits ein Layout mit Spalten und muss nicht umschreiben.

        --
        Trau Dich!
         
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln