Div centeren. kom er niet uit....

brownmouse · 28 feb 2010

Goeie avond,

ik ben met photoshop een design aan't maken.
maar ik heb hem nu geslicet

maar als je dan op een breedbeeld kijkt:
www.pcgebruikers.nl/test/

zie je dat alles toch nog naar links staat..
en da t is niet de bedoeling alles moet naar 't midden.

ik laat even script zien.

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>Untitled-3-green</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (Untitled-3-green.psb) -->
<style type="text/css">
<!--

html { height: 100%; margin: 0px; padding: 0px;} 

body { 
	width: 800px; 
	left: 10%;
	margin-left:auto;
	margin-right:auto;
}

div.Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:800px;
}

div.Logo_ {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:144px;
	background: url(img/Logo.gif);
}

div.index-02_ {
	position:absolute;
	left:0px;
	top:144px;
	width:49px;
	height:35px;
	background: url(img/index_02.gif);
}

div.Home_ {
	position:absolute;
	left:49px;
	top:144px;
	width:67px;
	height:35px;
	background: url(img/Home.gif);
}

div.Over-Ons_ {
	position:absolute;
	left:116px;
	top:144px;
	width:99px;
	height:35px;
	background: url(img/Over-Ons.gif);
}

div.Portfolio-s_ {
	position:absolute;
	left:215px;
	top:144px;
	width:103px;
	height:35px;
	background: url(img/Portfolio%27s.gif);
}

div.Contact_ {
	position:absolute;
	left:318px;
	top:144px;
	width:83px;
	height:35px;
	background: url(img/Contact.gif);
}

div.index-07_ {
	position:absolute;
	left:401px;
	top:144px;
	width:350px;
	height:35px;
	background: url(img/index_07.gif);
}

div.index-08_ {
	position:absolute;
	left:751px;
	top:144px;
	width:49px;
	height:35px;
	background: url(img/index_08.gif);
}

div.index-09_ {
	position:absolute;
	left:0px;
	top:179px;
	width:77px;
	height:330px;
	background: url(img/index_09.gif);
}

div.Nieuws_ {
	position:absolute;
	left:77px;
	top:179px;
	width:212px;
	height:330px;
	
	background: url(img/Nieuws.gif);
	padding-left:10px;
	padding-top:45px;
}

div.Preview_ {
	position:absolute;
	left:289px;
	top:179px;
	width:222px;
	height:330px;
	background: url(img/Preview.gif);
	padding-left:20px;
	padding-top:45px;
}

div.Empty_ {
	position:absolute;
	left:511px;
	top:179px;
	width:213px;
	height:330px;
	background: url(img/Empty.gif);
	padding-left:20px;
	padding-top:20px;
}

div.index-13_ {
	position:absolute;
	left:724px;
	top:179px;
	width:76px;
	height:330px;
	background: url(img/index_13.gif);
}

div.Copyright_ {
	position:absolute;
	left:0px;
	top:509px;
	width:740px;
	height:104px;
	background: url(img/Copyright.gif);
	padding-left:60px;
	padding-top:5px;
}

