30 replies [Last post]
d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Hi. I am sort of new to CSS. I have a (probably) very simple (and kind of stupid) question. I have googled, and searched several forums and cannot seem to find the answer.

My question is: How would I keep the (X)HTML section of my layout in a separate file or in the CSS file or something? Because if the (X)HTML section of my CSS layout needs to be changed, e.g. adding a link to the navigation bar, I have to go and edit every single page on my site, which is very annoying. What I want it to do something like this:

BEGINNING would contain something like this:

link rel="stylesheet" type="text/css" href="style.css" media="all" />

Then CENTER would contain this:

And then END would have:

And then I would be able to do something like this for all of my pages:
BEGINNING
Title of my page
CENTER

Content of my page


END

The reason I want this, is so that I can change the (X)HTML section of my layout without having to change every single page on my site.

Is there a way I can do something like that? Like maybe putting BEGINNING CENTER and END in the CSS file somehow? Or maybe in separate files? Or something else??? I'm not really sure what to do. I was thinking I could maybe do something like:

<?php echo file_get_contents("BEGINNING.html");?>
Title of my page
<?php echo file_get_contents("CENTER.html");?>

Content of my page


<?php echo file_get_contents("END.html");?>

I'm thinking that may be inefficient or something though. There must be a simpler way... :?

The main reason I want this is so that I can add a link to the navigation bar without changing every page.

PS. I have another question. If I put a vertical gradient as a background, the gradient looks all messed up. I tried both jpg and png and they both do it. It sorta looks like a JPEG image with the compression level really high. How do I put a gradient as a background?

Please Help!

THANKS!

(sorry if this is posted in the wrong section or if questions like this are not allowed or something)

-d41 Smile

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 3 years 40 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

You could use include

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

Life's a journey. Enjoy the trip.

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Ok, thanks. But, will using

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Yes, technically it will

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.

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Alright! Thanks! I'm

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:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Information might be a bit

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Uhhh... No, I said that I

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

d41 wrote: - set up your

d41 wrote:

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

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.

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

That's not what I want to

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

No, you don't want to do it

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

quote=Chris]I make most of

Chris wrote:
I make most of my gradients gif and then end up smooth.

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I tend to stay clear of jpgs

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The truth is by and large

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Doesn't IE (<= 6) have

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You got me there, yes it has

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*

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Wow, lots of

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

There doesn't appear to be

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Just had a look at that png

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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Yeah, same with mine. But

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! Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's not a problem with the

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?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

There are only 254 colours

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.

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Uhhh, Ok. I guess that's the

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The total number of colours

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.

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

OK, so then how do I fix

OK, so then how do I fix it?

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

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 3 years 40 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

I gave you a link to a

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

Life's a journey. Enjoy the trip.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

d41 wrote:OK, so then how do

d41 wrote:
OK, so then how do I fix it?

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I see banding, but it

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

d41
d41's picture
Offline
Enthusiast
Last seen: 9 years 11 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Nope, it banded even

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;} ).

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

new problem, new thread.

new problem, new thread.

roscoe
roscoe's picture
Offline
Enthusiast
Last seen: 11 years 13 weeks ago
Joined: 2006-03-09
Posts: 138
Points: 0

Not sure if this will help

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

We need it to be

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.