Embarassingly simple HTML formatting question.

[milefile]

Ever notice how the top of the GTPlanet pages goes all the way accross your screen, no matter what your screen width is? And no matter how small your screen is, you never get a horozontal scroll bar? Well, I get a horozontal scroll bar in the page I'm working on. I'm having trouble accomplishing this effect. Any suggestions?

P.S. A background color won't work because I don't want to have a flat color. I've tried it as a background image and as an img src tag. Neither worked.

 

[Chaos Fire]

Hmmm, maybe BGproperties:fixed or you can just...make sure that, I have no idea, That's what I use for Ifrmas and div layers.

 

[Matrixhasu77]

Originally posted by milefile
Ever notice how the top of the GTPlanet pages goes all the way accross your screen, no matter what your screen width is? And no matter how small your screen is, you never get a horozontal scroll bar? Well, I get a horozontal scroll bar in the page I'm working on. I'm having trouble accomplishing this effect. Any suggestions?

P.S. A background color won't work because I don't want to have a flat color. I've tried it as a background image and as an img src tag. Neither worked.

If you implement CSS into your site, you should be able to control the horizontal scrollbar by using the following code. It should get rid of it. Shannon clued me in on this one.

body { overflow: hidden; }

 

[Shannon]

Originally posted by Matrixhasu77
If you implement CSS into your site, you should be able to control the horizontal scrollbar by using the following code. It should get rid of it. Shannon clued me in on this one.

body { overflow: hidden; }

Yes, but overflow: hidden; will also hide the vertical scrollbar, which you may need.

overflow-x: hidden; will only hide the horizontal scrollbar.

 

[Matrixhasu77]

Originally posted by Shannon
Yes, but overflow: hidden; will also hide the vertical scrollbar, which you may need.

overflow-x: hidden; will only hide the horizontal scrollbar.

true, true. I forgot.

 

[Sage]

No horizontal scrollbars, eh? (Look below)

Anyway, Shannon's suggestion will work, though to be honest it might be best to actually see the page so that we can tell exactly what's happening (though I can understand if you're keeping it under wraps ). Speaking of wraps (I love puns!), if applicable you might want to add white-space: nowrap; in your CSS to the applicable selector, otherwise you end up with weird effects like the navigation bar wrapping to the next row in the screenshot...

 

[TurboSmoke]

Sage, it looks like you have reduced the size of your browser to get those scroll bars...(if you havent then please forgive me)..

SHOCK >> this trick isnt done using styles...

look at the source for the page.

<table width="100%" background="bg_blue.jpg">

<tr>
<td><object flashmovie width="268" height="79">
</object>
</td>
<td align="right"><img src="logo.gif"></td>
</tr>

this is the snippet that controls this part of the page. much simplified.

the secret is all here in this code.

first the table is set to 100% which is going to make the table the size of your browser window, no bigger. Second, the two image files stored in the table's only two tabledata fields are smaller in width than your browser window. Okay this the reason there are no scroll bars at the bottom, bear with me.

file 1 flash movie is 268 pixels wide
file 2 logo.gif is 309 pixels wide.
thats a total of 577 pixels wide.

now, here in the office my resolution s set to 800x600. so the total width of all the data in the table is 577 and my screen is 800 wide, the browser doesnt need to scroll. The table takes those files and displays the first one at the default left of the page and the second one at the right of the page as defined in the <td align=right> tag. in the middle is just shown some background image thats the same colour as the background of logo.gif and makes this file appear to stretch right across the screen which of course we know it doesnt....

if you change your screen reolution to say 1024x768 then the width of you table is 100% of 1024 and the width of the table data....?...well its still 577 but the space between the two files gets increased in order to fit the screen...

you will only see scroll bars when the size of your browser is reduced below 577 pixels wide..

thats how this trick is accomplished.

 

[TurboSmoke]

Originally posted by milefile
. I've tried it as a background image and as an img src tag. Neither worked.

post your code snippet...we'll get it working.

 

[Matrixhasu77]

Originally posted by TurboSmoke
thats how this trick is accomplished.

Erm, you do realize that tables are a horrible, horrible way to float items or use for anything in particular, right? Using a div tag and CSS is far more efficient and uses far less code. Plus it is XHTML complient(sp?) while tables are not. (I hate tables if you can't tell. CSS is far far easier.)

And if you want to have a background image using CSS simply use the following:

body {background: #001e56 url("http://www.yoursitehere.com/bg.jpg") repeat-x;}

where #001e56 is the color of the page and http://www.yoursitehere.com/bg.jpg is the url to your background image. repeat-x simply tiles the image horizontally. An example of this can be found on my site as this is directly from my CSS(but not without Sage's help).

Hope that helps somewhat. I'm around 90% sure that it will work.

 

[milefile]

I ended up just using a flat color for the title bar, and the same background color. It was just a simple webform for some business I am doing. It wasn't a creative project so I just did it the simplest possible way.

Thanks for all the suggestions though.

 

[Shannon]

Originally posted by Matrixhasu77
Erm, you do realize that tables are a horrible, horrible way to float items or use for anything in particular, right? Using a div tag and CSS is far more efficient and uses far less code. Plus it is XHTML complient(sp?) while tables are not. (I hate tables if you can't tell. CSS is far far easier.)

And if you want to have a background image using CSS simply use the following:

body {background: #001e56 url("http://www.yoursitehere.com/bg.jpg") repeat-x;}

where #001e56 is the color of the page and http://www.yoursitehere.com/bg.jpg is the url to your background image. repeat-x simply tiles the image horizontally. An example of this can be found on my site as this is directly from my CSS(but not without Sage's help).

Hope that helps somewhat. I'm around 90% sure that it will work.

I have to disagree there. Tables are fine, so long as you use them only for tabular data. Tables are still XHTML compliant, but you have to use CSS to set the width, height, border and a few other attributes of them.

Oh, and in your background-image: url declaration, you do not need the full url of the image. If the image is in your root folder on the server (where the page is located that will use that image), than you simple only need:

url("/bg.jpg")

If the image is located in an folder called images on your server, than simply add /images to the front:

url("/images/bg.jpg")

The same applies to any sort of link; whether it be to one of your pages, an image, a stylesheet, etc, etc.

Originally posted by Milefile
Ever notice how the top of the GTPlanet pages goes all the way accross your screen, no matter what your screen width is? And no matter how small your screen is, you never get a horozontal scroll bar? Well, I get a horozontal scroll bar in the page I'm working on. I'm having trouble accomplishing this effect. Any suggestions?

P.S. A background color won't work because I don't want to have a flat color. I've tried it as a background image and as an img src tag. Neither worked.

Is this background a seemless pattern? Like a gradient. If so, you could chop it up into a small size like 5x(however high you need it) and then using CSS to tile it horizontally across...

body {
     background-image: url("/bg.jpg") repeat-x;

That should work, but on the offchance that it isn't placed where you want, you could try adding background-position: like so:

     background-image: url("/bg.jpg") repeat-x;
     background-position: top left (or wherever you want it);

 

[Shannon]

Originally posted by milefile
I ended up just using a flat color for the title bar, and the same background color. It was just a simple webform for some business I am doing. It wasn't a creative project so I just did it the simplest possible way.

Thanks for all the suggestions though.

Now you tell me!

 

[GilesGuthrie]

Originally posted by Sage
No horizontal scrollbars, eh? (Look below)

Anyway, Shannon's suggestion will work, though to be honest it might be best to actually see the page so that we can tell exactly what's happening (though I can understand if you're keeping it under wraps ). Speaking of wraps (I love puns!), if applicable you might want to add white-space: nowrap; in your CSS to the applicable selector, otherwise you end up with weird effects like the navigation bar wrapping to the next row in the screenshot...

Is this the CSS replacement for the <nobr></nobr> tags?

 

[Matrixhasu77]

Originally posted by Shannon
I have to disagree there. Tables are fine, so long as you use them only for tabular data. Tables are still XHTML compliant, but you have to use CSS to set the width, height, border and a few other attributes of them.

True. I meant for something along the lines of image galleries, menus, page layout, etc. That's where it becomes noncompliant.

Oh, and in your background-image: url declaration, you do not need the full url of the image. If the image is in your root folder on the server (where the page is located that will use that image), than you simple only need:

url("/bg.jpg")

If the image is located in an folder called images on your server, than simply add /images to the front:

url("/images/bg.jpg")

The same applies to any sort of link; whether it be to one of your pages, an image, a stylesheet, etc, etc.

Again, True, but I have my website set up so that it is extremely organized in my FTP space. I may try it though to see if it works. If it does, you may have helped me cut down on the code of my site. I've never had much luck in doing this.

 

[Pako]

It would seem that the site is designed with Tables right? The top "row" is divided into (let's assume) three columns. The left column has the flash cars in it, and it's left justified. The center cell is empty, and the right cell has the GTPlanet.net logo which is right justified. Since your images are specific in size, when the tables stretch to accommodate different screen resolutions, the center cell is most likely to stretch/contract with the different sizes.

Sorry if I'm 8 days late and if you already have this issue resolved.... I just didn't see a conceptual resolution yet.

 

[Sage]

Originally posted by GilesGuthrie
Is this the CSS replacement for the <nobr></nobr> tags?

Yup!

 

[TurboSmoke]

Originally posted by Matrixhasu77
Erm, you do realize that tables are a horrible, horrible way to float items or use for anything in particular, right?

this IS how it is done in this case...the poster referred to the image at the top of GTPlanet....

tables...well there mostly misunderstood and misused, they can be very effective and efficient if used properly...

obviously there are time when you want to position things to an absolute degree, this is when a style sheet may be a better chioce but in this simple example, the table works perfectly well...as seen at the top of this page..

 

[TurboSmoke]

Originally posted by Pako
It would seem that the site is designed with Tables right? The top "row" is divided into (let's assume) three columns. The left column has the flash cars in it, and it's left justified. The center cell is empty, and the right cell has the GTPlanet.net logo which is right justified. Since your images are specific in size, when the tables stretch to accommodate different screen resolutions, the center cell is most likely to stretch/contract with the different sizes.resolved.... I just didn't see a conceptual resolution yet.

agreed 100%