Centering via CSS

Seachmall

How do I center everything on the page via CSS. Every method I try does nothing. Basically I want equal borders on each side of the page that expand and contract when the windows resized. Any help would be appreciated.

Thanks,
S.

NeVeR

check this website out
http://www.intensivstation.ch/en/templates/

forbairt

didn't check the link ...

usually what happens is ... within your body you put another div ... give it an id ...

lets calls the id wrapper ...

the css for this then becomes

#wrapper { margin: 0 auto 0 auto; }

And hey presto ... anything within your wrapper div gets centered...

edit: I forgot to add ... give the wrapper a width as well ... 740px or similar .. so thats ... width: 740px; or a % depending on your requirements

Seachmall

Just found my problem (the templates worked, thanks). Apparently my entire wrap is clossing too early. To clarify what I mean.

<div id="wrap">

	<div id="logo"></div>

	<div id="topnav">
		<a href="#" class="nav">Home</a>
		<a href="#" class="nav">About</a>
		<a href="#" class="nav">Contact</a>
	</div>

	<div id="innerwraptop"></div>

	<div id="innerwrap">
		<div id="innerwrapbottom"></div>
	</div>

</div>

The wrap div is closing at the first </div>, why? Should it go all the way down to the last? Any help...?

forbairt

without seeing your CSS .. I'd have to guess ... you've got elements absolutely positioned ? and as such the wrap doesn't know how big it is ?

Seachmall

There are absolute positioned element, should their not be? I specified a width for the wrap so it should be the right size.

I'm don't have much expierence in CSS so I'm still a n00b, kinda.

forbairt

absolute positioning is in relation to the page ... so saying left: 500px ... even though its in your wrap container won't make it 500px from its left side ... it'll be 500 from the left hand side of the page ...

what you want is position: relative;

hope that helps

Seachmall

That solved my problems however it created another one,<sarcastic> oh what a suprise.</sarcastic>

My layout is that I have 1 div (main div) centered in the page. Immediatley to the left (connected to the main div) I have a smaller div (menu div). This div contains 1 div for text and 4 divs for corners (to give a taped-on effect).

I have positioned the menu div inside the main div and given it a negative left element [left: -210px;]. All the divs within the menu div are [position: relative;] however the corner divs line up vertically under the menu div. Why?

I'll post my CSS if you'd like, and thanks again .

forbairt

any chance you could throw up a link / screenshot ? ...

And yeah fire ahead and post you css either way

Seachmall

HTML
This is all within the Main Wrap

<div id="menuwrap">

			<div id="menu">
				<a href="index.html" alt="home" class="menu">Home</a>
			<br />
				<a href="About.html" alt="About" class="menu">About</a>
			<br />
				<a href="Projects.html" alt="Projects" class="menu">Projects</a>
			<br />
				<a href="Contact.html" alt="Contact" class="menu">Contact</a>
			<br />
				<div class="inactive" alt="inactive" class="menu">Discussion</div>
			</div>

			<div class="tapeTR"></div>
			<div class="tapeBL"></div>
			<div class="tapeTL"></div>
			<div class="tapeBR"></div>

	</div>

CSS

#menuwrap{
	position: absolute;
	top: 400px;
	left: -210px;
	width: 230px;
	height: 300px;
}	

#menu {
	position: relative;
	top: 20px;
	left: 15px;
	width: 200px;
	height: 240px;
	padding-top: 20px;
	background-color: #fdfb45;
	text-align: center;
}
.tapeTR{
	position: relative;
	top: 0px;
	right: 0px;
	width: 92px;
	height: 64px;
	background-image: url(tape1.gif);
}

.tapeTL{
	position: relative;
	top: 0px;
	left: 0px;
	width: 92px;
	height: 64px;
	background-image: url(tape2.gif);
}

.tapeBL{
	position: relative;
	bottom: 0px;
	left: 0px;
	width: 92px;
	height: 64px;
	background-image: url(tape1.gif);
}

.tapeBR{
	position: relative;
	bottom: 0px;
	right: 0px;
	width: 92px;
	height: 64px;
	background-image: url(tape2.gif);
}

Wheni I set the menu wrap to [position:relative;] it skips down under the main wrap.

Sorry for the poor quaility of the screenshot. Trying to keep file size down. I'll try to get the site up tomorrow so you can take a look if need be.

forbairt

tired at the moment .... so this is probably complete bo**** ... try putting the tape before the menu div ... and giving the menu div a lower z-index than the tape divs


Edit: on a side note ... might I suggest you start to get into the habit of using ul li's for your menus ... investigate listamatic or some such term online and you'll see the light

Seachmall

Thanks, I cant try it now 'cause I'm in work.

I've tried using lists for menus but it always 'outjuts' the text and I can't fix it so I get p****d so I just put breaks in 'em. I'll do a search now to see if I can fix the list problem.

forbairt

Remember the first thing you want to do is get rid of any padding and margins ... once you've got that done you can fiddle about adjusting them to suit your needs.

a basic list ... css

ul { margin:0; padding:0; }
ul li { margin:0; padding:0; }
ul li a { }

Here is the link I think I mentioned ...
http://css.maxdesign.com.au/listamatic/

Seachmall

Nah, that just place the tapes ontop of the menu.

forbairt

gone to france for a month to get married as one does ... and with limited net access .. so sorry I wasn't able to help .... good luck with the problem and if its still a problem in august maybe I can help :eek:

Seachmall

Fine, ditch me in my time of need! God, some people are just so selfish.

Thanks anyway and congrats.