Toon posts:

[CSS] uitlijning elementen probleem

Pagina: 1
Acties:

zondag 9 mei 2004 16:46

Acties:
  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 17-04 10:24

sjaakaq

It might get loud

Topicstarter
Ik ben ook eens begonnen met een pagina te maken waarvan de opmaak volledig in een CSS staat; zo zie ie er tot nu toe uit:
Afbeeldingslocatie: http://picserver.org/view_image.php/79FA5PE352X4/picserver.jpeg
Heel fijn, maar wat ik wil is dat de rechterkant van de DIV waarin nu staat 'inhoud is hartstikke mooi' gelijk is aan de rechterkant van de DIV waarin 'SuperSop.nl>> T610' staat.

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
99
100
101
102

body
{
background-color: #fff;
border: 1px double #888;
margin: 2px;
padding: 2px;
}

#topbar
{
font-family: trebuchet ms; 
font-size: 24px;
font-weight: bold;
color: #888;
width: 100%;
height: 30px;
background-color: #ddd;
border: 2px double #222233;
margin: 5px;
padding: 5px;
}

#inhoud
{
font-family: trebuchet ms; 
font-size: 12px;
color: #888;
width: 79%;
background-color: #fff;
border: 1px double #888;
margin: 0px;
padding: 0px;
position: absolute; left: 205px; top: 58;
}

#navcontainer { margin-left: 5px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: trebuchet ms;
font-size: 12px;
}

#navcontainer li { margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 190px;
color: #888;
background-color: #ddd;
text-decoration: none;
border: 1px double #888;
}

#navcontainer a:hover
{
color: #ddd;
background-color: #222233;
text-decoration: none;
}


#navcontainer a:active
{
color: #ffffff;
background-color: #222233;
text-decoration: none;
font-size: 14px;
}

#navcontainer ul ul li { margin: 1px 0 1px 0; }

#navcontainer ul ul a
{
display: block;
position: relative; left: 15px;
padding: 5px 5px 5px 5px;
width: 175px;
color: #fff;
background-color: #666;
text-decoration: none;
}

#navcontainer ul ul a:hover
{
color: #000;
background-color: #888;
text-decoration: none;
}

#navcontainer ul ul a:active
{
color: #333322;
background-color: #888;
text-decoration: none;
font-size: 12px;
}

Met procenten lukt niet; 80% is te breed, 79% te smal. In px gaat ook niet; de "SuperSop.nl>> T610" DIV is 100% breed dus eigenlijk moet de inhoud DIV dan ook relatief zijn (toch?)

Hoe los ik dit op?

(In IE is de pagina niet 100% goed, in Opera ziet ie er goed uit, zoals het hoort, en dat wil ik graag bereiken.)

Edit: hmm wat FireFox ermee doet wete ik ook niet :X

[ Voor 7% gewijzigd door sjaakaq op 09-05-2004 16:48 ]

leoaq.fm // Jeune Loop

zondag 9 mei 2004 16:52

Acties:

Verwijderd

ik zou dat memu absoluut positioneren, en de header en content relatief, breedte gewoon automatisch laten doen en de content een margin-left geven

zondag 9 mei 2004 18:03

Acties:
  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 17-04 10:24

sjaakaq

It might get loud

Topicstarter
Nu heb ik dit:
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
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
99
100
101
102
103
104
105
106
107

body
{
width: 100%;
height: 100%;
background-color: #fff;
border: 1px double #888;
margin: 2px;
padding: 2px;
}

#topbar
{
font-family: trebuchet ms; 
font-size: 24px;
font-weight: bold;
color: #888;
height: 30px;
background-color: #ddd;
border: 2px double #222233;
margin: 5px;
padding: 5px;
position: relative; left: 0px; top: 0;
}

#inhoud
{
font-family: trebuchet ms; 
font-size: 12px;
color: #888;
background-color: #fff;
border: 1px double #888;
margin: 0px;
padding: 0px;
position: relative; left: 202px; top: 2px;
}

#navcontainer 
{ 
margin-left: 5px;
position: absolute; left: 5px; top: 60px;
}

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: trebuchet ms;
font-size: 12px;
}

#navcontainer li { margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 190px;
color: #888;
background-color: #ddd;
text-decoration: none;
border: 1px double #888;
}

#navcontainer a:hover
{
color: #ddd;
background-color: #222233;
text-decoration: none;
}


#navcontainer a:active
{
color: #ffffff;
background-color: #222233;
text-decoration: none;
font-size: 14px;
}

#navcontainer ul ul li { margin: 1px 0 1px 0; }

#navcontainer ul ul a
{
display: block;
position: relative; left: 15px;
padding: 5px 5px 5px 5px;
width: 175px;
color: #fff;
background-color: #666;
text-decoration: none;
}

#navcontainer ul ul a:hover
{
color: #000;
background-color: #888;
text-decoration: none;
}

#navcontainer ul ul a:active
{
color: #333322;
background-color: #888;
text-decoration: none;
font-size: 12px;
}

met als resultaat:
Afbeeldingslocatie: http://picserver.student.utwente.nl/view_image.php/348W52LF68P1/picserver.jpeg

Beetje vreemd...


Hoe kan het btw dat als ik de body-height op 100% heb staan, en de content niet '100% hoog is', ik tóch ene verticale scrollbalk krijg?

leoaq.fm // Jeune Loop

zondag 9 mei 2004 18:11

Acties:
  • JeromeB
  • Registratie: September 2003
  • Laatst online: 19-03 22:07

JeromeB

woei

Waarschijnlijk heeft dat te maken met het box-model. De padding en de margin worden namelijk bij de 100% opgerekent.

PC load letter? What the fuck does that mean?

Reageer