Tijden veranderen
Div border
Sinds kort probeer ik met divs te werken ipv tabellen, maar als ik een div maak met een height van 85px; en een bottom border van 2px; dan krijg ik in Internet Explorer een div die 85px; hoog is, maar in Mozilla krijg ik een div die 87px; hoog is (daar is de border bij de width opgeteld)
Is er ook een manier zodat in Mozilla de border niet bij de width word opgeteld?
Geen idee, maar het is wel duidelijk dat je naar de verkeerde browser kijkt internet explorer bah...
Gewijzigd op 18/10/2010 19:26:07 door Jasper DS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>Test</title>
</head>
<body style="margin: 0px 0px 0px 0px;">
<div style="
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #000000;
width: 100%;
height: 85;
background-color: #528FCB;
"></div>
</body>
</html>
<head>
<title>Test</title>
</head>
<body style="margin: 0px 0px 0px 0px;">
<div style="
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #000000;
width: 100%;
height: 85;
background-color: #528FCB;
"></div>
</body>
</html>
Gebruik achter dat cijfer "85" ook px oid.
Als je een externe stylesheet maakt kan ik je helpen. Ik denkt nl dat dit inline niet gaat werken.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#divnaam {
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #000000;
width: 100%;
height: 85px;
.height: 83px;
background-color: #528FCB;
}
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #000000;
width: 100%;
height: 85px;
.height: 83px;
background-color: #528FCB;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px;}
#test_div {
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #000000;
width: 100%;
height: 85px;
background-color: #528FCB; }
-->
</style>
</head>
<body>
<div id="test_div">
</div>
</body>
</html>
<head>
<title>test</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px;}
#test_div {
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #000000;
width: 100%;
height: 85px;
background-color: #528FCB; }
-->
</style>
</head>
<body>
<div id="test_div">
</div>
</body>
</html>
Toevoeging op 18/10/2010 20:19:34:
In dit topic heeft karl ook al gezegt dat je geen inline style sheet moet gebruiken. Misschien handig om dat even op te volgen.. :)
Gewijzigd op 18/10/2010 19:57:44 door Jasper DS
Marc rc is as op 18/10/2010 19:54:23:
Niet eigenwijs doen, jasper heeft gelijk.
Hoezo heeft hij gelijk? Ik zeg alleen dat ik het op mijn manier makkelijker vind om mee te beginnen, als hij dat niet vind is dat zijn mening. Hier heeft dus niemand wel of geen gelijk
daar heb je gelijk in maar het is gewoon een tip. En zeker als mensen het zeggen die veel ervaring hebben (hier reken ik mezelf niet bij (a))
Is het nu gelukt?
Code (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
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
<html>
<head>
<title>Harry Potter oNLine</title>
<style type="text/css">
<!--
body {
margin: 0px 0px 0px 0px;
}
.header-container {
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #000000;
width: 100%;
height: 85px;
.height: 87px;
background-color: #528FCB;
}
-->
</style>
</head>
<body>
<div class="header-container"></div>
</body>
</html>
<head>
<title>Harry Potter oNLine</title>
<style type="text/css">
<!--
body {
margin: 0px 0px 0px 0px;
}
.header-container {
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #000000;
width: 100%;
height: 85px;
.height: 87px;
background-color: #528FCB;
}
-->
</style>
</head>
<body>
<div class="header-container"></div>
</body>
</html>
Wat houd die punt (.) voor height eigenlijk in?
Gewijzigd op 18/10/2010 20:51:25 door Lord Gaga
Het is verstandiger te testen met je style boven in de <head> of in een externe stylesheet.
Avicka Avickum op 18/10/2010 20:35:01:
Hoezo heeft hij gelijk? Ik zeg alleen dat ik het op mijn manier makkelijker vind om mee te beginnen, als hij dat niet vind is dat zijn mening. Hier heeft dus niemand wel of geen gelijk
Marc rc is as op 18/10/2010 19:54:23:
Niet eigenwijs doen, jasper heeft gelijk.
Hoezo heeft hij gelijk? Ik zeg alleen dat ik het op mijn manier makkelijker vind om mee te beginnen, als hij dat niet vind is dat zijn mening. Hier heeft dus niemand wel of geen gelijk
Klopt jasper, het was een reactie op dit bericht. Toen stond hij nog inline.
Avicka Avickum op 18/10/2010 20:50:31:
Wat houd die punt (.) voor height eigenlijk in?
zo heet dan de class die je aanroept in je div
bijvoorbeeld
Code (php)
1
2
3
4
5
2
3
4
5
.hoihoi h1()
.hoihoi a()
.hoihoi input()
<div class="hoihoi"></div>
.hoihoi a()
.hoihoi input()
<div class="hoihoi"></div>
als je liever met id's werkt krijg je een hekje ervoor
bijvoorbeeld
Code (php)
1
2
3
4
2
3
4
#hoihoi a
#hoihoi input
<div id="hoihoi"></div>
#hoihoi input
<div id="hoihoi"></div>
het verschil is dat je in een id nog meerder classes kunt maken dus:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#hoihoi
#hoihoi
#hoihoi.head
#hoihoi.body
<div id="hoihoi">
<div class="head"></div>
<div class="body"></div>
</div>
#hoihoi
#hoihoi.head
#hoihoi.body
<div id="hoihoi">
<div class="head"></div>
<div class="body"></div>
</div>
Gewijzigd op 19/10/2010 11:13:48 door Teun Hesseling