JasonDavis Posted February 5, 2011 Report Share Posted February 5, 2011 Hi all, I just finished the CSS tutorials on here. They were very helpful. I've been coding in Dreamweaver for years but am just now trying to learn to build pages from scratch in text. I'm trying to do that below, and I'm having a couple issues. I'm using this code for my HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>School Climate</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="leftbar"> </div> </body> </html> and I'm using this code for my CSS: #leftbar { position: absolute; width: 120 px; height: 100%; border-right: 1px solid white; background-color: #543a5c; } body { background-color: #fffdee; } Two things are not happening as I want. 1. I'm trying to get the left bar snug up against the left side of the browser with no space showing. I've tried setting padding, border and margin all to zero, and nothing seems to change. I still see a little background between the top and left side (but not the bottom, interestingly). 2. The border-right isn't working. I'm not sure why. I had it working at one point while I was playing around, but it seems to have stopped. I increased the size to 4px to make sure I was actually able to see it, but it still wasn't there. Any suggestions? Thanks! Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 5, 2011 Report Share Posted February 5, 2011 For starters, always put some content in your divisions - even if it's just some bogus lorem ipsem placeholder - an empty division takes up no space. Second, browsers have default settings - specific margins and paddings, that will keep things from going 'snug up against sides'. A global zero-set of * {margin: 0; padding: 0;} will fix that. Your border is showing - but the color you have set for your body background and the white border color are so close, it's not obvious on the monitor. here, I've applied above default zero-setting and changed the background color to gray, and voila: http://aandbwebdesign.com/KSforum/border.html Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 6, 2011 Report Share Posted February 6, 2011 Two other minor things: 1) If you don't want to reset browser defaults, you can remove the space by using body { padding:0; margin:0; } 2) On #leftbar, this line width: 120 px; should be width: 120px; Quote Link to comment Share on other sites More sharing options...
JasonDavis Posted February 6, 2011 Author Report Share Posted February 6, 2011 Wow, thanks for the quick responses! Using padding:0; margin:0; works either with the * global setting or by placing it in the body section. But I notice when I put it in the leftbar section, it doesn't work. Why is that? Wouldn't it override the browser settings there as well? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 6, 2011 Report Share Posted February 6, 2011 works either with the * global setting or by placing it in the body section. But I notice when I put it in the leftbar section, it doesn't work. Why is that? Wouldn't it override the browser settings there as well? The margin/padding is on the body element, so setting margin/padding to 0 on the leftbar won't do anything (by default, that should be 0 anyway.) The * character is a wildcard, so using * { margin:0; padding:0; } sets all elements (including the body) to have 0 padding/margin. Quote Link to comment Share on other sites More sharing options...
JasonDavis Posted February 7, 2011 Author Report Share Posted February 7, 2011 Gotcha. I have much to learn. Quote Link to comment Share on other sites More sharing options...
JasonDavis Posted February 8, 2011 Author Report Share Posted February 8, 2011 Hi again, I can start a new thread if needed, but since you guys have been such a great resource in here, I thought I would show you my progress and ask another question. I've uploaded my site here: http://www.wvconfidential.com/test/ The problem I'm currently having is the three purple boxes with matching divs: blog, philosophy and book. Why do they appear underneath each other? I didn't make them absolute like the other elements. So my questions are: 1. How to fix the boxes to make them side-by-side under the top bar, and 2. Am I doing things right from a CSS standpoint so far? Thanks! Let me know if I should start a new thread since this has now deviated from the original question. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted February 8, 2011 Report Share Posted February 8, 2011 (edited) This thread is fine. Just float them all to the left. That will line them all up on the same line. You could otherwise do display inline-block but float is easier. Edited February 8, 2011 by Eric Quote Link to comment Share on other sites More sharing options...
JasonDavis Posted February 8, 2011 Author Report Share Posted February 8, 2011 Thanks Eric, that did the trick! I also applied a margin-right to space them out nicely. 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.