Jump to content
Ole

Centering page and ap divs .

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...