CMS Made Simple Forums

Posted: **Mon Aug 02, 2010 1:49 pm**

Ik wil graag een div met vaste waarden in het midden van mijn webpagina hebben.
Ik heb ook een shadow.png die aan deze div verbonden is.
Alles werkt, behalve de div in het midden van de pagina positioneren zonder gebruik van de oplossing.

Code: Select all

html {
	margin: 0px;
	padding: 0px;
}

body {
        background: #C6C6C4;
	color: #000;
}

#container {
	margin-top: 100px;
	width: 910px;
	height: 514px;
}

#subcontainer {
        background: #FFF url('uploads/images/shadow.png') no-repeat;
	width: 910px;
	height: 514px;
	overflow: hidden;
}

Code: Select all

{process_pagedata}
<!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" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>

</__body>
<div id="container">
	<div id="subcontainer">test</div>
</div>
<__body>
</__html>

Posted: **Mon Aug 02, 2010 3:27 pm**

----------

Posted: **Mon Aug 02, 2010 7:11 pm**

hoi arnoud,
bedankt voor jouw antwoord. Kan je me nog verklaren waarom in onderstaande code zelfde resultaat wordt geboekt zodat ik iets uit kan leren??

Code: Select all

html {
	margin: 0px;
	padding: 0px;
}

body {	
        margin: 0px;
	padding: 0px;
	background: #000;
	color: #FFF;
}

#container_holder{
	width: 1000px;
        height: 99%; 
	margin: 0 auto;
	background: #000;
	overflow: hidden; 
}

#content_holder {
	margin-top: 50px;
}

#header {
        width: 180px;
	height: 100%; 
	float: left;
	background: #000; 
}

#menu {
	width: 230px;
        height: 99%;
	float: left;
	background: #000;
}

#content {
	width: 590px;
	height: 100%; 
        background: #000;
	float: left;
       	overflow: scroll;
	overflow-x: hidden;
	overflow-y: auto;
}	

#footer_holder {
        width: 99%;
        margin-top: 80px;
        float: left;
        border-top: 1px dashed;
        font-size: 9px;
        font-family: Verdana, Arial, Comic Sans Ms, sans-serif;
}

#footer_copyright {
        width: 49%;
        float: left;
}

#footer_links {
        width: 49%;
        text-align: right;
        float: right;
}

.container {
	width: 1000px;
        height: 99%; 
	margin: 0 auto;
	background: #000;
	overflow: hidden; 
}

.content {
	padding: 30px 10px 10px 10px;
        font-size: 12px;
        font-family: Verdana, Arial, Comic Sans Ms, sans-serif;
}

Posted: **Mon Aug 02, 2010 7:31 pm**

Waarschijnlijk deze regel:

Code: Select all

.container {
	margin: 0 auto;

Posted: **Tue Aug 03, 2010 6:41 am**

dat is het inderdaad. En ik zit daar dan uren op te zoeken.
Bedankt voor de hulp. Is er ook een mogelijkheid om

margin: 0 auto; en margin-top: 50px; in 1 div onder te brengen?

Posted: **Tue Aug 03, 2010 8:04 am**

Dat kan met:

Code: Select all

margin: 50px auto 0 auto;

De 4 waarden werken op de zijdes met de klok mee, van boven, rechts, onder, links

Posted: **Tue Aug 03, 2010 8:16 am**

thx Jos, ik had het net ook gevonden.
Ik was gewoon aan het twijfelen ivm 'auto'

CMS Made Simple Forums

[opgelost] div positioneren

[opgelost] div positioneren

Re: div positioneren

Re: div positioneren

Re: div positioneren

Re: div positioneren

Re: div positioneren

Re: div positioneren