...

View Full Version : DIV Center



LillyB1983
12-23-2010, 12:13 AM
Hello,

Iím doing a website for one of my girlfriends and Iím having a hard time aligning my content in the middle.
Any help is greatly appreciated!

See: Website (http://www.toothjuice.net/krebsbach/index3.html)

Youíll notice a menu at the bottom that loads content into an ďabsoluteĒ positioned DIV above.
Iíd like this content to be centered.

Please advise <3

xelawho
12-23-2010, 12:43 AM
there are various ways of doing it and I think everybody has their favorite, but what I have found to be simplest is the following:

- take the width of your div class (in this case 800px)
- move the left edge of the div to the midway point of the screen (left: 50%;)
- move the div back to the left by half its width (margin-left: -400px;)

it should be centered, regardless of screen width.

but if the screen is less than 800px wide, then the fun starts

Excavator
12-23-2010, 12:44 AM
Hello LillyB1983,
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto


Your .fadecontentwrapper already has a width so adding margin: 0 auto; to that will center it.

But the content doesn't follow along with it because it's absolutely positioned. Do you really need ap there? Have a look at the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

Adding position: relative; to .fadecontentwrapper will make the ap elements it contains position themselves relative to .fadecontentwrapper instead of the body of the document.

You get the scrollbars because you add padding to 800px width .fadecontent. The box model shows how what you put in a container must not exceed the size of that container - margin/padding/border all count when figuring total width.

xelawho
12-23-2010, 12:54 AM
... but then Excavator's method would seem to be simpler still :D

LillyB1983
12-23-2010, 01:30 AM
Thank you for the replies.

@Excavator

When I take out the position:absolute; tag from my .fadecontent the fade script seizes to work and "stacks" my content on top of each other. Any idea why?

Site Link (http://toothjuice.net/krebsbach/index3.html) Updated:

I've gone ahead and put a 900px width and auto R/L margins on my .fadecontentwrapper and this seems to work except let's say you click a new link and want to go back to the indexed link ("Collection") I see a bit of the other divs content underneath it.

Ultimately I want each div centered perfectly to the logo at the bottom with no overlap. Your time/patience is greatly appreciated with this! Thank You!!

LillyB1983
12-23-2010, 01:48 AM
Ahh I think I figured it out. I needed to set the width of my wrapper div and the height of my content div.

Seriously thank you! Huge help.


Updated Link
(http://www.toothjuice.net/krebsbach/index3.html)

bazz
12-23-2010, 02:00 AM
glad you got it sorted.

just took a quick look at your css.

I know it wasnl;t your question but, you can simplify the links css at the end with



a:link, a:visited, a:hover, a:active {
color: #000000;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: #000000;
}

bazz

Excavator
12-23-2010, 02:43 AM
You could benefit from using the vaildators too. Have a look at the links about validation in my sginature line.

Fix your mix-n-matched DocType by making the top of your document look like this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>K R E B S B A C H</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/contentfader.js"></script>



Then you can should be able to look at each error found by the validator and fix it without much trouble.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum