Jump to content

Help with getting header to line up with web page


chicalisa

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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

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...