div.index-15_ {
	position:absolute;
	left:0px;
	top:613px;
	width:800px;
	height:187px;
	background: url(img/index_15.gif);
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#054201;">
<!-- ImageReady Slices (Untitled-3-green.psb) -->
<div class="Table_01">
	<absolute><div class="Logo_">
		<!-- Logo -->
	</div>
	<div class="index-02_">
		
	</div>
	<div class="Home_">
		<img id="Home" src="img/Home.gif" alt="" />
	</div>
	<div class="Over-Ons_">
		<img id="Over_Ons" src="img/Over-Ons.gif" alt="" />
	</div>
	<div class="Portfolio-s_">
		<img id="Portfolio_s" src="img/Portfolio%27s.gif" alt="" />
	</div>
	<div class="Contact_">
		<img id="Contact" src="img/Contact.gif" alt="" />
	</div>
	<div class="index-07_">
		
	</div>
	<div class="index-08_">
		
	</div>
	<div class="index-09_">
		
	</div>
	<div class="Nieuws_">
		Bruins Webdesign heet vanaf<br />
		vandaag New Design.
	</div>
	<div class="Preview_">
		testje
	</div>
	<div class="Empty_">
		testje
	</div>
	<div class="index-13_">
		
	</div>
	<div class="Copyright_">
		<table>
			<tr>
		<td width="120">Home</td>
		<td width="150">Over Ons</td>
		<td width="120">Portfolio</td>
			</tr>
			<tr>
		<td>- Nieuws</td>
		<td>- Timo Bruins</td>
		<td>- Timo Bruins</td>
			</tr>
			<tr>
		<td>- Preview</td>
		<td>- Kevin Olderman</td>
		<td>- Kevin Olderman</td>
			</tr>
		</table>
		
	</div>
	<div class="index-15_">
		
	</div></absolute>
</div>

<!-- End ImageReady Slices -->
</body>
</html>

ik hoop dat jullie me kunnen helpen.
met vriendelijke groeten

peter vazed · 28 feb 2010

Kan niet, omdat je overal:
position:absolute;
gebruikt.

Goeroeboeroe · 28 feb 2010

Het kan wel, als je alles binnen 'n div zet.
Gelijk onder body:

HTML:

<div style="width: 800px; margin: 0 auto; position: relative;">

en gelijk boven
</body>

HTML:

</div>

Door de margin: 0 auto; wordt deze div gecentreerd. En door hem 'n relatieve positie te geven, worden de absolute divs enz. nu gepositioneerd t.o.v. van deze div.
Maar waarom zitten hier zo ongelooflijk veel stukjes in? En zoveel stijlen? En dan ook nog deels in 'n tabel. Ik denk dat het heel erg moeilijk gaat worden dit helemaal goed te krijgen.

brownmouse · 1 mrt 2010

Goeroeboeroe zei:
Het kan wel, als je alles binnen 'n div zet.
Gelijk onder body:

HTML:

<div style="width: 800px; margin: 0 auto; position: relative;">

en gelijk boven
</body>

HTML:

</div>

Door de margin: 0 auto; wordt deze div gecentreerd. En door hem 'n relatieve positie te geven, worden de absolute divs enz. nu gepositioneerd t.o.v. van deze div.
Maar waarom zitten hier zo ongelooflijk veel stukjes in? En zoveel stijlen? En dan ook nog deels in 'n tabel. Ik denk dat het heel erg moeilijk gaat worden dit helemaal goed te krijgen.

Jo het is gelukt.. sorry van voorbeeld die is eraf..
als je nu naar http://pcgebruikers.nl/test/ gaat kan je zien dat daar wel gelukt is

brownmouse · 1 mrt 2010

peter vazed zei:
Kan niet, omdat je overal:
position:absolute;
gebruikt.

en wat moet ik er dan van maken..
als ik alles weghaal of vervang met

HTML:

position:relative;

klopt er geen zak meer van

't gaat nu om een andere..
en ik dacht dat 't gelukt was maar alleen in Google Chrome is hij dan gecenteert:

HTML:

<html>
<head>
<title>New Design - Al onze creaties komen tot leven</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL=StyleSheet HREF="css2.css" TYPE="text/css" MEDIA=screen>
<!-- ImageReady Styles (Untitled-1) -->

</head>
<body style="background-color:#000000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div style="width: 1000px; margin: 0 auto; position: absolute;">
<div id="Table_01" style="color: #FFFFFF;">
	<div id="header">
	</div>
	<div id="index-02">
	</div>
	<div id="index-03">
	</div>
	<div id="userinput">
	<input type="text" style="background-image: url(imgs/userinput.gif); border: none; vertical-align: middle; margin: 0 0 1em 0; width: 116px; padding-left:22px;">
	</div>
	<div id="index-05">
	</div>
	<div id="index-06">
	</div>
	<div id="index-07">
	</div>
	<div id="passinput">
	<input type="password" style="background-image: url(imgs/passinput.gif); border: none; vertical-align: middle; margin: 0 0 1em 0; width: 116px; padding-left:22px;">
	</div>
	<div id="index-09">
	</div>
	<div id="index-10">
	</div>
	<div id="index-11">
	</div>
	<div id="loginbutton">
		<a href="#">
			<img src="imgs/loginbutton.gif" width="78" height="15" border="0" alt=""></a>
	</div>
	<div id="index-13">
	</div>
	<div id="index-14">
	</div>
	<div id="mail">



	</div>
	<div id="index-16">
	</div>
	<div id="index-17">
	</div>
	<div id="home">
		<a href="index.html">
			<img src="imgs/home.gif" width="152" height="40" border="0" alt=""></a>
	</div>
	<div id="index-19">
	</div>
	<div id="portfolios">
		<a href="portfolios.html">
			<img src="imgs/portfolios.gif" width="152" height="40" border="0" alt=""></a>
	</div>
	<div id="overons">
		<a href="overons.html">
			<img src="imgs/overons.gif" width="152" height="40" border="0" alt=""></a>
	</div>
	<div id="contacteerons">
		<a href="contact.php">
			<img src="imgs/contacteerons.gif" width="152" height="36" border="0" alt=""></a>
	</div>
	<div id="index-23">
	</div>
	<div id="index-24">
	</div>
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

en de css

HTML:

<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1000px;
	height:736px;
}

