Toon posts:

[HTML/CSS] Pagina opmaken met div's in 5 delen

Pagina: 1
Acties:
  • 140 views sinds 30-01-2008
  • Reageer

woensdag 15 september 2004 17:34

Acties:

Verwijderd

Topicstarter
Goedemiddag allemaal,

Ik ben bezig met een website en gebruik daarvoor CSS voor de layout (in div style). Nu wil ik de pagina opdelen in 5 delen, waarvan er eentje afhankelijk is van de gebruikte resolutie.

Het idee:
code:
1
2
3
4
5
6
7
8

__________________________
|                   TOP                         |
|_________________________|
|          |                              |        |
|     L   |                M            |   R   |
|_____|_______________|____|
|                                                  |
|_________BOTTOM__________|


Klopt niet helemaal meer maar ik denk dat het idee duidelijk is! :)
Nu wil ik dat de 4 buitenste delen (T,L,R,B) gewoon een vaste breedte + hoogte hebben. Dit is ook in de CSS aangegeven.

Alleen deel M moet afhankelijk van de resolutie zijn. Dus stel bij een reso van
800x600 ---> T: 800x100; B: 800x100; L: 100x400; R: 100x400;
Dan moet M het volgende zijn: 600x400

Dat kan dynamisch berekend worden door: totaalWidth - LWidth - RWidth && totaalHeight - THeight - BHeight

Hierbij wil ik ervoor zorgen dat B altijd aan de onderkant vastzit en dat er _nooit_ een scrollbar is (deze komt in het M deel).

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

Ik ben begonnen met het maken van de div's, hierbij heb ik R,L en M in een container geplaatst om de hoogten evenhoog te houden.

Ook heb ik de container + B+T in een container geplaatst om de hoogte te binden aan de resolutie. Nu lukte het alleen niet helemaal goed.

Ik zal hieronder mijn HTML code plaatsen:
PHP:
1
2
3
4
5
6
7
8
9

<div id="total">
                <div id="top">top</div></a>
                <div id="container">
                        <div id="left">left</div>
                        <div id="main">main</div>
                        <div id="right">right</div>
                </div>
                <div id="bottom">bottom</div>
</div>


Dit lijkt logisch en zou mijns inziens goed moeten functioneren.

Het probleem zal daarentegen wel in mijn CSS liggen. Ik heb daarvoor ik zoveel gewijzigd waardoor ik de bomen niet meer door het bos zie. Naar aanleiding van velen topics en websites zoals w3c & brainjar en nog meer.

Toch hier maar even mijn huidige CSS.
PHP:
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

#total {
        width: 100%;
        height: 100%;
}

#container {
        width: 100%;
        height: 60%;
        border: 1px solid white;
        color: white;
}

#top {
        height: 100px;
        background-color: black;
        border: 2px solid green;
}

#left {
        position: absolute;
        height: 100%;
        width: 150px;
        left: 0;
        background-color: green;
        border: 2px solid black;
}

#main {
        position: relative;
        left: 150px;
        height: 100%;
        background-color: navy;
        border: 2px solid yellow;
}

#right {
        position: absolute;
        float: left;
        right: 0;
        height: 100%;
        width: 150px;
        background-color: green;
        border: 2px solid black;
}

#bottom {
        height: 100px;
        border: 2px solid green;
        background-color: black;
        bottom: 0px;
}


Dit werkt niet helaas. Het lukt mij vooral niet om de bottom aan de onderkant vast te zetten en het middelste gedeelte de dynamische hoogte aan te laten nemen. (hiervoor staat nu 60% in de sheet).

Ook heb ik al veel getest met float maar daarbij leek het wel of er elementen over elkaar heen werden geplakt wat niet de bedoeling is.

Alvast bedankt voor het lezen van dit hele lange verhaal.

woensdag 15 september 2004 17:53

Acties:
  • FrankvR
  • Registratie: Mei 2004
  • Laatst online: 01-01-2025

FrankvR

Dit is een oplossing, maar ik denk niet de mooiste, de 100% height bij container, en de 100% width bij de main, zou je eigen moeten vervangen door die waarde die je uit je formule kreeg (javascript).

Succes ermee

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
65
66
67
68
69
70
71
72

<html>
<style>
#total { 
        width: 100%; 
        height: 100%; 
} 

#container { 
        width: 100%; 
        height: 100%; 
        border: 1px solid white; 
        color: white; 
} 

#top { 
        height: 100px; 
        background-color: black; 
        border: 2px solid green; 
} 

