I'm Back! Need help with a website header

Yacko · 04-11-2009, 07:23 PM

How can I get my header to display from left to right so it can display on all resolutions and browsers.(so there is no sidescroller bars) (without making it all blurred)

My brother told me there is a code....

I kinda want my header to be like.

wholsaletrafficsystem[dot]com - I hope I'm allowed to post links as an example :P

Aronya · 04-11-2009, 09:37 PM

There isn't a specific code that does what you want. What you need to do is design your site with % widths, not specific pixel sizes. Your header image will, of course, be a set dimension (the header for the site you referenced is 450px), and the outer dimensions of the page will be dynamic.

Barbara Wilson · 04-12-2009, 12:01 PM

The blue gradient is a a very narrow image (2x150px) set to repeat across the top of the page so it will fill the entire width of the browser window. If you make your browser narrower than 900px though you'll see that the left/right scroll bar appears because the content table is set at 900px.

Yacko · 04-13-2009, 06:27 PM

Quote:

The blue gradient is a a very narrow image (2x150px) set to repeat across the top of the page so it will fill the entire width of the browser window. If you make your browser narrower than 900px though you'll see that the left/right scroll bar appears because the content table is set at 900px.

O_O
I'm sorry for my complete noobishness but could you please tell me how to do that?

I'm using
Photoshop
And Xsitepro

More specifically, how can I "set to repeat my header across the top of the page so it will fit the entire width of the window"

P.S

Forgot to say thanks!

- Just excuse my noobishness

Barbara Wilson · 04-13-2009, 08:29 PM

Put this in the head of your page:

<style type="text/css">
body {
background-image: url(images/bkg.gif);
background-repeat: repeat-x;
}
</style>

where bkg.gif is the image of your gradient In the site you referenced this image is 2px wide and 150px long but the length is going to depend on how long your gradient is.

Yacko · 04-13-2009, 08:42 PM

I put that code in there and nothing happened

+

I dont understand

mr_banks · 04-13-2009, 09:32 PM

I will help you with your problem. I just need you to PM me if you want my help I will take a look at what you have and we'll get everything working. The advice that you where given, while it would work, is not the best way to do it.

I do not want any money just let me know if you want my help?

Barbara Wilson · 04-13-2009, 10:05 PM

Yacko - Did you create your bkg.gif image and put it in your images folder?

mr_banks - Well, I wouldn't do it this way either - I'd use css. But this seemed the easiest way to get it working for Yacko. How would you do it? I'm always eager to learn a better way to do something.

Yacko · 04-16-2009, 01:24 AM

Sadly, I can't P.M

Yacko · 04-16-2009, 01:27 AM

Here is my code if that will help you guys:

Quote:

</head>
<body>

<table class="XSP_OUTLINE" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" class="XSP_HEADER_PANEL" width="100%"><img border=0 src="/images/coologoprolly.gif" alt=""></td>
</tr>
<tr>
<td class="XSP_LEFT_PANEL_SPC" id="XSP_LEFT_PANEL_SPC"> </td>
<td class="XSP_CENTER_PANEL" rowspan="2"><table class="XSP_CENTER_PANEL" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="XSP_MAIN_PANEL_HEADER">
</td>
</tr>

Yacko · 04-16-2009, 01:29 AM

This is a post from another site which I posted on . Maybe that'll also help you guys

Quote:

Anyways, I want my website header to display from right to left without making the browser bigger. (displayable on all resolutions identically).

I wish I could show you an example but i couldn't

Here goes:

-------------------------------------
Header TIF file goes in here.
Browser Starts ------------------------------------- Browser ends here

Blah Blah Blah Blah blah
........................................
.......................................
------------------------------------
FOOTER GOES IN HERE
-----------------------------------
< --------------------------------------->
^^ I don't want any side scroller bars

Basically, I just want the header to display from left to right identically on all browsers.

Yacko · 04-17-2009, 04:18 AM

It would be, really really nice if someone could actually HELP me >_<

Aronya · 04-17-2009, 12:02 PM

So what exactly is the problem at this point? What have you done? What changed when you did that?

If you're expecting your header IMAGE to expand and contract based on screen resolution, you're going to be disappointed.

Yacko · 04-17-2009, 05:11 PM

Quote:

Originally Posted by Aronya

So what exactly is the problem at this point? What have you done? What changed when you did that?

If you're expecting your header IMAGE to expand and contract based on screen resolution, you're going to be disappointed.

How will I be disappointed with what happens, I've seen what I want on other peoples website.

