stuck centering my site!

[durack]

Hi, apologies in advance for my lack of knowledge in webdesign! I've only recently taught myself the very basics. I have designed and set up my site, www.bendurack.com and am reasonably happy with it. However I would ideally like the content to be centered horizontally and vertically.
I have surfed the web to find out how to do this, and tried using "wrappers" in css and whatnot but cannot seem to get it to work! can anyone please help me?

Thanks!

 

[smoovo]

Hi, apologies in advance for my lack of knowledge in webdesign! I've only recently taught myself the very basics. I have designed and set up my site, www.bendurack.com and am reasonably happy with it. However I would ideally like the content to be centered horizontally and vertically.
I have surfed the web to find out how to do this, and tried using "wrappers" in css and whatnot but cannot seem to get it to work! can anyone please help me?

Thanks!

Your link doesn't work...

 

[durack]

I know! I just checked it and contacted the company I'm hosting through, apparently they did something and have apologised. It should be live again tomorrow :S

sorry! and thanks for your eagerness its greatly appreciated!

 

[durack]

The site is live again now! sorry about that

 

[PixelPusher]

Ben,

To start, congrats on building your first site. Being that you are using absolute positioning, centering will be a little more challenging. Truthfully, I don't think you need to use "absolute". Use "relative" instead.

To fix:

div (with image, added class named "main")

div.main {
position:relative;
margin:80px auto;
height:460px;
width:749px;
}

Explained:
By using "relative" positioning you can you the "auto" setting in margins. When added to left and right side, this will automatically set the margins based on browser width....centering you site. Note, in order for the margin "auto" feature to function correctly, a width must be defined.

I suggest you take a look at the tutorial I posted in this forum ("TUTORIAL: CSS Positioning") and w3schools for more information about css positioning.


Other suggestions:

Make the [main] div the overall parent, and add the other elements as children.
Set that image as a background image, as opposed to a image tag element.
Try using a unordered list for you links (menu) as opposed to positioning individual divs.


Good luck, any if you get stuck we are here to help.