#header {
	position:absolute;
	left:0px;
	top:0px;
	width:769px;
	height:166px;
	background: url(imgs/header.gif);
}

#index-02 {
	position:absolute;
	left:769px;
	top:0px;
	width:35px;
	height:166px;
	background: url(imgs/index_02.gif);
}

#index-03 {
	position:absolute;
	left:804px;
	top:0px;
	width:196px;
	height:67px;
	background: url(imgs/index_03.gif);
}

#userinput {
	position:absolute;
	left:804px;
	top:67px;
	width:116px;
	height:18px;
	background: url(imgs/userinput.gif);

}

#index-05 {
	position:absolute;
	left:920px;
	top:67px;
	width:80px;
	height:18px;
	background: url(imgs/index_05.gif);
}

#index-06 {
	position:absolute;
	left:804px;
	top:85px;
	width:116px;
	height:6px;
	background: url(imgs/index_06.gif);
}

#index-07 {
	position:absolute;
	left:920px;
	top:85px;
	width:80px;
	height:6px;
	background: url(imgs/index_07.gif);
}

#passinput {
	position:absolute;
	left:804px;
	top:91px;
	width:116px;
	height:18px;
	background: url(imgs/passinput.gif);
}

#index-09 {
	position:absolute;
	left:920px;
	top:91px;
	width:80px;
	height:18px;
	background: url(imgs/index_09.gif);
}

#index-10 {
	position:absolute;
	left:804px;
	top:109px;
	width:196px;
	height:6px;
	background: url(imgs/index_10.gif);
}

#index-11 {
	position:absolute;
	left:804px;
	top:115px;
	width:38px;
	height:15px;
	background: url(imgs/index_11.gif);
}

#loginbutton {
	position:absolute;
	left:842px;
	top:115px;
	width:78px;
	height:15px;
}

#index-13 {
	position:absolute;
	left:920px;
	top:115px;
	width:80px;
	height:15px;
	background: url(imgs/index_13.gif);
}

#index-14 {
	position:absolute;
	left:804px;
	top:130px;
	width:196px;
	height:36px;
	background: url(imgs/index_14.gif);
}

#mail {
	position:absolute;
	left:0px;
	top:166px;
	width:782px;
	height:570px;
	font-family: 'Arno Pro';
	font-size: 17;
	background: url(imgs/mail.gif);
	padding-left:30px;
	padding-top:20px;
}

#index-16 {
	position:absolute;
	left:752px;
	top:166px;
	width:248px;
	height:74px;
	background: url(imgs/index_16.gif);
}

#index-17 {
	position:absolute;
	left:752px;
	top:240px;
	width:43px;
	height:212px;
	background: url(imgs/index_17.gif);
}

#home {
	position:absolute;
	left:795px;
	top:240px;
	width:152px;
	height:40px;
}

#index-19 {
	position:absolute;
	left:947px;
	top:240px;
	width:53px;
	height:212px;
	background: url(imgs/index_19.gif);
}

#portfolios {
	position:absolute;
	left:795px;
	top:280px;
	width:152px;
	height:40px;
}

#overons {
	position:absolute;
	left:795px;
	top:320px;
	width:152px;
	height:40px;
}

#contacteerons {
	position:absolute;
	left:795px;
	top:360px;
	width:152px;
	height:36px;
}

#index-23 {
	position:absolute;
	left:795px;
	top:396px;
	width:152px;
	height:56px;
	background: url(imgs/index_23.gif);
}

#index-24 {
	position:absolute;
	left:752px;
	top:452px;
	width:248px;
	height:284px;
	background: url(imgs/index_25.gif);
}

-->
</style>
<!-- End ImageReady Styles -->

Goeroeboeroe · 1 mrt 2010

Ik zie nu dat jullie zelf websites maken. Dat heb ik eerder niet gezien, of stond er nog niet op.
Mag ik in dat geval aannemen dat jullie het verschil tussen position: absolute en position: relative weten? Dat leer je in les 1 van de beginners-opleiding sitemaken.
position: absolute wordt normaal genomen niet gebruikt in het ontwerp wat jullie hebben, want dat is nergens voor nodig. Alleen: als je het zo maakt, en je gaat dan absolute door relative vervangen, ja, dat werkt niet. Maar dat weten jullie als sitebouwers natuurlijk nog veel beter dan ik.

