(X)HTML layout section in separate file? e.g. add link to navigation bar without editing every page?

You could use include statements to populate your page with html elements.

eg,
<?php include("URL of file here"); ?>

Lots of people do this with menus for the very reasons you have mentuioned - ie, so you only have to update your files in one place.

Just ensure you save your webpages with .php extentions. Use stylesheets to style up the elements.

As to your second question re: vertical gradient backgrounds.

There are a number of approaches to this. The one I use is to make a very thin slice of the image (eg, width:5px) and repeat it across the page. This saves your user a lot of bandwidth, as they only have to load one small image and then repeat it from their cache.
http://tools.dynamicdrive.com/gradient/

However, there are problems with fixed backgrounds, in as much as you don't know how big your user will have their browser window. This will effect the length of your page if you are using a fluid or elastic layout.

Cheers

Ok, thanks.

But, will using 2-3 of those "include" things make my site run slower? I heard something like it has to send a request to the server and get the data from the file and makes it run slower, or something...

As for the gradient: Here is exactly what I did:
Created a new image: 30x768
Used the gradient tool to make a nice gradient
Saved it, and then did this CSS:

body { background: url(images/background.png);/*gradient background*/ background-repeat: repeat-x; /*repeat the thin gradient across the page*/ background-color: black; /*color of the bottom of the gradient - to make it look seamless*/ }

Yet, it seems to look like I saved it as a GIF

It's weird, the top of the gradient looks fine, but the bottom looks... weird...
For some reason if I cut out that bottom chunk and put it at the top of my monitor it looks fine. But if I leave it at the bottom of my monitor you can see these... lines... I see gradients on other sites and they don't do that.

Thanks for your help

Yes, technically it will make your site run slower by a few milliseconds. If you need to ask this question I speculate you don't get hundreds of page views per minute, so its not something you need to bother about.

Even if it was there are a couple of pretty simple ways around the problem.
- set up your master site with the includes. Use some spidering software to copy your website. It'll copy the generated pages after the including has been done. Upload the copied site.
- use output buffering and cache the result. On each page view check to see if your cache is still valid and if it is send the cached page, if not regenerate the cache from the original files. For three or four includes its doubtful that caching will provide any advantage over doing the includes each time.

Alright! Thanks! :thumbsup:

I'm probably going to have less than 5 visitors per day on my site, so I guess it won't be a problem.

Can someone answer my gradient question, though? It looks just fine in my image editing program, but once I put it on the site it looks sorta like horizontal bars across the screen. I've seen sites with gradient backgrounds and they look fine....

Anyway, thanks for all your help - This topic is pretty much solved :rolleyes:

Information might be a bit vague to help you on the image question, but you definitely dont want to be saving as a gif

Uhhh... No, I said that I tried saving it as a png and jpg and it looked like a gif.

Anyway, I tried to provide as much information as I could about the gradient. Tell me what else you would like to know and I will tell you.

- set up your master site with the includes. Use some spidering software to copy your website. It'll copy the generated pages after the including has been done. Upload the copied site.
That wouldn't work (I think) because I'm making my site in PHP, and I think it would just copy what was outputted by the PHP.

Thanks

Yup - that's exactly right and exactly what you want to have happen - so it will work exactly as I said!

About the gradient, gif will work. The problem comes about if your image editing program isn't creating the gradient with enough steps or when you come to save it with a palette based image, there are insufficient colours in the palette. E.g. photoshop will sometimes save a gradient with 64 colours, which will look banded whereas if it saved 256 colours it would look smooth.

That's not what I want to happen. What about my other PHP code? Like my guestbook?
Anyway, I'm just going to leave it with the includes in the code, so it doesn't really matter.

And also, I didn't save the gradient as a gif. I tried both png and jpg... What I was saying, is that it came out looking like a gif, because it had a bunch of horizontal bars.

No, you don't want to do it for your guest book - only for static pages.

You say it looks like a gif. I make most of my gradients gif and they end up smooth. The problems isn't the image format but the number of colours used. Your graphics package, for whatever reason isn't using enough colours.

Fwiw, a PNG can be true colour or palletised. If your gradient does require more than 256 colours to appear smooth, you need to ensure you are using a true colour PNG (24 bit or 32 bit). However, the fact that JPGs seem to be banded as well points squarely at your graphics package (or the settings you are using).

Hm fair enough, but I think that many of the subtler gradients require a fair bit more information that 256 allows, I would certainly always save without thinking to jpg or png, but perhaps I ought to look at gifs and the number of colors I'm actually using.

I tend to stay clear of jpgs for gradients as the compression can create odd artifacts. 24bit or 32bit PNGs often are quite small so can be a good option. If (I realise) the file size is under 1.5k, I'll use a PNG.

The truth is by and large jpg are for photos they should deal with shading well but yes the losey compression can cause nasty artifacts, but then png was developed to deal with all but true digital photographs and it should really be used the majority of the time but IE had a stab at putting people off even though they probably weren't needing alpha channel, but I ramble.

Doesn't IE (<= 6) have issues with palletised PNGs?

You got me there, yes it has issues, but can't remember the exact nature of them , is that why I tend to use jpg? *sigh*

Wow, lots of posts...

Anyway, I tried a plain black to white gradient and it seems to do the same thing.

Here is all the information I can think of:
I'm using GIMP (+Linux), and the gradient tool. The image is 10x768. Then I save it as .png. It seems to make bars appear where it blends with the black. I'm doing png with maximum compression. Here is what my png looks like: http://img443.imageshack.us/img443/3033/background2kv6.png The gradient looks perfectly fine when I view the image in my browser, but not when I put it as a background on my page....

Is there something wrong with it? Maybe it's just my monitor or something. I'm using a 17" LCD at 1280x1024.

BTW: I usually use jpgs for everything. GIMP lets me set the quality, so I balance the quality and file size.

Yet another question that doesn't have much to do with CSS, but I'll ask anyway -- Is there a way to run IE6 and IE7 on Linux so I don't have to boot into Windows to see my site in IE? I'll try it with wine after this post...

Thanks for all your help! I'm glad I found this forum...!

There doesn't appear to be any banding on that image on my screen. Please post a link to a page which shows the banding.

Just had a look at that png and can see that it isn't quite a smooth transition yet it seems to have sufficient colors, inclined to think the problem lies in the creation of the image graduation in the first place if I zoom into the pixels it starts to look like a game of Tetris frozen as they fall. are you perhaps using a odd setting on your flood fill tool? when I create a graduated fill I have a number of options with the fill, a few of which will cause banding only two 'normal' and luminescence I think produce absolutely smooth fills that I can zoom into and not see any banding or transition points, but this isn't my best subject

Yeah, same with mine. But when I put it as the background, it does it.

I have no link... I don't have a host right now. But I can give you my code.

CSS
body {
background: url(images/background2.png);
background-repeat: repeat-x;
background-color: black;
}

HTML

Test.

Hi!

I'm thinking it could just be my monitor or something.
Please test this code, and tell me if it does it on your computer. That way I can know whether it's my site, or my computer.

Thanks!

It's not a problem with the code that won't account for the problem,and I've run your graphic as a background quickly and it does band but it's not hugely noticeable, but as I said previously I can do the same thing if I have changed the settings when I use my flood fill tool, if blend mode is on any of the strange settings I don't understand I can get a less than smooth transition in the blend and often don't notice until saved and displayed.

But we need one of the members better versed in the dark arts of graphics, it might help if you check and verify the steps you take to craete the fade and the various settings?

There are only 254 colours in the gradient spread over 768 pixels. If GIMP is anything like photoshop it doesn't spread the colours evenly at 3pixels each but makes some bands larger than others. When you view the native image in your graphics software presumably it is dithering the adjacent colours to keep things smooth no matter the zoom level. However it doesn't seem to save the png with that dithering in place for native resolutions (neither does photoshop). The web browser simply displays the pixels that are there ... and you see the banding.

Uhhh, Ok. I guess that's the problem. Soooooo, how do I fix it? Do I like blur the image? Or change settings while saving?

PS. The white-to-black gradient didn't band as badly as the graygreen-to-black gradient that I want to use as a background.

Thx!

EDIT: I checked, my gray-green to black gradient has 172 unique colors. Then I blurred it and that amount went down to 170....???

The total number of colours isn't necessarily the problem. You need the graphics package to dither them to create a smoother gradient. If it doesn't dither them there will be some pixel transitions where the combination of your monitor and eyesight is good enough to see the change.

OK, so then how do I fix it?

(Sorry, I'm not really understanding all this...)

I gave you a link to a gradient maker in my original post. Give it a try and see if solves your problem.

http://tools.dynamicdrive.com/gradient/

Here's a test I did. From black #000000 to white #ffffff. I can't see any banding, but I run a pretty small laptop screen.

http://robster.freehostia.com/imagetest.html

I don't know - I tried making a 768px tall black to white gradient in photoshop and ended up with similar banding. It didn't seem to make much difference which particular settings I was using, including dithering.

Maybe Phreestyle's link will help.

I see banding, but it doesn't seem to be as bad on the gradient I created or that from the OP.

Nope, it banded even worse.

I'm thinking I'll just go with a solid color.

PS. If I have a new question, do I post it in this topic, or make a new topic? EDIT: Never mind, I fixed my problem myself. (It made a border appear around the whole page. Fixed by doing body{margin:0;padding:0;} ).

new problem, new thread.

Not sure if this will help but its worth a shot. Whenever I have banding from a gradient background in Photoshop I can usually resolve it by cutting out a piece of my gradient that is 1px width of the gradient and then the entire length of the image.

I have had problems with Photoshop being consistent from each column so using only 1px width ensure that by using repeat-x on the background element the very next column will be exactly as the one before it.

Hope I explained that good enough.

We need it to be inconsistent over the width of the image as there are more pixels in the image than there are colours in the gradient and for some shades the eye is sharp enough to pick out the transition. Ideally the gradient should be given some width and the graphics app should dither adjacent shades to trick the eye into seeing intermediate colours.