Toon posts:

[css] Vreemd probleem met hoogtes

Pagina: 1
Acties:

woensdag 16 november 2005 22:23

Acties:
  • RSD
  • Registratie: Maart 2001
  • Laatst online: 08-02-2017

RSD

Topicstarter
Ik ben bezig met een weblogje te bouwen, echter loop ik tegen een vreemd probleem aan, om het te illustreren heb ik hier wat voorbeelden:

http://subdomein.webloggirl.com/
Onderaan deze pagina zie je dat deze niet af is in Firefox.

In IE heb ik een soort gelijk probleem maar net iets anders:
Daar zie je het rechter gedeelte niet goed.... ik snap echt niet hoe dit kan.

Ik heb alle hoogtes op 100% staan.

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

body {
    background-color: #000;
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 14px;
    font-family: Verdana;
    height: 100%;
}

a img {
    border: none;
}

* { 
    box-sizing      : border-box; 
    -moz-box-sizing : border-box; 
}

#container {
    width: 745px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    color: #000;
    height: 100%;
}

#header h1 {
    color: #00ffff; 
}

#header h2 {
    color: #ffff00; 
}

#header {
    background-color: #f9f9f9;
    position: absolute;
    width: 745px;
    height: 175px;
    margin: 0;
    padding: 20px;

}

#main {
    background-color: #f0f0f0;
    position: absolute;
    top: 175px;
    left: 0px;
    bottom: 0px;
    width: 515px;
    line-height: 1.5;
    height: 100%;
    padding: 20px;
    margin: 0px;
    float: left;
}

#main a {
    color: #ff0097;
    text-decoration: none;
}

#main a:hover {
    text-decoration: underline;
}

#main .article h2 {
    margin-bottom: 0.5em;
    font-size: 18px;
    font-weight: normal;
    color: #ff0097;
}

#main .article,
#main .article p {
    margin: 0;
}

#main .article p img {
    float: right;
    margin: 0 0 3px 3px;
    border: 1px solid #000;
}

#main .article .articlefooter {
    margin: 1em 0;
    font-weight: bold;
    clear: both;
}

#main .article .articlefooter a {
    color: #000;
    text-decoration: underline;
}

#main .article .articlefooter a:hover {
    color: #FF0097;
}

#main #comments {
    color: #626264;
    border-top: 1px solid #000;
}

#main #comments h3 {
    font-size: 18px;
    font-weight: normal;
    margin: 1em 0;
}

#main #comments div.comment {
    margin-bottom: 1em;
    border: 1px solid #626264;
    padding: 5px;
    word-wrap: break-word;
}

#main #comments .comment p {
    margin: 0;
    font-size: 14px;
}

#main #comments .comment p.footer {
    font-weight: bold;
    border-top: 1px solid #626264;
    margin-top: 5px;
    padding-top: 5px;
}

#rightmenu {
    background-color: #f6f6f6;
    position: absolute;
    top: 175px;
    left: 515px;
    width: 230px;
    height: 100%;
    padding: 20px;
    color: #ff00ff;
}

#rightmenu a {
    color: #00cc00;
    text-decoration: none;
}

#rightmenu a:hover {
    text-decoration: underline;
}

#rightmenu .menu h3 {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    color: #ff0000;
}

#rightmenu .menu ul {
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#rightmenu .menu ul li {
    margin: 0.5em 1em 0.5em 0;
    padding: 0;

}

#rightmenu .menu p {
    font-size: 14px;
    margin: 0;
    padding: 0;
}


En dit is zeg maar de div opbouw:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="container">
    <div id="header">
        <h1><?echo $htitel?></h1>
        <h2><?echo $onderschrift?></h2>
    </div>
    <div id="main">
        <?echo $main?>
    </div>
    <div id="rightmenu">
        <div class="menu">
            <?echo $menu1?>
            <?echo $menu2?>
        </div>
    </div>

</div>


Zit al de helemiddag te zoeken en te doen en te proberen, maar geen succes!

[ Voor 90% gewijzigd door RSD op 16-11-2005 22:31 . Reden: Stylesheet toegevoegd ]

woensdag 16 november 2005 23:03

Acties:
  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020

Boelie-Boelie

Gebruik maken van height:100% werkt niet zoals velen verwachten, zoals wel vaker valt te lezen op dit forum (zoek maar eens).
Hoewel je vraagstelling wel wat duidelijker mag, wil je volgens mij een header met daaronder twee kolommen die even lang zijn. Mogelijke oplossingen:
- www.456bereastreet.com/la...tandards/csslayout/2-col/
- http://stijlstek.nl/demo/damascus/
- "faux columns"

Cogito ergo dubito

woensdag 16 november 2005 23:41

Acties:
  • RSD
  • Registratie: Maart 2001
  • Laatst online: 08-02-2017

RSD

Topicstarter
Die had ik nodig... super bedankt !
Reageer