Jump to content
Stef's Coding Community
Sign in to follow this  
JasonDavis

CSS tutorial question - div tags and location of sidebars

Recommended Posts

Hi all, I sent this question to Stefan regarding the CSS tutorial. He suggested I post it here.

Hope someone can help!

 

 

 

I have one question regarding part 2

(http://www.csstutorial.net/css_tutorial_part2.php) - I still don't

quite understand what makes the navigation show up on the left side of

the page, and what makes the content show up on the right. I changed

the <div> locations in the HTML as suggested, and of course you're

right - it doesn't change what the page looks like. I can't wrap my

head around that - I assume it has something to do with the navigation

section having a defined size and the centerDoc section only having a

padding size defined?

 

I'd love to figure that out.

 

Thanks again!

Jason

 

Here's the CSS for your quick reference:

 

#navigation {

position: absolute;

 

width: 210px;

height: 600px;

margin-top: 0px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

 

#centerDoc {

position: absolute;

 

padding: 0 0 20px 235px; /*top right bottom left*/

margin-top: 50px;

Share this post


Link to post
Share on other sites

The CSS you posted up there is incomplete - the tutorial calls for:

 

#centerDoc {
  position: absolute;
  padding: 0 0 20px 0; /*top right bottom left*/
  margin-top: 50px;
  margin-left: 235px;
}

 

Position absolute means 'go where I tell you to go' - and you're telling the navigation division to go to the very top (margin-top: 0) - and you're making it 210px wide.

 

The center doc is moved away from the left by 235px by the 'margin-left: 235px - and its top is set at 50px by "margin-top: 50px' - and when the divisions do as they are told, then that's where they end up.

Share this post


Link to post
Share on other sites

As a general rule, you can code position: absolute elements anywhere in the body html markup part of the page code and it doesn't affect the position they show on the screen. Every position: absolute element should also have either top or bottom and left or right with a size and also a width and height. Your #navigation and #centerDoc don't have all of these.

 

The position: absolute positions on the screen will relate to the corners of the body (the window) or a parent element that has position: relative, regardless of where they are coded in the body markup.

 

If you code elements without position: absolute (no position) or with position: relative, the order of coding in the body section is very important as each element follows the one before and positions itself relative to the ones before and after in the coding sequence.

Share this post


Link to post
Share on other sites

Thanks Andrea - the code got cutoff when I pasted it from my stylesheet. That explanation makes sense, I'll fool around with the absolute element to get a feel for how it works. That's what I was missing.

 

Wickham - thanks, I pasted wrong from the tutorial. That answers my question!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...