I simply want the header to go from LEFT to RIGHT without making side stroller bars. I DONT CARE HOW ITS DONE, I just want it done

.

Aronya · 04-17-2009, 05:26 PM

What's your website? wholsaletrafficsystem dot com (as you typed it in your OP) doesn't resolve, so I went to wholesaletrafficsystem dot com/. There are no horizontal scroll bars there at 1024x768. On the other hand, the code there doesn't seem to match what you posted.

Without better info, it's going to be hard to help.

Yacko · 04-17-2009, 05:49 PM

That's not my website.

I simply want my header like that! From left to right. If you read my post, maybe you'd realize.

What info do I need?

I simply want my header to go from left to right without making side scroller bars. THE CODE IS FOR MY WEBSITE.

What other info do you want, I've given you my code.

I need steps to take to get my header like wholesaletrafficsystem.com

Aronya · 04-17-2009, 05:53 PM

Let's see your CSS.

And I'd suggest throttling back a little on your attitude if you want help from people

Yacko · 04-17-2009, 06:06 PM

I apologize.

It would be appreciated if I read my post >_<.

Anyways, I don't have CSS, I just have made a photoshop header...

Please explain :\....

My website is...

www.qwikweightloss.com/pooga/challange.html

Barbara Wilson · 04-17-2009, 06:45 PM

Your header and page is 1280px wide - there's going to be left/right scroll bars for everyone with their resolution set lower than 1280x768.

Yacko · 04-17-2009, 07:12 PM

Okay. I know that.

But at wholesaletrafficsystem.com - They have their header adjust from left to right with no side scrollers. (no matter what the resolution etc.)

The question is how do I get it like that.

Is there a code?
Is there some special trick?
What are the steps I need to take in order to get my website like that?

Surely it can't be that hard if everybody is doing it.

As I've said, if you view wholesaletrafficsystem.com at all resolutions, their header appears identically.

I'm asking HOW do they do that. I really don't mean to offend but not one person has answered my question properly

Thanks

Barbara Wilson · 04-17-2009, 09:37 PM

Actually Yacko - I did answer your question 3 days ago. Also, I've read your thread at the other forum and several people over there gave you various methods for handling this.

You do have a css style sheet. It's named xsp_style.css. In that file is a rule for BODY. Make that definition read like this:

BODY {
FONT-SIZE: 8pt;
MARGIN: 0px;
COLOR: #000000;
FONT-FAMILY: Tahoma, Sans-Serif;
BACKGROUND-COLOR: #ffffff;
background-image: url(bkg.gif);
background-repeat: repeat-x;
background-position: top;
}

This is adding the 3 lines for the background - background-image, background-repeat and background-position.

Upload your edited css file.

Make a new image from a blank part of your header that's 2 or 3 px wide and the full height of 150 px. You'll have a very thin image that's black with the small border of gold at the bottom. Name this image bkg.gif and upload it into your images folder.

This is the way the site you referenced in your OP was set up.

You're not actually stretching the header - this adds a background that matches your header background and makes it appear that the header is filling the entire browser window - left to right.

Aronya · 04-17-2009, 09:51 PM

The header image at WTS is only 450px wide. The rest of what you see is background. So, as long as you view that site at something above 450px, you won't get scroll bars. The browser just fills in the background as needed.

Most people use resolutions of 1024px wide or less. Seems like you're designing at 1280, so YOU don't get scroll bars, but most of the rest of the world will.

Yacko · 04-18-2009, 12:03 AM

Finally, I think we've hit bullseye.

I've figured I actually do have a CS file thanks to Barbara. :].

But the problem isn't solved yet...

Where do I specify those details... >_<

Quote:

BODY{MARGIN-LEFT: 0px;MARGIN-RIGHT: 0px;MARGIN-TOP: 0px;MARGIN-BOTTOM: 0px;BACKGROUND-COLOR: #FFFFFF;FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Tahoma, Sans-Serif;}

TABLE.XSP_OUTLINE{HEIGHT: 100%;WIDTH: 540px;}

TD.XSP_HEADER_PANEL{BACKGROUND-COLOR: #FFFFFF; WIDTH: 540px;TEXT-ALIGN: left;}

TD.XSP_HEADER_PANEL TABLE{}

TD.XSP_LEFT_PANEL_SPC{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 100%; WIDTH: 270px; BACKGROUND-COLOR: #FFFFFF;PADDING: 0px;}

TD.XSP_LEFT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 1px; WIDTH: 270px; BACKGROUND-COLOR: #FFFFFF;PADDING: 0px;}

DIV.XSP_LEFT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;WIDTH: 100%; FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif; PADDING: 0px;}

DIV.XSP_LEFT_PANEL table{FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}

TD.XSP_CENTER_PANEL{HEIGHT: 100%; WIDTH: -1px; BACKGROUND-COLOR: #FFFFFF;}

TD.XSP_CENTER_PANEL_NR{HEIGHT: 100%; WIDTH: 269px; BACKGROUND-COLOR: #FFFFFF;}

TABLE.XSP_CENTER_PANEL{HEIGHT: 100%;WIDTH: 100%;}

TD.XSP_MAIN_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 100%; WIDTH: 100%;FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Tahoma, Sans-Serif;PADDING: -1px;}

TD.XSP_MAIN_PANEL TABLE{FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Tahoma, Sans-Serif;}

TD.XSP_MAIN_PANEL_FOOTER{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 20px; BACKGROUND-COLOR: #FFFFFF; WIDTH: 100%; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;PADDING: 5px 5px;}

TD.XSP_MAIN_PANEL_FOOTER TABLE{FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}

TD.XSP_MAIN_PANEL_HEADER{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 30px; BACKGROUND-COLOR: #FFFFFF; WIDTH: 100%; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;PADDING: 5px 5px;}

TD.XSP_MAIN_PANEL_HEADER TABLE{FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}

TD.XSP_INFO_BAR{VERTICAL-ALIGN: top;HEIGHT: 30px; BACKGROUND-COLOR: #FFFFFF;FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;PADDING: 5px;}

TD.XSP_INFO_BAR TABLE{FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}

TD.XSP_RIGHT_PANEL_SPC{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 100%; WIDTH: 270px; BACKGROUND-COLOR: #FFFFFF;PADDING: 0px;}

TD.XSP_RIGHT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 1px; WIDTH: 270px; BACKGROUND-COLOR: #FFFFFF;PADDING: 0px;}

DIV.XSP_RIGHT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;WIDTH: 100%; FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif; PADDING: 0px;}

DIV.XSP_RIGHT_PANEL TABLE{FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif;}

TD.XSP_FOOTER_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN: left;HEIGHT: 100px; WIDTH: 540px; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif; PADDING: 5px;BACKGROUND-COLOR: #F5F5F5;}

TD.XSP_FOOTER_PANEL TABLE{FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Sans-Serif; }

DIV.BREADCRUMB { font-size: 8pt; color: #000000; font-family: Verdana, Sans-Serif; font-weight: normal; text-decoration: none; }

A.BREADCRUMB { font-size: 8pt; color: #000000; font-family: Verdana, Sans-Serif; font-weight: normal; text-decoration: underline; }

A.BREADCRUMB:visited { color:#000000; }

A.BREADCRUMB:hover { color:#000000 }

Aronya · 04-18-2009, 12:23 AM

Quote:

Originally Posted by Yacko

TABLE.XSP_OUTLINE{HEIGHT: 100%;WIDTH: 540px;}

I would start with this. Your header graphic is almost twice the size designated by the CSS file. Crop your header to fit 540px wide & see what happens.

Yacko · 04-18-2009, 05:02 AM

Quote:

Originally Posted by Aronya

I would start with this. Your header graphic is almost twice the size designated by the CSS file. Crop your header to fit 540px wide & see what happens.

Yeah, the header just went like smaller :O

Barbara Wilson · 04-18-2009, 08:26 AM

Quote:

Originally Posted by Yacko

Finally, I think we've hit bullseye.

I've figured I actually do have a CS file thanks to Barbara. :].

But the problem isn't solved yet...

Where do I specify those details... >_<

Here -
BODY{MARGIN-LEFT: 0px;MARGIN-RIGHT: 0px;MARGIN-TOP: 0px;MARGIN-BOTTOM: 0px;BACKGROUND-COLOR: #FFFFFF;FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Tahoma, Sans-Serif;}

04-11-2009, 07:23 PM	#1
Yacko Active Warrior Join Date: Nov 2008 Posts: 32 Thanks: 2 Thanked 1 Time in 1 Post	I'm Back! Need help with a website header How can I get my header to display from left to right so it can display on all resolutions and browsers.(so there is no sidescroller bars) (without making it all blurred) My brother told me there is a code.... I kinda want my header to be like. wholsaletrafficsystem[dot]com - I hope I'm allowed to post links as an example :P
	I'm only good at keyword researching :P

04-11-2009, 09:37 PM	#2
Aronya Advanced Warrior War Room Member Join Date: Feb 2008 Location: Escondido, CA. Becase San Marcos just wasn't hot enough. Posts: 510 Thanks: 35 Thanked 56 Times in 55 Posts	Re: I'm Back! Need help with a website header There isn't a specific code that does what you want. What you need to do is design your site with % widths, not specific pixel sizes. Your header image will, of course, be a set dimension (the header for the site you referenced is 450px), and the outer dimensions of the page will be dynamic.

04-12-2009, 12:01 PM	#3
Barbara Wilson HyperActive Warrior War Room Member Join Date: Jul 2002 Location: South Carolina, USA. Posts: 180 Thanks: 7 Thanked 14 Times in 12 Posts	Re: I'm Back! Need help with a website header The blue gradient is a a very narrow image (2x150px) set to repeat across the top of the page so it will fill the entire width of the browser window. If you make your browser narrower than 900px though you'll see that the left/right scroll bar appears because the content table is set at 900px.
	Barbara Wilson http://www.ecoverdesigns.com

04-13-2009, 08:29 PM	#5
Barbara Wilson HyperActive Warrior War Room Member Join Date: Jul 2002 Location: South Carolina, USA. Posts: 180 Thanks: 7 Thanked 14 Times in 12 Posts	Re: I'm Back! Need help with a website header Put this in the head of your page: <style type="text/css"> body { background-image: url(images/bkg.gif); background-repeat: repeat-x; } </style> where bkg.gif is the image of your gradient In the site you referenced this image is 2px wide and 150px long but the length is going to depend on how long your gradient is.
	Barbara Wilson http://www.ecoverdesigns.com

04-13-2009, 08:42 PM	#6
Yacko Active Warrior Join Date: Nov 2008 Posts: 32 Thanks: 2 Thanked 1 Time in 1 Post	Re: I'm Back! Need help with a website header I put that code in there and nothing happened + I dont understand
	I'm only good at keyword researching :P

04-13-2009, 09:32 PM	#7
mr_banks Active Warrior Join Date: Nov 2008 Location: michigan Posts: 56 Thanks: 3 Thanked 7 Times in 7 Posts Social Networking	Re: I'm Back! Need help with a website header I will help you with your problem. I just need you to PM me if you want my help I will take a look at what you have and we'll get everything working. The advice that you where given, while it would work, is not the best way to do it. I do not want any money just let me know if you want my help?

04-13-2009, 10:05 PM	#8
Barbara Wilson HyperActive Warrior War Room Member Join Date: Jul 2002 Location: South Carolina, USA. Posts: 180 Thanks: 7 Thanked 14 Times in 12 Posts	Re: I'm Back! Need help with a website header Yacko - Did you create your bkg.gif image and put it in your images folder? mr_banks - Well, I wouldn't do it this way either - I'd use css. But this seemed the easiest way to get it working for Yacko. How would you do it? I'm always eager to learn a better way to do something.
	Barbara Wilson http://www.ecoverdesigns.com

04-16-2009, 01:24 AM	#9
Yacko Active Warrior Join Date: Nov 2008 Posts: 32 Thanks: 2 Thanked 1 Time in 1 Post	Re: I'm Back! Need help with a website header Sadly, I can't P.M
	I'm only good at keyword researching :P

04-17-2009, 04:18 AM	#12
Yacko Active Warrior Join Date: Nov 2008 Posts: 32 Thanks: 2 Thanked 1 Time in 1 Post	Re: I'm Back! Need help with a website header It would be, really really nice if someone could actually HELP me >_<
	I'm only good at keyword researching :P

04-17-2009, 12:02 PM	#13
Aronya Advanced Warrior War Room Member Join Date: Feb 2008 Location: Escondido, CA. Becase San Marcos just wasn't hot enough. Posts: 510 Thanks: 35 Thanked 56 Times in 55 Posts	Re: I'm Back! Need help with a website header So what exactly is the problem at this point? What have you done? What changed when you did that? If you're expecting your header IMAGE to expand and contract based on screen resolution, you're going to be disappointed.

04-17-2009, 05:26 PM	#15
Aronya Advanced Warrior War Room Member Join Date: Feb 2008 Location: Escondido, CA. Becase San Marcos just wasn't hot enough. Posts: 510 Thanks: 35 Thanked 56 Times in 55 Posts	Re: I'm Back! Need help with a website header What's your website? wholsaletrafficsystem dot com (as you typed it in your OP) doesn't resolve, so I went to wholesaletrafficsystem dot com/. There are no horizontal scroll bars there at 1024x768. On the other hand, the code there doesn't seem to match what you posted. Without better info, it's going to be hard to help.

04-17-2009, 05:49 PM	#16
Yacko Active Warrior Join Date: Nov 2008 Posts: 32 Thanks: 2 Thanked 1 Time in 1 Post	Re: I'm Back! Need help with a website header That's not my website. I simply want my header like that! From left to right. If you read my post, maybe you'd realize. What info do I need? I simply want my header to go from left to right without making side scroller bars. THE CODE IS FOR MY WEBSITE. What other info do you want, I've given you my code. I need steps to take to get my header like wholesaletrafficsystem.com
	I'm only good at keyword researching :P

04-17-2009, 05:53 PM	#17
Aronya Advanced Warrior War Room Member Join Date: Feb 2008 Location: Escondido, CA. Becase San Marcos just wasn't hot enough. Posts: 510 Thanks: 35 Thanked 56 Times in 55 Posts	Re: I'm Back! Need help with a website header Let's see your CSS. And I'd suggest throttling back a little on your attitude if you want help from people

04-17-2009, 06:06 PM	#18
Yacko Active Warrior Join Date: Nov 2008 Posts: 32 Thanks: 2 Thanked 1 Time in 1 Post	Re: I'm Back! Need help with a website header I apologize. It would be appreciated if I read my post >_<. Anyways, I don't have CSS, I just have made a photoshop header... Please explain :\.... My website is... www.qwikweightloss.com/pooga/challange.html
	I'm only good at keyword researching :P

04-17-2009, 06:45 PM	#19
Barbara Wilson HyperActive Warrior War Room Member Join Date: Jul 2002 Location: South Carolina, USA. Posts: 180 Thanks: 7 Thanked 14 Times in 12 Posts	Re: I'm Back! Need help with a website header Your header and page is 1280px wide - there's going to be left/right scroll bars for everyone with their resolution set lower than 1280x768.
	Barbara Wilson http://www.ecoverdesigns.com

04-17-2009, 07:12 PM	#20
Yacko Active Warrior Join Date: Nov 2008 Posts: 32 Thanks: 2 Thanked 1 Time in 1 Post	Re: I'm Back! Need help with a website header Okay. I know that. But at wholesaletrafficsystem.com - They have their header adjust from left to right with no side scrollers. (no matter what the resolution etc.) The question is how do I get it like that. Is there a code? Is there some special trick? What are the steps I need to take in order to get my website like that? Surely it can't be that hard if everybody is doing it. As I've said, if you view wholesaletrafficsystem.com at all resolutions, their header appears identically. I'm asking HOW do they do that. I really don't mean to offend but not one person has answered my question properly Thanks
	I'm only good at keyword researching :P

04-17-2009, 09:37 PM	#21
Barbara Wilson HyperActive Warrior War Room Member Join Date: Jul 2002 Location: South Carolina, USA. Posts: 180 Thanks: 7 Thanked 14 Times in 12 Posts	Re: I'm Back! Need help with a website header Actually Yacko - I did answer your question 3 days ago. Also, I've read your thread at the other forum and several people over there gave you various methods for handling this. You do have a css style sheet. It's named xsp_style.css. In that file is a rule for BODY. Make that definition read like this: BODY { FONT-SIZE: 8pt; MARGIN: 0px; COLOR: #000000; FONT-FAMILY: Tahoma, Sans-Serif; BACKGROUND-COLOR: #ffffff; background-image: url(bkg.gif); background-repeat: repeat-x; background-position: top; } This is adding the 3 lines for the background - background-image, background-repeat and background-position. Upload your edited css file. Make a new image from a blank part of your header that's 2 or 3 px wide and the full height of 150 px. You'll have a very thin image that's black with the small border of gold at the bottom. Name this image bkg.gif and upload it into your images folder. This is the way the site you referenced in your OP was set up. You're not actually stretching the header - this adds a background that matches your header background and makes it appear that the header is filling the entire browser window - left to right.
	Barbara Wilson http://www.ecoverdesigns.com

04-17-2009, 09:51 PM	#22
Aronya Advanced Warrior War Room Member Join Date: Feb 2008 Location: Escondido, CA. Becase San Marcos just wasn't hot enough. Posts: 510 Thanks: 35 Thanked 56 Times in 55 Posts	Re: I'm Back! Need help with a website header The header image at WTS is only 450px wide. The rest of what you see is background. So, as long as you view that site at something above 450px, you won't get scroll bars. The browser just fills in the background as needed. Most people use resolutions of 1024px wide or less. Seems like you're designing at 1280, so YOU don't get scroll bars, but most of the rest of the world will.