Jump to content
Killersites Community
Sign in to follow this  
AnthonyJ

I can't get my sections to align correctly

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×