PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
w

centreer een div

Door wesley Overdijk op 05-10-2008 19:20
1.063 views
Hallo phpers en dus... divvers :d

Ik ben togh maar achter mijn muur vandaan geklommen, en heb besloten om te leren diven.

En guess what, het lukt, maar, het lukt me nu niet om het geheel te centreren...


dit is de container:


.geheel {
position: relative;
text-align: center;
width: 795px;
height: 582px;
}

dit is niet bepaald 'center' als ik het bekijk:

http://www.waysoflife.eu/solow/wolletjemeholletje/

alvast merci.
Joren de Wit
05-10-2008 19:22
Centreren van een div doe je door hem een bepaalde breedte mee te geven en de linker en rechter margin op auto te zetten:

#center {
  width: 600px;
  margin: 0px auto;
}
w
wesley Overdijk
05-10-2008 19:24
Maar ik wil heb de breedte van de pagina meegeven... en zoals ik al zei, ik ben vandaag begonnen met div, dus ik snap echt niet wat je net allemaal zegt.. 


.geheel {
position: relative; 
width: 795px;
margin: 0px auto;    
height: 582px;
}


nog niet center...
T
Thijs Damen
05-10-2008 21:20
dan gaat er iets anders mis wat je niet laat zien. zet dit maar eens in test.html

<html>
<head>
<title>test</title>
<style type="text/css">
.wrapper {
position: relative;
margin: 0px auto;
width: 1000px;
border: 1px solid black;
height: 500px;
}
</style>
</head>
<body>
<div class="wrapper">
test
</div>
</body>
</html>


en het staat in het midden
w
wesley Overdijk
05-10-2008 23:23
ik kan hem geen 1000 mee geven.
want dan zijn m'n divjes weer dood.

ik heb nu dan ook


.geheel { 
position: relative; 
width: 795px;
left: 17.5%;   
height: 582px;  
}

en nu is ie gecentreerd, waarvan pakt ie dan 17.5%?

R
Robert Deiman
06-10-2008 08:27
Verklein je scherm eens, dan staat die niet meer in het midden.

Je hebt nu een scherm resolutie van (blijkbaar) met horizontaal 1024 pixels :)
Hij pakt 17,5 procent van de breedte van je browserwindow. Dus bij jou zal die gecentreerd staan, bij veel anderen niet.

Probeer gewoon eens:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Titel</title>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="nl" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta name="robots" content="all" />
	<meta name="language" content="nederlands" />

	 <link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>
	<div id="geheel">
        </div>
</body>
</html>


CSS

body{
        width:100%;
	margin:0px;
	padding:0px;
	}
/* container */
div#geheel{
	width:795px;
	height:582px;
	margin:0px auto;
	}


Overigens heb ik de div 'geheel' een id meegegeven. Je gebruikt zo'n container maar 1 keer..
M
MiaMore
06-10-2008 09:02
Ik gebruik deze div altijd:


#container {
width: 627px;
margin: 0px auto;
text-align:justify;
padding:0px;
background: url("bg.gif");
}
#space1 {
width:20px;
float:left;
}
#menu {
width: 160px;
float:left;
}
#content {
width: 420px;
float:right;
}
#space2 {
width:20px;
float:right;
}
#footer {
clear: both;
}

T
Thijs Damen
06-10-2008 09:14
Er zijn verschillende manieren om een div te centreren en de manier die hij zelf post n.a.v. een post van een ander die hij aan geeft niet werkt. werkt wel als dat de enigste code is die je gebruikt.

er zit helaas nog veel meer code achter die wij niet kunnen zien en daarom kunnen wij dan ook niet 'de' oplossing geven voor dit probleem.

wesley schreef op 05.10.2008 19:24


.geheel {
position: relative; 
width: 795px;
margin: 0px auto;    
height: 582px;
}


nog niet center...
w
wesley Overdijk
06-10-2008 09:58
oke, mijn hele css:


body {
background-color: #5e5e5e;
font-family: Tahoma;
background: #202020 url(images/bgtop.jpg) top center repeat-x;
font-size: 11px;

scrollbar-base-color: #ff935a;
scrollbar-3dlight-color: #404040;
scrollbar-arrow-color: #990000;
scrollbar-darkshadow-color: #999999;
scrollbar-face-color: #202020;
scrollbar-highlight-color: #999999;
scrollbar-shadow-color: #990000;
scrollbar-track-color: #101010; 
  
}
.geheel { 
position: relative; 
width: 795px;
left: 17.5%;   
height: 582px;  
}



.div {
Background: url("images/wol_01.jpg");
float:left;
width:794px; 
height:131px;
}
.div1 {
clear: both;
Background: url("images/wol_02.jpg");  
float: left;
width: 193px; 
height: 129px;
}
.div2 {
Background: url("images/wol_03.jpg");   
float: left;
width:407px;
height:402px;
} 
.div3 {
position: absolute;
top: 131px; 
right: 0px;
Background: url("images/wol_04.jpg");   
width: 194px;
height: 129px;
} 
.div4 {
position: absolute;
bottom: 0px; 
left: 0px;
Background: url("images/wol_05.jpg");   
width: 35px;
height: 322px;
} 
.div5 {
position: absolute;
top: 260px;
left: 35px;
Background: url("images/wol_06.jpg");   
width: 128px;
height: 43px;
} 
.div6 {
position: absolute;
bottom: 218px;
left: 35px;
Background: url("images/wol_11.jpg");   
width: 128px;
height: 61px;
} 
.div7 {
position: absolute;
bottom: 0px;
left: 163px;
Background: url("images/wol_07.jpg");   
width: 30px;
height: 322px;
} 
.div8 {
position: absolute;
bottom: 0px;
left: 35px;
Background: url("images/wol_13.jpg");   
width: 128px;
height: 218px;
} 
.div9 {
position: absolute;
bottom: 0px;
right: 0px;
Background: url("images/wol_10.jpg");   
width: 11px;
height: 322px;
} 
.div10 {
position: absolute;
bottom: 0px;
right: 11px;
Background: url("images/wol_14.jpg");   
width: 170px;
height: 198px;
} 
.div11 {
position: absolute;
bottom: 0px;
right: 194px;
Background: url("images/wol_15.jpg");   
width: 407px;
height: 49px;
} 
.div12 {
position: absolute;
bottom: 198px;
right: 11px;
Background: url("images/wol_12.jpg");   
width: 170px;
height: 71px;
} 
.div13 {
position: absolute;
bottom: 0px;
right: 181px;
Background: url("images/wol_08.jpg");   
width: 13px;
height: 322px;
} 

.div14 {
position: absolute;
bottom: 269px;
right: 11px;
Background: url("images/wol_09.jpg");   
width: 170px;
height: 53px;
}
R
Robert Deiman
06-10-2008 10:00
Waarom gebruik je position:relative; en heeeel veel position:absolute?

Deze hoef je in praktijk maar weinig te gebruiken, bij mij krijgen de meeste divs een float mee.

Reageren

Inloggen om te reageren