JasonDavis Posted February 4, 2011 Report Share Posted February 4, 2011 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; Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 4, 2011 Report Share Posted February 4, 2011 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 4, 2011 Report Share Posted February 4, 2011 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. Quote Link to comment Share on other sites More sharing options...
JasonDavis Posted February 4, 2011 Author Report Share Posted February 4, 2011 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.