Div centeren
alleen wil de div precies in het miden van de scherm krijgen dus niet alleen van links naar recht maar ook van boven naar benende
ik gebruik dit maar dan doet hij link naar rechts:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#conten{
border: #afb8e9 4px solid;
margin: auto;
min-height: 300px;
width: 1020px;
}
border: #afb8e9 4px solid;
margin: auto;
min-height: 300px;
width: 1020px;
}
hoe verbeter ik dit?
Wouter J op 29/05/2012 17:15:19:
werkt nog steeds niet:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#conten{
border: #afb8e9 4px solid;
margin: 0 auto;
position:relative;
clear:left;
min-height: 600px;
width: 1020px;
background-image: url(img/bg.png);
}
border: #afb8e9 4px solid;
margin: 0 auto;
position:relative;
clear:left;
min-height: 600px;
width: 1020px;
background-image: url(img/bg.png);
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style type="text/css">
.container {
margin: 0 auto;
padding: 0;
width: 1020px;
background-color: #232323;
height: 500px;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style type="text/css">
.container {
margin: 0 auto;
padding: 0;
width: 1020px;
background-color: #232323;
height: 500px;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
ScrapZz nl op 29/05/2012 17:41:26:
werkt nog steeds niet:
Wouter J op 29/05/2012 17:15:19:
werkt nog steeds niet:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#conten{
border: #afb8e9 4px solid;
margin: 0 auto;
position:relative;
clear:left;
min-height: 600px;
width: 1020px;
background-image: url(img/bg.png);
}
border: #afb8e9 4px solid;
margin: 0 auto;
position:relative;
clear:left;
min-height: 600px;
width: 1020px;
background-image: url(img/bg.png);
}
Omdat je de #distace div niet hebt?... Niet zomaar iets klakkeloos kopiëren, maar probeer te snappen wat je kopieërd anders leer je er nooit wat van?
Gewijzigd op 29/05/2012 17:56:01 door Joakim Broden
Reshadd farid op 29/05/2012 17:52:14:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style type="text/css">
.container {
margin: 0 auto;
padding: 0;
width: 1020px;
background-color: #232323;
height: 500px;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style type="text/css">
.container {
margin: 0 auto;
padding: 0;
width: 1020px;
background-color: #232323;
height: 500px;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
ook niet!
@ScrapZz nl probeer zelf ook wat, niet gelijk zeggen dat iets niet werkt. kijk naar het voorbeeld van Wouter J want die werkt wel..
Gewijzigd op 29/05/2012 17:58:51 door Joakim Broden
Hertog Jan op 29/05/2012 17:55:01:
Omdat je de #distace div niet hebt?... Niet zomaar iets klakkeloos kopiëren, maar probeer te snappen wat je kopieërd anders leer je er nooit wat van?
ScrapZz nl op 29/05/2012 17:41:26:
werkt nog steeds niet:
Wouter J op 29/05/2012 17:15:19:
werkt nog steeds niet:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#conten{
border: #afb8e9 4px solid;
margin: 0 auto;
position:relative;
clear:left;
min-height: 600px;
width: 1020px;
background-image: url(img/bg.png);
}
border: #afb8e9 4px solid;
margin: 0 auto;
position:relative;
clear:left;
min-height: 600px;
width: 1020px;
background-image: url(img/bg.png);
}
Omdat je de #distace div niet hebt?... Niet zomaar iets klakkeloos kopiëren, maar probeer te snappen wat je kopieërd anders leer je er nooit wat van?
dan komt hij onder aan te staan ;)
Toevoeging op 29/05/2012 18:02:43:
Hertog Jan op 29/05/2012 17:57:08:
@Reshadd farid even lezen, hij wil hem ook verticaal centreren en niet alleen horizontaal..
@ScrapZz nl probeer zelf ook wat, niet gelijk zeggen dat iets niet werkt. kijk naar het voorbeeld van Wouter J want die werkt wel..
@ScrapZz nl probeer zelf ook wat, niet gelijk zeggen dat iets niet werkt. kijk naar het voorbeeld van Wouter J want die werkt wel..
Ik heb gister de heledag (naja midag?) uitgeprobeerd en op gezocht op internet maar krijg het niet voor elkaar ;)
ScrapZz nl op 29/05/2012 17:57:29:
dan komt hij onder aan te staan ;)
Hertog Jan op 29/05/2012 17:55:01:
Omdat je de #distace div niet hebt?... Niet zomaar iets klakkeloos kopiëren, maar probeer te snappen wat je kopieërd anders leer je er nooit wat van?
ScrapZz nl op 29/05/2012 17:41:26:
werkt nog steeds niet:
Wouter J op 29/05/2012 17:15:19:
werkt nog steeds niet:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#conten{
border: #afb8e9 4px solid;
margin: 0 auto;
position:relative;
clear:left;
min-height: 600px;
width: 1020px;
background-image: url(img/bg.png);
}
border: #afb8e9 4px solid;
margin: 0 auto;
position:relative;
clear:left;
min-height: 600px;
width: 1020px;
background-image: url(img/bg.png);
}
Omdat je de #distace div niet hebt?... Niet zomaar iets klakkeloos kopiëren, maar probeer te snappen wat je kopieërd anders leer je er nooit wat van?
dan komt hij onder aan te staan ;)
Laat je code dan even zien wat je dan nu hebt, want dan heb je die website van Wouter J niet goed na gekeken... Wss ben je je margin-bottom van je #distance vergeten...
Voorbeeld:
HTML
Code (php)
1
<div class="center">Content</a>
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.center {
width: 300px;
height: 150px;
position: absolute;
top: 50%
left: 50%;
margin: -75px 0 0 -150px;
}
width: 300px;
height: 150px;
position: absolute;
top: 50%
left: 50%;
margin: -75px 0 0 -150px;
}
De negative margin zorgt ervoor dat hij uiteindelijk precies gecentreerd wordt. Succes.
Milo S op 29/05/2012 18:22:39:
Hiervoor moet je voor zo ver ik weet een vaste hoogte en breedte voor hebben.
Voorbeeld:
HTML
CSS
De negative margin zorgt ervoor dat hij uiteindelijk precies gecentreerd wordt. Succes.
Voorbeeld:
HTML
Code (php)
1
<div class="center">Content</a>
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.center {
width: 300px;
height: 150px;
position: absolute;
top: 50%
left: 50%;
margin: -75px 0 0 -150px;
}
width: 300px;
height: 150px;
position: absolute;
top: 50%
left: 50%;
margin: -75px 0 0 -150px;
}
De negative margin zorgt ervoor dat hij uiteindelijk precies gecentreerd wordt. Succes.
een vaste hoogte heb ik dus niet!
margin-top en margin-bottom meegeven zodat er altijd een bepaalde ruimte tussen de container en de rand is.