CSS Positioning

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Positioning

elliottpk

8:01 pm on Feb 7, 2011 (gmt 0)

Hi guys I'm really new to web design and I'm having alot of trouble with css.

I'm learning how to design a simple web page for class.
I want all of my content to be in the white area, even when resizing. I was able to get my menu bar and logo to work but I can't seem to do it with anything else.

I really want to have more control over my divs I guess, meaning that they stay where I put them and not cross into the gray area.
I've been doing this for days and I getting really frustrated.
Thanks for any help

[edited by: tedster at 2:07 am (utc) on Feb 9, 2011]

[edited by: alt131 at 6:00 pm (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]

Sub_Seven

10:17 pm on Feb 8, 2011 (gmt 0)

"I want this div to be in the white area and then remain there when I resize the window."

I resized the window and the div stayed there...

"I'd also like to have it a little bit lower."

Try this in your content1.css:

.content
{padding:15px 0px 0px 0px;}

Or you could use some margin as well, those 15px in the padding will only affect the top padding of the div.

Hope that helps :)

Sub_Seven

10:23 pm on Feb 8, 2011 (gmt 0)

Also, side note: You should not start a div before the <body> tag, everything should between <body> and </body> which also brings the fact that you are missing the closing </body> tag and </html> tag.

tedster

12:35 am on Feb 9, 2011 (gmt 0)

I you're new to CSS and HTML, the first step you should take is learning to write code that validates and from then on stick to valid code as a complete discipline. The W3C is the standards body for HTML and these links are your friends:

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

Fotiman

2:35 pm on Feb 9, 2011 (gmt 0)

It looks like you've got a background image on the body element that is 800 x 1200 and centered. And you want your content to be contained within that center block.

Within your body element, create a div element that will wrap all of your content. Give that div a fixed width of 800px, and margin: 0 auto; For example:


<body>
<div id="wrapper">
  ...
</div>
</body>

CSS:


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

As was already mentioned, you need to fix some validation issues. Also, you've got that background image set to repeat on the y axis. Note, that image has the appearance of a bottom border, so it's going to look a bit strange if the page is longer than 1200px (or for anyone with a resolution higher than than). You probably want no-repeat instead, assuming that your content will never be longer than 1200px.

CSS Positioning

elliottpk

Sub_Seven

Sub_Seven

tedster

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week