Ole Posted February 4, 2012 Share Posted February 4, 2012 Is it possible to have a website to start in center ? Usually when I use APdiv it starts to the left and you move the different elements adjusting top and left.I know I can write <center> but when I dow that I cant move the APdivsWhat I want is a centered page, but i want to move the different objects so they are in center, kinda like as the page "starts in center"sorry for my english, it is not my first language.If you know what I mean, please let me know. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 4, 2012 Share Posted February 4, 2012 usually you would use a outer container ("#wrapper") with a fixed width, and then apply margin: 0 auto; #wrapper {margin: 0 auto; width: 960px;} <div id="wrapper"><div id="header"><div id="nav"></div></div><div id="content"></div><div id="footer"></div></div> Link to comment Share on other sites More sharing options...
Ole Posted February 6, 2012 Author Share Posted February 6, 2012 usually you would use a outer container ("#wrapper") with a fixed width, and then apply margin: 0 auto; #wrapper {margin: 0 auto; width: 960px;} <div id="wrapper"><div id="header"><div id="nav"></div></div><div id="content"></div><div id="footer"></div></div> Could you be a little more specific? Here is my page (that I want centered).http://www.ia-stud.hiof.no/~olean/test I want it to be in center including all the divs, is it possible?Here is the code:<html><head><title>Ole Andersen</title><style type="text/css">a:link {text-decoration: none;COLOR: inherit;}a:visited {text-decoration: none;COLOR: inherit ;}a:hover {text-decoration: none;COLOR: 778899 ;}a:active {text-decoration: none;COLOR: inherit;}</style> <style>#bg6{ position:absolute;background-color:#FFFFFF ;border-top-right-radius: 20px; border-top-left-radius: 20px;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;padding-left: 10px;padding-top:5px;padding-right:4px;padding-bottom:5px;left:240px;height:1110px;width:817px;top:130px;opacity:0.6;filter:alpha(opacity=60);z-index: 0; }#bg1{ position:absolute;left:150px;z-index: 0; }#scroll{ border:0px solid white;width:315px; height:320px; overflow-y:scroll;overflow-x:hide;}#bg2{ position:absolute;left:678px;top:255px;z-index: 1; padding-left: 20px;padding-top:10px;padding-right:10px;padding-bottom:10px;}#bg1{ position:absolute;left:150px;z-index: 0; }#header{ position:absolute;left:680px;top:120px;z-index: 2; width:347px;height:90px;}#dmpro{ position:absolute;left:680px;width:112px;height:30px;top:221px;}#pro{ position:absolute;left:797px;width:112px;height:30px;top:221px;}#kon{ position:absolute;left:914px;width:112px;height:30px;top:221px;}html { background: url(images/background.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}</style></head><body><div id="bg1"><img src="images/main.png" width="939px"></div><a href="index.html"><div id="header"></div></a><a href="dmpro.html"><div id="dmpro"></div></a><a href="pro.html"><div id="pro"></div></a><a href="kon.html"><div id="kon"></div></a><div id="bg2"><div id="scroll"><font color="#FFFFFF" face="tahoma"><font size="4px">test<br><font color="#FFFFFF" face="tahoma"><font size="2px">test</div></font></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2012 Share Posted February 7, 2012 Certainly, remove all position styling, with top, left etc properties, use float, margin, padding instead, as using positioning will prevent ANY centring solution provided, then use a outer container ("#wrapper") with a fixed width, and then apply margin: 0 auto; #wrapper {margin: 0 auto; width: 960px;} <div id="wrapper"><div id="bg1"><img src="images/main.png" width="939px"></div><a href="index.html"><div id="header"></div></a><a href="dmpro.html"><div id="dmpro"></div></a><a href="pro.html"><div id="pro"></div></a><a href="kon.html"><div id="kon"></div></a><div id="bg2"><div id="scroll"><font color="#FFFFFF" face="tahoma"><font size="4px">test<br><font color="#FFFFFF" face="tahoma"><font size="2px">test</div></font></div><!-- END of #wrapper div --> Note: div elements not allowed in <a> elements, and font -> color , face, size is the old method, style="font-color: white; font-size: 4px; font-family: Tahoma; " is the correct method. Also using font-size less than 9px is not recommended, I suggest you look through css tutorials. Link to comment Share on other sites More sharing options...
Ole Posted February 7, 2012 Author Share Posted February 7, 2012 Certainly, remove all position styling, with top, left etc properties, use float, margin, padding instead, as using positioning will prevent ANY centring solution provided, then use a outer container ("#wrapper") with a fixed width, and then apply margin: 0 auto; #wrapper {margin: 0 auto; width: 960px;} <div id="wrapper"><div id="bg1"><img src="images/main.png" width="939px"></div> <a href="index.html"><div id="header"></div></a> <a href="dmpro.html"><div id="dmpro"></div></a> <a href="pro.html"><div id="pro"></div></a> <a href="kon.html"><div id="kon"></div></a> <div id="bg2"><div id="scroll"><font color="#FFFFFF" face="tahoma"><font size="4px">test<br><font color="#FFFFFF" face="tahoma"><font size="2px">test</div> </font></div><!-- END of #wrapper div --> Note: div elements not allowed in <a> elements, and font -> color , face, size is the old method, style="font-color: white; font-size: 4px; font-family: Tahoma; " is the correct method. Also using font-size less than 9px is not recommended, I suggest you look through css tutorials. Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.