• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Footer im Header?!

W

wers1

Mitglied
Hallo Leute,
ich habe (mal wieder) ein Problem: Habe eine Seite mit einigen Schwierigkeiten aufgebaut und wollte nun ganz einfach einen Footer unten dran setzen, aber nixda, der footer erscheint unter dem header. Leider soll die Seite dynamisch werden und ich kann somit wahrscheinlich eher weniger mit margin-top und co. arbeiten.

Hier die codes:

HTML: 
<body>
    <div class="main">
      <div style="width:150px;height:60px;float:left;"> LOGO </div>
      <div class="buttons"><a href="vorschlaege.php"><p class="buttons_text1">Hausvorschl&auml;ge</p></a></div>
        <div class="spaces">&nbsp;</div>
      <div class="buttons"><a href="entstehung.php"><p class="buttons_text2">Entstehung eines Hauses</p></a></div>
        <div class="spaces">&nbsp;</div>
      <div class="buttons"><a href="bauplaetze.php"><p class="buttons_text2">Aktuelle Baupl&auml;tze</p></a></div>
        <div class="spaces">&nbsp;</div>
      <div class="buttons"><a href="bvs.php"><p class="buttons_text2">Aktuelle Bauvorhaben</p></a></div>
        <div class="spaces">&nbsp;</div>
      <div class="buttons"><a href="energiesparpass.php"><p class="buttons_text1">Energiesparpass</p></a></div>
      <div style="clear:left;"> </div>
    </div>
    
    <div class="head"><img style="margin-top:16px;margin-left:-160px;" src="spruchbilder/arnold_beckert_PERSIEN.jpg" />
      <div class="content">
      
      <!--INHALT-->
      <h1>Hausvorschl&auml;ge</h1><br />
      test<br /><br /><br />
      <!--INHALT-Ende-->
      
      <img style="position: absolute;left: 50%;margin-top: 0px;margin-left: -409px;" src="contend-end.png" />
      </div>
    </div>
        <div class="footer">
        Test Test
        </div>    
  </body>

Code: 
body {
background-image:url(background_main.jpg);
font-family:Verdana,sans-serif,Arial;
color:white;
font-size:small;
text-align:center;
}

a {
color:white;
}

h1 {
color:black;
font-size:1.03em;
}

h1:first-letter {
color:#db841d;
font-weight:900;
font-size:1.07em;
}

.main {
width:1024px;
text-align: left;
margin: 0 auto;
font-weight:bold;  
}

.buttons {
width:130px;
height:60px;
background-image:url(background_buttons.gif);
float:left;
text-align:center;
}

.buttons:hover {
text-decoration:underline;
}

.buttons_text1 {
margin-top:25px;
}

.buttons_text2 {
margin-top:17px;
}

.spaces {
width:6px;
height:60px;
background-image:url(background_spaces.png);
float:left;
}

.head {
background-image:url(orange_head.jpg);
height:297px;
width:100%;
background-repeat:repeat-x;
position:absolute;
left:0px;
}

.content {
background-color:#feead0;
width:813px;
height:auto;
position: absolute;
left: 50%;
margin-top: -5px;
margin-left: -490px;
color:black;
text-align:left;
padding-left:5px;
}

.footer {
width:818px;
height:auto;
position: absolute;
left: 50%;
margin-left: -490px;
color:white;
text-align:center;
}

da ich nciht weiß wo dier fehler ist, steht da bissl viel code...

Helft mir bitte

Felix
 
Werbung:
Eine Antwort auf Deine Frage findest Du wahrscheinlich, wenn Du hier nach "Footer" suchst.

Aber ich möchte nebenbei bemerken, dass Dein HTML-Code komisch aussieht. div-Suppe und fehlende Semantik. Mein Tipp daher: Lerne erstmal HTML, bevor Du Dich auf CSS stürzt, denn CSS ist nur logisch und einfach, wenn die Basis aus HTML valide und semantisch sinnvoll ist.
 
nja also valid ist mein code, allerdings nicht durchsichtig, liegt aber vllt auch an meiner kranken denkweise ;) hamm sich schon viele drüber aufgeregt, hat aber bis jetzt auch keine probs gemacht.
 