Jullie maken 'n unieke site voor iedereen. Dat geloof ik direct. Ik denk zelfs dat jullie 'n unieke site voor elke browser maken, want het doctype mist.
Als ik jullie site door de validator haal, zie ik 'n serie fouten (zowel in de html als in de css).
Beetje narrig: ja. Ik vind namelijk dat als je sites voor anderen gaat bouwen tegen betaling, dat je dan toch op z'n minst elementaire kennis over dingen als 'n doctype of position moet hebben.

Edit: in die site hierboven kost 't 2 seconden om de fout te vinden. margin: 0 auto werkt niet in combinatie met position: absolute.

brownmouse · 1 mrt 2010

Goeroeboeroe zei:
Jullie maken 'n unieke site voor iedereen. Dat geloof ik direct. Ik denk zelfs dat jullie 'n unieke site voor elke browser maken, want het doctype mist.
Als ik jullie site door de validator haal, zie ik 'n serie fouten (zowel in de html als in de css).

idd okee er miste al iets..

stom...

brownmouse · 2 mrt 2010

ik heb alle fouten uit het CSS bestand ofwel XHTML..

maar hoe moet ik hem nou centreren?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<title>New Design - Al onze creaties komen tot leven</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css2.css" type="text/css" media="screen" />


</head>
<body style="background-color:#000000;">
<div id="Table_01">
	<div id="header">
</div>
	<div id="index-02">
</div>
	<div id="index-03">
</div>
	<div id="userinput"><input type="text" style="background-image: url(imgs/userinput.gif); border: none; vertical-align: middle; margin: 0 0 1em 0; width: 116px; padding-left:22px;" /></div>
	<div id="index-05">
</div>
	<div id="index-06">
</div>
	<div id="index-07">
</div>
	<div id="passinput">
<input type="password" style="background-image: url(imgs/passinput.gif); border: none; vertical-align: middle; margin: 0 0 1em 0; width: 116px; padding-left:22px;" />
</div>
	<div id="index-09">
</div>
	<div id="index-10">
</div>
	<div id="index-11">
</div>
	<div id="loginbutton">
<a href="#">
<img src="imgs/loginbutton.gif" width="78" height="15" alt="" /></a>
</div>
	<div id="index-13">
</div>
	<div id="index-14">
</div>
	<div id="mail">



</div>
	<div id="index-16">
</div>
	<div id="index-17">
</div>
	<div id="home">
<a href="index.html">
<img src="imgs/home.gif" width="152" height="40" alt="" /></a>
</div>
	<div id="index-19">
</div>
	<div id="portfolios">
<a href="portfolios.html">
<img src="imgs/portfolios.gif" width="152" height="40" alt="" /></a>
</div>
	<div id="overons">
<a href="overons.html">
<img src="imgs/overons.gif" width="152" height="40" alt="" /></a>
</div>
	<div id="contacteerons">
<a href="contact.php">
<img src="imgs/contacteerons.gif" width="152" height="36" alt="" /></a>
</div>
	<div id="index-23">
</div>
	<div id="index-24">
</div>
</div>
</body>
</html>

HTML:

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1000px;
	height:736px;
}

#header {
	position:absolute;
	left:0px;
	top:0px;
	width:769px;
	height:166px;
	background: url(imgs/header.gif);
}

#index-02 {
	position:absolute;
	left:769px;
	top:0px;
	width:35px;
	height:166px;
	background: url(imgs/index_02.gif);
}

#index-03 {
	position:absolute;
	left:804px;
	top:0px;
	width:196px;
	height:67px;
	background: url(imgs/index_03.gif);
}

#userinput {
	position:absolute;
	left:804px;
	top:67px;
	width:116px;
	height:18px;
	background: url(imgs/userinput.gif);

}

#index-05 {
	position:absolute;
	left:920px;
	top:67px;
	width:80px;
	height:18px;
	background: url(imgs/index_05.gif);
}

#index-06 {
	position:absolute;
	left:804px;
	top:85px;
	width:116px;
	height:6px;
	background: url(imgs/index_06.gif);
}

#index-07 {
	position:absolute;
	left:920px;
	top:85px;
	width:80px;
	height:6px;
	background: url(imgs/index_07.gif);
}

#passinput {
	position:absolute;
	left:804px;
	top:91px;
	width:116px;
	height:18px;
	background: url(imgs/passinput.gif);
}

#index-09 {
	position:absolute;
	left:920px;
	top:91px;
	width:80px;
	height:18px;
	background: url(imgs/index_09.gif);
}

#index-10 {
	position:absolute;
	left:804px;
	top:109px;
	width:196px;
	height:6px;
	background: url(imgs/index_10.gif);
}

