Jump to content

I can't get my sections to align correctly


AnthonyJ

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.

Link to comment
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.

Link to comment
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

Link to comment
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...
×
×
  • Create New...