#left { 
        position: absolute; 
        height: 100%; 
        width: 150px; 
        left: 0; 
        background-color: green; 
        border: 2px solid black; 
} 

#main { 
        position: absolute; 
        left: 150px;
        width:100%;
        height: 100%; 
        background-color: navy; 
        border: 2px solid yellow; 
} 

#right { 
        position: absolute; 
        left:100%;
        margin-left:-150px;
        height: 100%; 
        width: 150px; 
        background-color: green; 
        border: 2px solid black; 
} 

#bottom { 
        position:absolute;
        height: 100px; 
        border: 2px solid green; 
        background-color: black; 
        top:100%;
        width:100%;
        margin-top: -100px;

}

</style>
<body topmargin=0 leftmargin=0 scroll=no>
<div id="total"> 
                <div id="top">top</div>
                <div id="container"> 
                        <div id="left">left</div> 
                        <div id="main">main</div> 
                        <div id="right">right</div> 
                </div> 
                <div id="bottom">bottom</div> 
</div>
</body>
</html>

woensdag 15 september 2004 17:57

Acties:

Verwijderd

FrankvR, je houdt geen rekening met de hoogte van het HTML en BODY element.

woensdag 15 september 2004 19:01

Acties:

Verwijderd

Topicstarter
Ik wil dit het liefst oplossen zonder het gebruik van JavaScript. Dit is toch grafisch georienteerd op de layout en dan zou het lijkt mij toch moeten kunnen middels CSS.

Of is dit echt alleen mogelijk i.c.m. een scripting taal?

edit:
Niet helemaal goed gelezen..... Het ziet er iig goed uit :) , ook bij verschillende resoluties!!! (1600x1200 en 1024x768 iig (onder IE))

De truc was dus het gebruik van de margin optie's in plaats van positionering mbv bottom enzovoorts?

edit2:
Het lijkt goed, toch denk ik dat ik met deze opzet in de problemen ga komen. Dit komt namelijk doordat bij het gebruiken van de border op het main gedeelte deze niet afgedrukt word aan de rechter- en onderkant. Dus overlappen de div's elkaar.

Maar ik ben iig een stukje verder, bedankt daarvoor!


Mochten er nog mensen zijn met aan- / opmerkingen dan hoor ik die graag.

[ Voor 66% gewijzigd door Verwijderd op 15-09-2004 19:22 ]

vrijdag 17 september 2004 16:28

Acties:

Verwijderd

Topicstarter
Alsnog een kleine kick ^^

Zoals ik mijn 2e edit aangaf is nu ook gebleken dat het fout gaat. De div (Main) is gewoon 100%,100% en gaat verder naast de rechter- en onderkant. Door de scroll=no zie je dat niet.

Bij het vullen van de main div komt er dus het probleem dat hij het buiten het scherm neer zet.

Heeft iemand een idee op welke manier de div's wel goed opgezet kunnen worden? Dat is namelijk toch de netste oplossing.

Ik kom er namelijk even niet meer uit en het forum & google gaven mij niet het juiste zetje in de rug.

vrijdag 17 september 2004 23:10

Acties:
  • AkaXakA
  • Registratie: Januari 2001
  • Laatst online: 27-03 16:12

AkaXakA

Just Kidding...

http://intensivstation.ch/css/templates/temp07.html

Misschien wel in het duits, maar wel oh zo duidelijk. Dit is toch ongeveer de layout die je wil?

(Kijk anders op http://intensivstation.ch/css/template.php )

http://www.akaxaka.tk/ - "Knowledge is power. Power corrupts. Study hard, be evil." - 4 Jaar GoT en nog steeds niet evil: er moet een verband zijn...

woensdag 22 september 2004 15:22

Acties:

Verwijderd

Topicstarter
AkaXakA schreef op 17 september 2004 @ 23:10:
http://intensivstation.ch/css/templates/temp07.html

Misschien wel in het duits, maar wel oh zo duidelijk. Dit is toch ongeveer de layout die je wil?

(Kijk anders op http://intensivstation.ch/css/template.php )
Deze opzet is inderdaad de bedoeling!!! De top en bottom worden bij mij alleen gevuld door div's. Bij het implementeren hiervan gaat het echter niet helemaal naar wens.

Als de tekst in de velden kleiner word moet deze gewoon dezelfde hoogte blijven houden. Het main veld moet dus altijd volledig zijn (wel afhankelijk van de resolutie).

Ik kom er helaas alleen nog niet helemaal uit......
Pagina: 1
Reageer