#index-11 {
	position:absolute;
	left:804px;
	top:115px;
	width:38px;
	height:15px;
	background: url(imgs/index_11.gif);
}

#loginbutton {
	position:absolute;
	left:842px;
	top:115px;
	width:78px;
	height:15px;
}

#index-13 {
	position:absolute;
	left:920px;
	top:115px;
	width:80px;
	height:15px;
	background: url(imgs/index_13.gif);
}

#index-14 {
	position:absolute;
	left:804px;
	top:130px;
	width:196px;
	height:36px;
	background: url(imgs/index_14.gif);
}

#mail {
	position:absolute;
	left:0px;
	top:166px;
	width:752px;
	height:550px;
	font-family: 'Arno Pro';
	font-size: 17px;
	background: url(imgs/mail.gif);
	padding-left:30px;
	padding-top:20px;
}

#index-16 {
	position:absolute;
	left:752px;
	top:166px;
	width:248px;
	height:74px;
	background: url(imgs/index_16.gif);
}

#index-17 {
	position:absolute;
	left:752px;
	top:240px;
	width:43px;
	height:212px;
	background: url(imgs/index_17.gif);
}

#home {
	position:absolute;
	left:795px;
	top:240px;
	width:152px;
	height:40px;
}

#index-19 {
	position:absolute;
	left:947px;
	top:240px;
	width:53px;
	height:212px;
	background: url(imgs/index_19.gif);
}

#portfolios {
	position:absolute;
	left:795px;
	top:280px;
	width:152px;
	height:40px;
}

#overons {
	position:absolute;
	left:795px;
	top:320px;
	width:152px;
	height:40px;
}

#contacteerons {
	position:absolute;
	left:795px;
	top:360px;
	width:152px;
	height:36px;
}

#index-23 {
	position:absolute;
	left:795px;
	top:396px;
	width:152px;
	height:56px;
	background: url(imgs/index_23.gif);
}

#index-24 {
	position:absolute;
	left:752px;
	top:452px;
	width:248px;
	height:284px;
	background: url(imgs/index_25.gif);
}

Goeroeboeroe · 2 mrt 2010

Precies hetzelfde zoals de eerste keer (als ik even snel kijk, anders horen we 't wel weer).
De hele pagina in 'n extra div zetten. Meestal wordt zo'n div 'wrapper' genoemd.
Dus gelijk na <body>:

HTML:

<div id="wrapper">

En gelijk voor </body>:

HTML:

</div>

En die div#wrapper geef je dan als css:

Code:

div#wrapper {position: relative; width: 1000px; margin: 0 auto;}

div#wrapper is de ouder van alle andere elementen op de pagina.
Elementen met 'n absolute positie worden gepositioneerd ten opzichte van de eerste ouder die zelf 'n absolute, relatieve of fixed positie heeft. Als die er niet is, zoals bij jou, wordt het venster genomen als referentiepunt.
Door nu div#wrapper eromheen te zetten, die 'n relatieve positie heeft, wordt alles nu opeen gepositioneerd ten opzichte van div#wrapper.

Als je nu dus div#wrapper in het midden kunt meppen, zal de rest gelijk meehuppelen. Omdat het gepositioneerd is ten opzichte van div#wrapper. Dat is dus het enige nut van position: relative bij div#wrapper: zorgen dat de kinderen gepositioneerd worden ten opzichte van div#wrapper.

margin: 0 auto.
Omdat ik maar twee waarden in vul, krijgen onder en links automatisch dezelfde waarden. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links.
auto betekent in dit geval: evenveel. Oftewel: links en rechts evenveel marge. Oftewel: altijd horizontaal gecentreerd, ongeacht de grootte van het venster.

De breedte van 1000px is nodig omdat deze manier van centreren niet werkt zonder breedte. Je kunt nou eenmaal moeilijk iets zonder breedte in het midden zetten. Als ik het goed zie is het bij jou 1000px breed, anders moet je dat even aanpassen.

brownmouse · 2 mrt 2010

Goeroeboeroe zei:
Als ik het goed zie is het bij jou 1000px breed, anders moet je dat even aanpassen.

ja, 1000 vondt ik mooje grote kan op bijna alle resoluties,
en het is dit keer wel gelukt.

echt fijn voor jullie hulp, in IE7 en 8, Google chrome, FF en Opera doet hij het goed

vet bedankt

Div centeren. kom er niet uit....

brownmouse

Gebruiker

peter vazed

Meubilair

Goeroeboeroe

Terugkerende gebruiker

brownmouse

Gebruiker

brownmouse

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

brownmouse

Gebruiker

brownmouse

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

brownmouse

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy