Toon posts:

[CSS] Div wil niet goed positie kiezen

Pagina: 1
Acties:

dinsdag 5 april 2005 19:42

Acties:
  • PeetR
  • Registratie: Februari 2002
  • Laatst online: 13-09-2025

PeetR

Topicstarter
Ik ben bezig met het realiseren van een website. Hierbij maak ik gebruik van DIV's om een en ander te positioneren. Ik loop alleen tegen een probleem aan en ik kom er maar niet uit.
Het volgende is het geval:

Afbeeldingslocatie: http://www.radio3blokaal.nl/indeling.gif

de copy-div moet meelopen met de main-div. Dit werkt perfect maar als de main-div korter is dan het totaal van de 3 div's ernaast (nieuws, rnieuws, on-air) komt de copy-div daar doorheen te staan. Ik zou dus op een of andere wijze een minimum mee moeten geven maar ik heb geen idee hoe.
css-file
Cascading Stylesheet:
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

body, table
{
    background-color: #CCCCFF;
    font-family: arial, sans-serif;
    font-size: 11pt;
    margin: 0px;
    padding: 0px;
}

#container
{
width: 750px;
margin: auto;
position: absolute;
left: 50%;
margin-left: -375;
height: auto;
}

#header
{
    width: 750px;
    height: 116px;
    position: absolute;
    z-index: 10;
    background-image : url(header.jpg);
    margin: 0px;
    padding: 0px;
}

#nav
{
    width: 750px;
    height: 30px;
    position: absolute;
    top: 116px;
    margin: 0px;
    padding: 0px;
    z-index: 9;
}

#nieuws
{
    width: 200px;
    height: 104px;
    position: absolute;
    top: 146px;

    padding: 0px;
    background-color : transparent;
}


#rnieuws
{
    width: 200px;
    height: 104px;
    position: absolute;
    top: 250px;
        padding: 0px;
    background-color : transparent;
}

#onair
{
    width: 200px;
    height: 104px;
    position: absolute;
    top: 354px;
       padding: 0px;
    background-color : transparent;
}

#main
{
    width: 500px;
    /*height: 600px;*/
    position: relative;
    top: 146px;
    left: 250px;
    padding: 0px;
    background-color : transparent;
    overflow: auto;
}

#copy
{
    width: 750;
    position: relative;
    background-color: #000099;
    text-align: center;
    color: #FF0000;
    margin: 0px;
    margin-top: 10px;
    padding: 0px;
    top: 312px;
    /*bottom: -146px;*/
}


html:
HTML:
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>Radio 3B-Lokaal</title>
        
        <base href="http://www.radio3blokaal.nl/new/">
        <base target="_self">
        <LINK href="style.css" rel=stylesheet>
    </head>

    <body>
    <div id="container">
        <div ID="header">
        </div>
        <div ID="nav">
        </div>
    
        <div ID="nieuws">
        </div>
        
        <div ID="rnieuws">
        </div>
        
        <div ID="onair">
        </div>
        
<div ID="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam adipiscing lacus at lorem.
Sed nonummy magna id mauris.
Ut nec felis sed metus ullamcorper iaculis.
<br><br>
webmaster
</div>

<div ID="copy">(c) 2005, Radio3blokaal.nl</div> 

</div>

    </body>
</html>


Ik heb al allerlei dingen bekeken en uitgeprobeerd waaronder faux-columns, maar ik snap er niet veel meer van.

[ Voor 8% gewijzigd door PeetR op 11-04-2005 16:40 ]

Your time as a student is the best time of your life

dinsdag 5 april 2005 19:47

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Container div rond de drie linker en de contentdiv? :) .

edit:
Ik moet voortaan wel de code beter lezen voor ik blaat 8)7 O-) . Wat Cheetah suggereerd is denk ik idd beter :) . Bovendien is dat zoiezo mijn meest gebruikte strategie :P .

[ Voor 69% gewijzigd door JHS op 05-04-2005 19:51 ]

DM!

dinsdag 5 april 2005 19:49

Acties:

Verwijderd

Van zoveel absoluut gepositioneerde div's moet ik altijd een beetje huilen. Altijd ellende.

Met 1 links floatende div (met daarin de groene, cyaan en magenta elementen), een #main div met een berg marge aan de linkerkant, en een clear: both; voor de footer kom je een heel eind.

Het horizontaal in het midden positioneren kun je beter doen met margin: 0 auto; in plaats van absoluut positioneren met een negatieve marge.

dinsdag 5 april 2005 19:51

Acties:

Verwijderd

Wil je het relatief of absoluut positioneren?

Dus: pas na de content uit de main div, of altijd onderaan dus soms over de main div.

dinsdag 5 april 2005 22:48

Acties:

Verwijderd

Gedeeltelijk met Cheatah eens,

Gebruik voor je nieuws-divs een container div met float: left + clear: left , andere block-elements kan je erin nesten.

[ Voor 12% gewijzigd door Verwijderd op 05-04-2005 22:50 ]

Reageer