[CSS] Footer onder variabele content en een floating layer. - Softwareontwikkeling

zaterdag 6 augustus 2005 11:22

Acties:

One Ring To Rule Them All

Topicstarter

Ben nu al 2dagen aan het rommelen om volgens mij iets heel simpels voor elkaar te krijgen.

Ik heb een site met een header, daaronder een content, die uit twee delen bestaat, de content en een balk met links. Daaronder zou nog een footer moeten komen.

Nu heb ik het allemaal werkend op de footer na, deze valt of over de content heen of halverwege.

Hier staat een voorbld. http://www.progob.nl/redimpact/index.asp

Dit is de HTML code:

HTML:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!-- #include file="functions.inc.asp" -->
<!-- IE in quirks mode -->
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<link href="standaard.css" rel="stylesheet" type="text/css"/>
<title>Tractorpullingteam Red Impact</title>

<body>
  <div id="container">
      <div id="header">Top</div>
            <div id="content">tekst<br/>meer tekst<br/></div>
            <div id="right">rechts?</div>
        <div id="footer">bottom</div>
  </div>
</body>
</html>

Hier de CSS:

Cascading Stylesheet:

body {
  margin: 0px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}

#container{
    position: absolute;
    margin-left: -395px;
    height: 100%;
    left: 50%;
    width: 791px;
    padding: 0px;
}

#header{
  height: 259px;
    background-color: #F4F3D4;
}

#content{
  position: absolute;
  width: 671px;
    background-color:#00FF99;
}

#right{
  float: right;
    width: 120px;
    left: 671;
    background-color:#FF0000;
}

#footer{
    width: 791px;
    height: 40px;
    background-color: #660066;
}

Nu ben ik al gaan zoeken en al van alles tegen gekomen, maar nog niet de oplossing, ik dacht zelf slim te zijn door in het midden een soort van container te maken en dat de footer daar dan wel onder zou hangen, maar dit kreeg ik ook niet werkend.

Verder kwam ik ook e.a. tegen over het box hack model, maar dit schijnt alleen voor IE5.5 te zijn?

Iemand een idee?

If it is broken, fix it. If it ain't broken, make it better!

zaterdag 6 augustus 2005 11:23

Acties:

BlackBurn

One Ring To Rule Them All

Topicstarter

hmm, volgens mij net iets te vroeg gepost, want volgens mij kan ik hier de oplossing in vinden:

http://stijlstek.nl/demo/damascus/

If it is broken, fix it. If it ain't broken, make it better!

zaterdag 6 augustus 2005 12:19

Acties:

BlackBurn

One Ring To Rule Them All

Topicstarter

Pff... is er geen makkelijkere manier, nu heb ik de site omgebouwd (niet online) met de hulp van de site stijlstek, alleen als ik nu een tabel neerzet (ja voor tabulaire data), dan snapt IE niks meer van de footer.

Is het niet mogelijk met de code die ik hierboven gaf?

If it is broken, fix it. If it ain't broken, make it better!

zaterdag 6 augustus 2005 12:38

Acties:

SchizoDuckie

Kwaak

Begin eens met debuggen, dus die rare vbscript tag weg, je doctype netjes boven je html tags, en zorg dat je IE uit quirksmode krijgt, want quirksmode staat voor onvoorspelbaar gedrag.

Probeer het daarna nog eens

(truowens, je voorbeeldje doet het hier niet)

Stop uploading passwords to Github!

zaterdag 6 augustus 2005 12:51

Acties:

crisp

Devver

Pixelated

Je moet #content ook niet absoluut positioneren; dat is de oorzaak van je probleem. Zorg dat die in de flow zit, dan valt je footer er altijd onder.

Intentionally left blank

zaterdag 6 augustus 2005 12:54

Acties:

BlackBurn

One Ring To Rule Them All

Topicstarter

http://progob.nl/redimpact/test.html

Daar staat de nieuwe site, heb Quirksmode weg gehaald en ook de DOC boven de html gezet, verder ook even de VBScript tag weg.

Dit is de css overigens http://progob.nl/redimpact/test.css

If it is broken, fix it. If it ain't broken, make it better!

zaterdag 6 augustus 2005 12:57

Acties:

BlackBurn

One Ring To Rule Them All

Topicstarter

crisp schreef op zaterdag 06 augustus 2005 @ 12:51:
Je moet #content ook niet absoluut positioneren; dat is de oorzaak van je probleem. Zorg dat die in de flow zit, dan valt je footer er altijd onder.

Dit was inderdaad alles, dat ik daar zolang naar gezocht heb

Maar goed, weer wat geleerd, ga weer even verder hobbyen

Iets te vroeg gejuigd.

In IE werkt het, maar in FF pakt die de hoogte van de rechtse float.

[ Voor 12% gewijzigd door BlackBurn op 06-08-2005 12:58 ]

If it is broken, fix it. If it ain't broken, make it better!

Pagina: 1

Reageer