Divs als Frames - Softwareontwikkeling

zondag 31 oktober 2004 13:30

Acties:

Topicstarter

Mensen,

Ik moest een website in frames maken,
maar omdat ik van frames meot braken heb ik het maar met divs geprobeerd maar ik ben nu vastgelopn..

Deze layout werkt WEl in firefox maar niet in IE .. weet iemand wat ik moet veranderen om hem wel in IE te laten werken ??

Bij voorbaat dank..

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
    body {
        margin: 0px;
    }
    #header {
        top: 0px;
        position: absolute;
        height: 100px;
        width: 100%;
        background-color: #000000;
    }
    #footer {
        height: 25px;
        bottom: 0px;
        position: absolute;
        width: 100%;
        background-color: #000000;
    }
    #container {
        position: absolute;
        top: 100px;
        width: 100%;
        bottom: 25px;
        background-color: #999999;
    }
    #left {
        width: 250px;
        float: left;
        height: 100%;
        overflow: auto;
    }
    #right {
        height: 100%;
        overflow: auto;        
    }
</style>
</head>

<body>
<div id="header">
    header
</div>
<div id="container">
    <div id="left">
        ik ben de linkse kolom
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>blabla<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>vven ik ook-->
    </div>
    <div id="right">
        ik ben de rechtste kolom
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>blabla<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>vven ik ook-->

    </div>    
</div>
<div id="footer">
    Footer
</div>
</body>
</html>

[ Voor 31% gewijzigd door maurad3r op 08-03-2009 23:37 ]

zondag 31 oktober 2004 13:33

Acties:

Arjan

copyright is wrong

volgens mij moet je #right ook nog een width meegeven voor IE
Misschien wel handig om even een linkje erbij te zetten, zodat niet iedereen eerst een html file moet bakken.

oprecht vertrouwen wordt nooit geschaad

zondag 31 oktober 2004 13:35

Acties:

maurad3r

Topicstarter

heeft geen effect, het zit hem denk ik ook eerder in de hoogte dan in de breedte

[ Voor 22% gewijzigd door maurad3r op 08-03-2009 23:36 ]

zondag 31 oktober 2004 13:43

Acties:

Verwijderd

en als je t met een tabelletje doet?

code:

<html>
<head>
    <title>Bla</title>
    <style type="text/css">
        #links {
            overflow:auto; height: 200px; background-color: #EEEEEE; width: 200px;
        }
        #rechts {
            overflow:auto; height: 200px; background-color: #EEEEEE; width: 200px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td><div id="links">
            links <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>fgh
        </div></td>
        <td><div id="rechts">
            rechts <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>fgh
        </div></td>
    </tr>
</table>
</body>
</html>

zo bijvoorbeeld..

edit:
ook ff getest, en dit werkt in zowel FF als IE vlekkeloos...

[ Voor 35% gewijzigd door Verwijderd op 31-10-2004 13:44 ]

zondag 31 oktober 2004 13:44

Acties:

Verwijderd

http://limpid.nl/lab/css/fixed/

zondag 31 oktober 2004 13:45

Acties:

Arjan

copyright is wrong

Verwijderd schreef op 31 oktober 2004 @ 13:43:
en als je t met een tabelletje doet?
zo bijvoorbeeld..

ik denk dat het daaraan scheelt ja, kijk hier maar eens:
http://www.w3schools.com/css/pr_class_float.asp

Note in Internet Explorer 4.0:

* This property does not work with inline elements, lists, list items, tables, or table cells

Note in Internet Explorer 5.0:

* This property works with inline elements, lists, and list items

en:
http://www.htmlhelp.com/reference/html40/inline.html

oprecht vertrouwen wordt nooit geschaad

zondag 31 oktober 2004 13:46

Acties:

maurad3r

Topicstarter

Ehm nee,
ik was zoiezo van plan om het nu correct te doen, zonder tables dus en jij geeft een vaste hoogte op wat ook niet de bedoeling is.. (had ik duidelijker moeten vermelden .. sorry)

Header van 100px aan de bovenkant, footer van 25px aan de onderkant en de rest moet opgevuld worden met die rij.. ongeacht welke resolutie dus.

zondag 31 oktober 2004 13:49

Acties:

Arjan

copyright is wrong

Verwijderd schreef op 31 oktober 2004 @ 13:44:
http://limpid.nl/lab/css/fixed/

Deze voorbeelden doen het ook anders in IE en in FF, maar volgens mij kan de TS hier wel mee uit de voeten.

oprecht vertrouwen wordt nooit geschaad

zondag 31 oktober 2004 13:51

Acties:

Verwijderd

Ja klopt, in FF werken ze correct en in IE lijkt het net alsof je frames hebt gebruikt iets wat de klant denk ik wilt zien.

zondag 31 oktober 2004 13:51

Acties:

maurad3r

Topicstarter

Atgast schreef op 31 oktober 2004 @ 13:45:
[...]

ik denk dat het daaraan scheelt ja, kijk hier maar eens:
http://www.w3schools.com/css/pr_class_float.asp

[...]

en:
http://www.htmlhelp.com/reference/html40/inline.html

Die kolom wordt mooi links neergezet dus dat zal wel werken, lijkt me ?
Het probleem zit hem in de hoogte denk ik, zet ik hier 100px neer dan doet hij het wel.. Alleen ik wil geen vaste hoogte omdat hij alle ruimte tussen de header en de footer moet opvullen ..

zondag 31 oktober 2004 13:54

Acties:

Verwijderd

Maurad3r schreef op 31 oktober 2004 @ 13:46:
ik was zoiezo van plan om het nu correct te doen, zonder tables dus

Zonder tables is correct? Het is wel leuk met divjes, maar als het zo niet gaat dan kun je net zo goed tables gebruiken.. Aan de buitenkant is dit toch niet te zien

Ennehm, over fixed waardes, dit werkt ook:

code:

<html>
<head>
    <title>Bla</title>
    <style type="text/css">
        #header {
            height: 100px; background-color: #DDDDDD;
        }
        #links {
            overflow:auto; height: 100%; width: 100%; background-color: #EEEEEE;
        }
        #rechts {
            overflow:auto; height: 100%; width: 100%; background-color: #EEEEEE;
        }
        #footer {
            height: 25px; background-color: #DDDDDD;
        }
        TABLE {
            height: 100%; width: 100%;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td id="header" colspan="2">Headertekst</td>
    </tr>
    <tr>
        <td><div id="links">
            links <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>fgh
        </div></td>
        <td><div id="rechts">
            rechts <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>fgh
        </div></td>
    </tr>
    <tr>
        <td id="footer" colspan="2">Footertekst</td>
    </tr>
</table>
</body>
</html>

zondag 31 oktober 2004 13:58

Acties:

maurad3r

Topicstarter

thnx sidney..
hiermee moet het zeker gaan lukken

.

ook rest allemaal bedankt voor snelle replies

zondag 31 oktober 2004 14:02

Acties:

Rowanov

Kop eens wat anders...

Of je kan hier kijken:
http://www.alistapart.com/articles/eatcake/

Wordt stapsgewijs uitgelegd hoe je frames kan faken met alleen css en er staat een javascript fix bij om de hele zooi ook in IE te laten werken.

zondag 31 oktober 2004 14:26

Acties:

SchizoDuckie

Kwaak

Rowanov schreef op 31 oktober 2004 @ 14:02:
Of je kan hier kijken:
http://www.alistapart.com/articles/eatcake/

Wordt stapsgewijs uitgelegd hoe je frames kan faken met alleen css en er staat een javascript fix bij om de hele zooi ook in IE te laten werken.

ik heb zelf ook zoiets in elkaar geknutseld, vangt je target attribute af. (als de target hetzelfde is als een div id, dan wordt een html pagina in die div in geladen)

voor demo: http://verbouwing.schizofreend.nl/

Stop uploading passwords to Github!

zondag 31 oktober 2004 14:30

Acties:

maurad3r

Topicstarter

waa, nu kom ik erachter dat die van sidney alleen in IE werkt en weer niet in firefox

wat kan ik doen om die van sidney werkend te krijgen ??
vind die manier alvast stukken fijner als met divs

zondag 31 oktober 2004 14:38

Acties:

Verwijderd

Sorry, stom, ik gebruik zelf firefox, maar omdat ik nu voor je in IE aan t kijken was had ik deze in IE getest ipv ook ff in firefox.. Maar ik zie dat 'ie nu te hoog wordt idd. Ik kan zo gauw niks bedenken eigelijk om dat te fixen.

zondag 31 oktober 2004 19:40

Acties:

maurad3r

Topicstarter

mm ik ben er nog steeds niet echt uit, er is steeds net iest niet goed

,

Verwijderd schreef op 31 oktober 2004 @ 13:44:
http://limpid.nl/lab/css/fixed/

Deze voorbeelden zijn ook niet goed omdat dan de totale pagins scrollt, en ik wil 2 aparte frames die ieder apart ook weer kunnen scrollen en een header en een footer.

Ook al veel op google gezocht maar vind nergens echt toegankelijkee handleidingen oid