AnthonyJ Posted October 14, 2011 Report Share Posted October 14, 2011 Hello out there, Can you guys look at this code and show me where I went wrong. you will see at the top of the page I want the site title just below the grey outer shell. I attached the files below. arj_help.html arj_help.css Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 15, 2011 Report Share Posted October 15, 2011 Add .container { padding-top: 10px; } to the css file. I have a suspicion that margin-collapse is having an effect from the h1 and causing the problem but I haven't tested any further as the .container class makes the space in Firefox. IE 9 doesn't show any header backgrounds so the page looks terrible. IE9 doesn't process the header background gradient and IE6 to IE8 don't process the border-radius. See http://www.findmebyip.com/litmus/ For IE9 to show a background add a plain background-color and border-radius after the styles for linear-gradient and gradient with the browser prefixes. .container { padding-top: 10px; } /*added style*/ header { padding-top: 20px; margin-top: 20px; color: #fff; text-align:center; font-size: 24px; height: 80px; width: 900px; background: -moz-linear-gradient( center top, rgb(12,12,50) 0%, rgb(120,120,160) 100% ); background: -webkit-gradient( linear, right top, right bottom, color-stop (0,rgb(12,12,50)), color-stop (1,rgb(120,120,160)) ); -moz-border-radius: 12px 12px 12px 12px; -webkit-border-radius: 12px 12px 12px 12px; background-color: #ccc; border-radius: 12px 12px 12px 12px; /*added styles for IE9*/ } which shows color with border-radius in IE9 but no radius in IE6 to IE8, or use javascript for IE rounded corners. Quote Link to comment Share on other sites More sharing options...
virtual Posted October 15, 2011 Report Share Posted October 15, 2011 Take the width off your body tag. On section tag replace margin-left: 120px with margin: 0 auto. Define .container in your css, give it width of 900px and center it with margin: 0 auto, then push it down into the container with padding-top: 20px. Not sure if that is the look you want. Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted October 17, 2011 Author Report Share Posted October 17, 2011 No that is not quite what I was after but you gave me an idea... How would I go about doing this?...First take a look at the site currently with attached files. Let's say that I add three more colors to the right of the grey container. So I would have the white container with the content, then the grey then say..red, yellow, and green ( not that I would use those colors but for arguments sake). Now I want the pages in my nav bar to be one of those colors. How would I stagger those containers and when you click on the nav bar the appropriate page comes the fore-front? Make sense? helpme.css helpme.html 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.