Divs als Frames

Pagina: 1
Acties:

  • maurad3r
  • Registratie: Oktober 2004
  • Laatst online: 18-05 20:08
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!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 ]


  • Arjan
  • Registratie: Juni 2001
  • Niet online

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


  • maurad3r
  • Registratie: Oktober 2004
  • Laatst online: 18-05 20:08
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 ]


Verwijderd

en als je t met een tabelletje doet?
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 ]


  • Arjan
  • Registratie: Juni 2001
  • Niet online

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


  • maurad3r
  • Registratie: Oktober 2004
  • Laatst online: 18-05 20:08
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.

  • Arjan
  • Registratie: Juni 2001
  • Niet online

Arjan

copyright is wrong

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


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.

  • maurad3r
  • Registratie: Oktober 2004
  • Laatst online: 18-05 20:08
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 ..

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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>

  • maurad3r
  • Registratie: Oktober 2004
  • Laatst online: 18-05 20:08
thnx sidney..
hiermee moet het zeker gaan lukken :).

ook rest allemaal bedankt voor snelle replies

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

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.

  • SchizoDuckie
  • Registratie: April 2001
  • Laatst online: 18-02-2025

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!


  • maurad3r
  • Registratie: Oktober 2004
  • Laatst online: 18-05 20:08
waa, nu kom ik erachter dat die van sidney alleen in IE werkt en weer niet in firefox 8)7

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

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. :S

  • maurad3r
  • Registratie: Oktober 2004
  • Laatst online: 18-05 20:08
mm ik ben er nog steeds niet echt uit, er is steeds net iest niet goed :S,
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
Pagina: 1