Werbung:
wers1 schrieb:
nja also valid ist mein code
Zum Vergrößern anklicken....
Ich spreche nicht von der Syntax, sondern von der Semantik.

HTML-Code muss valide sein, damit der Browser weiß, was er machen soll, und er muss semantisch korrekt sein, damit Clients, die den HTML-Code analysieren (Suchmaschinen, Vorlesebrowser, ...) diesen auch verstehen können.

Du packst irgendwie alles in <div> und lässt dabei die Semantik völlig unter den Tisch fallen. <div> beschreibt eine Gruppe von mehrerern Elementen. Das ist bei Dir nicht der Fall, also ist die Auszeichnung falsch. Ich nehme an, die div-Suppe oben soll ein Menü sein. Ein Menü zeichnet man als Liste aus, weil es eine Liste von Links ist.
Weiter unten ist Text, der nicht als solcher ausgezeichnet ist, stattdessen wird er in <div> gepackt. Das macht keinen Sinn und wird daher falsch interpretiert.

hat aber bis jetzt auch keine probs gemacht.
Zum Vergrößern anklicken....
Weil Du den Code nur aus der Sicht eines Browsers, also eines Clients, der den Inhalt visuell darstellt, betrachtest. Browser sind aber eben nur ein Teil der Clients, die Webseiten "lesen". Suchmaschinen z.B. erkennen eine Überschrift nur, wenn Du eines der Überschriftstags verwendest. Suchmaschinen erkennen Textabsätze nur, wenn Du sie als solche auszeichnest. Dafür ist ja HTML da.
Das problematische gipfelt in mehrfach verschachtelten Tabellenlayouts, die von Vorlesebrowsern dann völlig falsch vorgelesen werden, weil sie tabellarische Daten enthalten. Eine Seite mit Tabellenlayout aber wie eine Tabelle vorzulesen ist in den wenigsten Fällen richtig.
 
oje.. nunja also die listen als html zu scvhrieben wäre da auhc ni das problem, nur diese so in css zu deklariern dasss die dann auch danach aussehen dürfte mir noch etwas schwer fallen, deshlab war das wohl die bequemlichkeit das so zu machn...
 
Werbung:
wers1 schrieb:
oje.. nunja also die listen als html zu scvhrieben wäre da auhc ni das problem, nur diese so in css zu deklariern dasss die dann auch danach aussehen dürfte mir noch etwas schwer fallen, deshlab war das wohl die bequemlichkeit das so zu machn...
Zum Vergrößern anklicken....
Liest du das, was du geschrieben hast?
 
wers1 schrieb:
oje.. nunja also die listen als html zu scvhrieben wäre da auhc ni das problem, nur diese so in css zu deklariern dasss die dann auch danach aussehen dürfte mir noch etwas schwer fallen, deshlab war das wohl die bequemlichkeit das so zu machn...
Zum Vergrößern anklicken....
Naja, aber dann liegt doch die Schwierigkeit im CSS. Sinn macht es jedenfalls nicht, dann deswegen das HTML zu verhunzen.

HTML hat schließlich rein gar nichts mit dem Aussehen zu tun. Das muss man sich immer vor Augen halten, damit haben die meisten Probleme - die Einfachheit von HTML anzuerkennen.
 
Werbung:
Das habe ich gemeint, ich wusste nur den Link nicht und war selbst zu faul zum Suchen :-)
Danke prm, auf Dich ist Verlass ;-)
 
Es gibt doch auch eine Suchfunktion auf meiner Seite.

Ach wie ist es wieder schön hier, seit du wieder da bist, Efchen ;Jump
 
prm,
dieser Hack funktioniert zwar, führt aber immer wieder zu Missverständnissen:
Code: 
min-height: 100%;
height: auto !important;
height: 100%;
Dieser verbreitete Hack hat dazu beigetragen, daß viele Webmaster glauben der IE < 7 kennt !important nicht.
Besser wäre der einfache sternchen-Hack * html height: 100%;
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben