[SOLVED] Content

thewebkid · #1 (**permalink**) Oct 26th, 2007, 04:16

How do I center all my content using css as appose to using a table?

Monie · #2 (**permalink**) Oct 26th, 2007, 05:27

Well, your sample code will be helpful!

Do you want to center the element itself (your div) or the element inside the div (eg. your <h1> or <p>)?

alexgeek · #3 (**permalink**) Oct 26th, 2007, 09:24

try something like:

Code: Select all

#content {
width: 800px;
height: 1000px;
margin: 0 auto;
}

And your html would be:

HTML: Select all

<div id="content">
content
</div>

Monie · #4 (**permalink**) Oct 26th, 2007, 09:37

That would be positioning the div horizontally center.

If you want to center the elements inside the div, you would use:

Code: Select all

 p {
text-align: center;
}

to center up all your paragraph inside the div that Alex just created.

Lucleonhart · #5 (**permalink**) Oct 26th, 2007, 09:44

If you want to center your content horizontal and vertically, you can use a wrapper div.
Using fixed pixel values, you can do it this way:

HTML: Select all

...
<body>
<div style='position:absolute; left:50%; top:50%;'>

<div style='position:absolute; left:-200px; top:-100px; width:400px; height:200px; border:1px solid black;'>
This box with a black border is totally centered! How nice.
</div>

</div>
</body>
...

There are alternative versions for % values or non-fixed areas.

alexgeek · #6 (**permalink**) Oct 26th, 2007, 09:45

Monie it will not center all elements, just text.
And personally center aligned text is awful looking, I wouldn't use it!

Monie · #7 (**permalink**) Oct 26th, 2007, 09:48

yeap.. It depends on what thewebkid means "content" in his question.
Thanks for clearing that up.

If he got image inside the div, he would just have to put this in his css code:

Code: Select all

#content {
width: 800px;
height: 1000px;
margin: 0 auto;
 text-align: center;
}

thewebkid · #8 (**permalink**) Oct 26th, 2007, 12:29

OK sorry for the lack of information I have given you. I will draw you out what I want the basic layout of my website to look like. It's like that "holy grail thing" I just learned a little of CSS in my class and not enough to know how to layout a page. brb with the image

MikeHopley · #9 (**permalink**) Oct 26th, 2007, 12:43

Quote:

Originally Posted by thewebkid

It's like that "holy grail thing" I just learned a little of CSS in my class and not enough to know how to layout a page.

The "holy grail" is, I believe, a misleading name.

Most websites don't need three columns. Use two columns unless you have a very good reason for three.

Since you're new to CSS, don't attempt complicated layouts. Most of them are pointless anyway, and you'll only confuse yourself.

thewebkid · #10 (**permalink**) Oct 26th, 2007, 12:47

Then What should I do? I don't want a beginner looking website.(that seems pretty prideful) I want to make i appealing and make it look like I really work hard on it.

......Ok now I am going to be more specific. This here shows the type of layout I want. I can do this with tables, but we all know that's a big RED LIGHT when it comes to web design. I want to be able to apply this to all my web pages(obviously) and have just a plain background color which I will chose later. Thank you for your help.

karinne · #11 (**permalink**) Oct 26th, 2007, 12:49

See the August editions of the Newsletter ... I have touched this in the FAQ

How do I center my site horizontally?

alexgeek · #12 (**permalink**) Oct 26th, 2007, 12:53

put all of the divs inside a master div and use my first code.
e.g. The CSS:

HTML: Select all

#wrapper {
width: 800px;
height: 1000px;
margin: 0 auto;
}

The html:

HTML: Select all

<div id="wrapper">
<div id="logo"><img> etc. etc.</div>
more divs here...
</div>

Marc · #13 (**permalink**) Oct 26th, 2007, 12:58

From your example to get the div to strech down the page on everyone's screens you will need to kinda hack it.

I found Ryan Fait's (was a webforumz member but isnt as active now!) sticky footer a good example. It can be found here: http://ryanfait.com/sticky-footer/.

Also to center the div you use the margin:0 auto; code

karinne · #14 (**permalink**) Oct 26th, 2007, 13:11

Guys ... stop repeating yourselves!

alexgeek · #15 (**permalink**) Oct 26th, 2007, 13:17

Ha yeah, seems like everyone has to clarify what everyone else says..
And I now realise by saying this I'm being a hypocrite..

thewebkid · #16 (**permalink**) Oct 26th, 2007, 13:27

Have I stirred up trouble?

karinne · #17 (**permalink**) Oct 26th, 2007, 13:32

Not really but next time it would help if you'd be more specific in your opening post!

But then ... the members here are trigger happy and can't wait to help out without even knowing what the OP needs help with

thewebkid · #18 (**permalink**) Oct 26th, 2007, 13:37

lol sorry. I was in a rush and wanted to get the subject going before calling it a day.

alexgeek · #19 (**permalink**) Oct 26th, 2007, 13:55

Anyway, did any of the suggestions work?
Or do you need more help?

thewebkid · #20 (**permalink**) Oct 26th, 2007, 14:05

I used your suggestion, but the page looks off center, it's more to the left

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Expandable Content Script (Swtich Content)	Matc	JavaScript Forum	0	Apr 8th, 2008 10:53
Content Placement + Content Dividing	josephman1988	Website Planning	2	Jan 22nd, 2008 05:02
[SOLVED] How do I Make Content available for download	chrissmith	Starting Out	4	Nov 11th, 2007 10:13
[SOLVED] the Main Content div of my template breaks when I type a long text	kee2ka4	Web Page Design	2	Nov 9th, 2007 11:26
Layering content on content in CSS?	wickedmoon	Web Page Design	1	Sep 10th, 2007 15:23

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Content