Help with getting header to line up with web page

[chicalisa]

Can anyone help me figure out why my header with the pictures is not aligned with the rest of my web page? It starts to repeat at 1" of the picture.

 

www.marquealjordan.com/index2.html

 

 

also on the spalsh or entry page, my background pic doesn't cover the entire page. It shows white on the right side and at the bottom of the page.

 

thanks

[Andrea]

The reason your header image is repeating is that your main division it is in is about 1064px wide, but the image only 800. Background images that do not have a no-repeat in the CSS will repeat until the space is filled.

 

The image on your splash page again is a certain width, and if someone is viewing at higher resolutions - in your case higher than 1067px wide or 800px high - the image won't cover the entire screen and white will show. Your options are to allow an image to repeat (won't work with this one) - add a background color that blends with the image colors (iffy here) - or create a container as big as your background image and have a different background for whatever might stick out.

 

And about Splash pages - granted, it's my option, but I'm pretty sure I'm not the only one that has it: What's the point??? It's kind of like a book cover, which makes a whole lot of sense on a BOOK (it protects and tells you what's inside) - but when I want to go to a website, I want to go. LSW (one of our long-time members here) puts it like this: When you go to somebody's house and you ring the bell, you want to go inside - you don't want the flyscreen to open, and then have to ring again to make it through the second door (well, the yest of is, anyway). Scrap the splash screen and put the essential basics right on the index page.

 

PS: The font tag was deprecated YEARS ago and should not be used, and

tags are meant as line breaks and not to create space - if you want space, use margins and/or padding in your CSS.

[chicalisa]

Thanks a bunch Andrea and I like the examples you gave..lol

[chicalisa]

I also tried to put the no-repeat code into the css file but it makes the images disappear.

[virtual]

I couldn't see your page, it said the link was brokend but your disappearing background image maybe because you are testing in Internet Explorer and it requires you leave a space between the bracket and the no-repeat.

 

e.g. background:#303123 url(../images/bg_web.gif) no-repeat;

[chicalisa]

Hi Virtual...thanks and I will try that when I return home. I deleted the index2.html page so it's just www.marquealjordan.com now

[chicalisa]

Can someone please tell me why the body (white seciton) is not fixed or aligned with my header?

 

www.marquealjordan.com

Edited January 5, 2010 by chicalisa

[Wickham]

The white section is aligned with the header in my IE7 and Firefox; it looks good.

 

However, your page does not center in large screen resolutions. You have body padding 100px at the sides which means that the page shows a left body padding of 100px, then #container 820px (800 + 2*10px padding) then the remainder which is a lot more than 100px in large resolutions, although in 1024*768 resolution the page is nearly centered.

 

Delete the body padding and add margin: auto to #container and it will center in all resoulutions:-

body {/*padding:50px 100px;*/ margin:0; font-family:Tahoma, 

Geneva, sans-serif; background-image:url(images/body_bg.png);}

#container 
{background-color: #f8f6e9; width:800px; margin: 50px auto 0 auto;
padding:10px;}
}

 

The 50px top margin replaces the body 50px top padding.

 

Edit: you've just changed the styles to:-

body {padding:10px 300px; margin:0; font-family:Tahoma, Geneva, sans-serif; background-image:url(images/body_bg.png);}

#container 
{background-color:#f8f6e9; width:800px; padding:10px;}

 

with 300px side padding to the body which makes the centering worse!

Edited January 5, 2010 by Wickham

[virtual]

Maybe you didn't understand what Wickham was telling you, change your body code to this

 

body {
background-image:url(images/body_bg.png);
font-family:Tahoma,Geneva,sans-serif;
margin:0;
padding:10px;
}

which will give you the 10px space at the top of the container

 

Then change the container div to this

#container {
background-color:#F8F6E9;
margin:0 auto;
padding:10px;
width:800px;
}

The margin: 0 auto will center your container div on any width of page