[Opgelost] CSS vraagje

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Locked
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

[Opgelost] CSS vraagje

Post by rayring »

Beste CMSMS'sers,

Ik heb een CSS vraag ik probeer onderstaande site te centreren (site altijd in het midden) al van alles geprobeerd met text-align; float etc... iemand een suggestie ??? :

http://bit.ly/iPgU5O

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>{title} - {sitename}</title>
{metadata}
{stylesheet}
</head>
</__body>
<div id="container">
	<div id="top"><h1>{sitename}</h1><p>Alternatieve parfums</p></div>
	<div id="contentcontainer">
		<div id="menu">{menu template='Lightning : fm-mini'  number_of_levels='1'}</div>
	  <div id="content">
<!-- <div id="yah">{breadcrumbs starttext="U bent hier" delimiter="&raquo;" root="home"}</div> -->
{content}
</div>
  </div>
	<div id="footer">{global_content name='footer'}</div>
    </div>
{literal}<__script__ type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</__script>
<__script__ type="text/javascript">
var pageTracker = _gat._getTracker("UA-2351336-1");
pageTracker._trackPageview();
</__script>{/literal}
<__body>
</__html>
en stylesheet:

Code: Select all

body{background-image:url(/~drost/uploads/Lightning/layout_02.jpg);background-repeat:repeat-x;background-position:left top;font-family:Tahoma, Geneva, Verdana, Arial;font-size:12px;background-color:#eee;margin:0}
#container{width:750px;margin-top:0;margin-right:auto;margin-left:50px;background-image:url(/~drost/uploads/Lightning/parfum-fm_04.jpg);background-repeat:no-repeat;position:relative;background-position:left top;float:left}
#container #top{height:189px;width:750px;position:relative;float:left;margin:0;padding:0}
#container #top p,#container #top h1{text-indent:-7859px;color:#FFF;margin:0;padding:0}
#container #contentcontainer #menu{height:31px;top:-31px;text-align:left;position:relative;width:730px;float:left;margin:0;padding:0 10px}
#container #contentcontainer #menu #primary-nav,#container #contentcontainer #menu #primary-nav li{margin:0;padding:0}
#container #contentcontainer #menu #primary-nav li{list-style:none}
#container #contentcontainer #menu a{height:29px;border-bottom-width:1px;border-bottom-color:#CCC;line-height:29px;display:block;float:left;border-top-width:1px;border-top-color:#870021;background-image:url(/~drost/uploads/Lightning/layout_05.jpg);background-repeat:repeat-x;color:#FFF;text-decoration:none;font-variant:small-caps;text-transform:capitalize;font-family:Tahoma, Geneva, Verdana, Arial;font-size:12px;font-weight:700;border-style:solid none;margin:0;padding:0 10px}
#container #contentcontainer #menu a:hover{background-image:url(/~drost/uploads/Lightning/layout_05_over.jpg);border-top-width:1px;border-top-style:solid;border-top-color:#c04e68}
#container #contentcontainer #menu .currentpage,#container #contentcontainer #menu .activeparent,#container #contentcontainer #menu .currentpage:hover,#container #contentcontainer #menu .activeparent:hover{background-color:#FFF;background-image:none;color:#870021;padding-right:9px;padding-left:9px;border-color:#CCC #CCC #FFF;border-style:solid;border-width:1px}
#container #contentcontainer{background-color:#FFF;background-image:url(/~drost/uploads/Lightning/parfum-fm_09.jpg);background-repeat:repeat-x;background-position:left bottom;position:relative;width:748px;top:10px;border:1px solid #CCC;float:left;margin:0;padding:0 0 10px}
#container #contentcontainer #content{width:730px;font-family:Tahoma, Geneva, Verdana, Arial;font-size:12px;position:relative;text-align:justify;float:left;color:#666;padding:0 10px 20px}
#container #contentcontainer #content h1{color:#A20427;font-family:Tahoma, Geneva, Verdana, Arial;font-size:28px;font-variant:small-caps;padding-left:10px;margin-top:-10px;margin-bottom:10px}
#container #contentcontainer #content h2{color:#A20427;font-family:Tahoma, Geneva, Verdana, Arial;font-size:18px;font-variant:small-caps;margin-top:5px;padding-top:0}
#container #contentcontainer #content a{color:#333;font-family:Tahoma, Geneva, Verdana, Arial;margin-top:5px;padding-top:0;text-decoration:underline}
#container #contentcontainer #content a:hover{color:#A20427;font-family:Tahoma, Geneva, Verdana, Arial;margin-top:5px;padding-top:0;text-decoration:none}
#container #contentcontainer #content div.formbuilderform fieldset div{margin-bottom:10px;position:relative;clear:both;border-bottom:dotted 1px #A20427;padding:5px}
#container #contentcontainer #content div.formbuilderform input,#container #contentcontainer #content div.formbuilderform select{border:solid 1px #999}
#container #contentcontainer #content div.formbuilderform fieldset label{width:250px;float:left;text-align:left}
#container #contentcontainer #content div.formbuilderform .captchapict{float:left;margin-right:10px}
#container #footer{text-align:center;width:750px;line-height:25px;height:auto;margin-top:20px;float:left}
#container #contentcontainer #widget{float:left;width:157px;margin-top:10px;margin-bottom:10px;border-left-width:1px;border-left-style:dotted;border-left-color:#CCC;position:static;padding:10px}
#container #contentcontainer #content .ad{background-color:#EEE;color:#333;border:1px solid #C20427;position:relative;padding:10px}
#container #contentcontainer #content .ad .adimg{margin-right:10px;border:1px solid #C20427;padding:2px}
#container #contentcontainer #content .distributors{background-color:#EEE;color:#333;border:1px solid #C20427;position:relative;margin-bottom:10px;padding:10px}
#container #contentcontainer #content .actie{background-color:#FFF;color:#333;border:1px solid #C20427;position:relative;margin-bottom:10px;padding:10px}
#container #contentcontainer #content #products .prix{color:#A20427;font-size:16px;font-weight:700;text-align:right}
#container #contentcontainer #content #products{text-align:center;margin-right:auto;margin-left:auto}
#container #contentcontainer #content #products a{font-size:12px;color:#A20427;text-decoration:underline}
#footer a{color:#A20427;text-decoration:none}
#footer a:hover{color:#A20427;text-decoration:underline}
#container #contentcontainer #content .hpimg{margin-left:5px;border:1px solid #A20427;padding:2px}
#container #contentcontainer #content #yah{text-align:right;font-size:10px;color:#999;position:absolute;width:730px;top:-15px}
#container #contentcontainer #content #yah a{color:#666}
.howto{font-family:Arial, Helvetica, sans-serif;color:#FFF;font-size:12px;background-color:#71011A;background-image:url(/~drost/uploads/Lightning/layout_05.jpg);background-repeat:repeat-x;background-position:top;padding:5px}
#container #contentcontainer #content table h3{margin-top:5px;margin-bottom:5px;padding:0}
#container #contentcontainer #content .category_item{text-align:center;float:left;border:solid 1px #A20427;background:#FFF;width:140px;color:#A20427;height:130px;margin:5px;padding:5px}
#container #contentcontainer #content .item_notes{float:right;width:530px}
#container #contentcontainer #content #yah a:hover,#container #contentcontainer #content .category_item a{color:#A20427}
Last edited by rayring on Fri Jun 10, 2011 9:54 pm, edited 1 time in total.
Top
User avatar
M@rtijn
Power Poster
Power Poster
Posts: 706
Joined: Sat Nov 14, 2009 4:54 pm

Re: CSS vraagje

Post by M@rtijn »

Your container div has a float left, that's what's keeping the div from centering on the page.

I've removed the float in Firebug (super handy plugin for Firefox), changed the margin-left to 'auto' and presto the page is now centered.
One strange drawback, you've lost the banner image.
You can simply move that code to from #container to your #top class.

Your new CSS:
#container {
width:750px;
margin:0 auto;
}

#top {
height:189px;
width:750px;
position:relative;
float:left;
margin:0;
padding:0;
background-image:url(/~drost/uploads/Lightning/parfum-fm_04.jpg);
background-repeat:no-repeat;
position:relative;
background-position:left top;
}
Make your community a better place!
Top
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: CSS vraagje

Post by rayring »

M@rtijn, thank you for the solution!! Works great! ;D
Top
Locked

Return to “Dutch - Nederlands”