Images in external CSS

[SteveHoffmanUK]

Now that I've (or, rather, you've) got my external style sheet to link to my .html file, I want all my pages to have both the same tiled background, but also to have overlaid on that background a non-tiled logo image. Can I use two background images for this, or must I use something else?Here is the code in my external CSS file:

body {background-image:url('parishmagbackground.gif')}{background-image: url('parishmaglogo.gif');background-repeat: no-repeat;background-position: left top;} </body>

The file 'parishmagbackground.gif' is a thin vertical image that tiles across to form the pages' backgrounds.I want to place the image 'parishmaglogo.gif' on top of that and to have it appear like a background on all my pages. The logo and background gifs, as well as the .html and .css files are all in the same directory.How do I do that? What I have so far clearly doesn't work.

[vchris]

Your close. This won't work:{background-image: url('parishmaglogo.gif');background-repeat: no-repeat;background-position: left top;} because you don't have any identifier. On your html page add a div.<div id="header"></div>then in your css add your style#header {background-image: url('parishmaglogo.gif');background-repeat: no-repeat;background-position: left top;height: 100px;width: 100px;} You'll need a height and width since you have nothing in the div and div will collapse when there is nothing inside (background image doesn't count as content). So set the height and width to whatever your image is.

[SteveHoffmanUK]

Hi ChrisThanks very much - works OK now, of course. Not really got my brain around divs yet, but on a steep learning curve.

[vchris]

No worries. We're here to help

[SteveHoffmanUK]

No worries. We're here to help

Now you've asked for it! A supplementary question, if I may:The next thing I want to do is to have a navigation bar consisting of a string of button images along a band of colour that is already in the background image. Each button of course will be linked to another page on my website. Is this now getting beyond the definition of a "background-image"? IOW, this is no longer just some passive images, but active links. Can I still do this in an external CSS file, given that it's not just formatting but a bit of content that we're talking about here? I want the same nav bar in all my pages, so logically it should be in a CSS file, should it not?Thanks again for your help.

[vchris]

This won't work since background images cannot be clicked. You'll need to add the images yourself (<img src="image.jpg" />). There are some bugs to horizontal navigations, one in particular is if you don't want spacing between each button don't have any line returns in your code between each button.You can also include some css for your nav.HTML:<div id="navigation"><ul><li><a href="#"><img src="image.jpg" /></li></a></ul></div>CSS:#navigation ul { margin: 0; padding: 0; } /* ul with no margin or padding */#navigation ul li { display: inline; } /* list is inline */a img { border: none; } /* no borders for images with links */If you want to repeat this on all pages of your site, you should use server-side includes (php, asp or coldfusion).

[SteveHoffmanUK]

vchris wrote:

This won't work since background images cannot be clicked.

Hmm, as I feared.I will play around with your suggested code - thanks for that.

If you want to repeat this on all pages of your site, you should use server-side includes (php, asp or coldfusion).

Gulp. That would turn my steep learning curve into a 90 degree incline. I am having enough trouble getting to grips with HTML and CSS, so I think I will put the nav bar on each page. It is not clear to me what advantage there is in having anything in my external CSS file about this if I can't use the file for an across-all-pages function?

[vchris]

Well I'm not sure what kind of server you are running/developing your site on but if you server supports php, asp or coldfusion pages there is little you need to know to includes files, it's one line of code. If your server does not support those server-side scripting languages then the only other way I see is if you use Dreamweaver for developing your site, you could create a library item of your navigation and include it on all pages this way you don't need to know any server-side scripting languages and nothing special for the server either.The advantage of an external stylesheet is your code is tidier, it separates the css from the html. If ever down the road you want to change the colour of certain links on your page, you just change the property in the stylesheet and there you go no need to edit every page of your site.

[PrateekSaxena]

There are two thing that I would like to suggest -

• Make the extension of the file in CAPS
• Put the image file where the CSS is places

i think that, this should do the trick

[SteveHoffmanUK]

Well I'm not sure what kind of server you are running/developing your site on but if you server supports php, asp or coldfusion pages there is little you need to know to include files, it's one line of code.

My ISP's hosting package description says that it supports PHP, among others. How does that work, then. Do I upload my .css file into a separate part of their webspace and then link with that magic one line of code?

[PrateekSaxena]

put the images in the same folder as he CSS

[vchris]

There are two thing that I would like to suggest -

• Make the extension of the file in CAPS
• Put the image file where the CSS is places

i think that, this should do the trick

Why would he need to have file extensions in caps? What difference could that make? I've never ever done that and I don't think it matters.Steve Hoffman UK: Great! So they do support php in this case you will need to change the extension of your pages to .php so the web server can parse it as php. The magic line is <?php include('/navigation.php'); ?>Do you know if absolute paths work on your web server? (/images/image.jpg) or do you have to do images/image.jpg? It's simpler for you with absolute paths.

[PrateekSaxena]

Well from what I have noticed is that sometimes that when i upload some files to Tripod is automatically changes the extension to capitel. I dont know why it happens and I just hate it!

[SteveHoffmanUK]

Do you know if absolute paths work on your web server? (/images/image.jpg) or do you have to do images/image.jpg? It's simpler for you with absolute paths.

Sorry, but I haven't a clue to what you're talking about. Bear in mind I am a struggling newbie.

you will need to change the extension of your pages to .php so the web server can parse it as php. The magic line is<?php include('/navigation.php'); ?>

So are you saying that I need to change the extension of my existing .css file to .php? Or do I set up a separate file with just the nav bar style statements in it and give that a .php extension?HOWEVER, before we go down too far on this particular track, I have changed my mind about using graphics for my navigation links and instead want to try using text. Here is where I've got to so far. In my .css file I have this code:

#navigation ul { margin: 0; padding: 0; position: static;background-color: #636363;color: white;margin-top: 2px;font-size: 14px;font-family: verdana, arial, helvetica, sans-serif; /* ul with no margin or padding */display: inline; /* list is inline */}

In my .html file I've got this code:

 NAVIGATION BAR TEXT --><div id="navigation"><ul><li><a href="index.html">Home	<a href="thismonth.html">|	This Month	<a href="directory.html">|	Directory	<a href="archives.html">|	Archives	<a href="about.html">|	About	</a></li></ul></div

The above code gives me the results I want, in that there is a horizontal string of list items overlaid on a horizontal strip of background colour #636363 (dark gray), Only problem is that the blue link colour of the text can't be seen against the dark gray. How do I change the colour of the links from the link colour dark blue to white, so that it will appear as white-on-gray on everyone's browser, regardless of what they have set their link colours to?

[vchris]

#navigation ul li a { color: #FFFFFF; }it would only mean changing your webpages from .html to .php so they can understand that there is php code in there (html still works).absolute path means that anywhere you are in your site you can link to a certain file (/images/image.jpg). / is the root of your site.

[SteveHoffmanUK]

#navigation ul li a { color: #FFFFFF; }

Thanks, Chris. Just one more little detail, and I think I'm there: how do I get rid of the underscores in that link line?

[vchris]

Oh! I just noticed you have errors in your html code. This is the syntax for a link:<a href="destination">description</a>You have:<a href="destination">description |<a href="destination">description |See the problem?Should be:<a href="destination">description</a> |...You didn't close your a tag so the browser continues to link until the element is closed. Why not just have <li> for each link?<ul><li><a href="page.html">link</a></li><li><a href....</ul>If not then you should remove the list.

[SteveHoffmanUK]

Why not just have <li> for each link?<ul><li><a href="page.html">link</a></li><li><a href....</ul>If not then you should remove the list.

Thanks for spotting the HTML errors. I tried your suggestion, but it isn't working correctly (or, more likely, I didn't do exactly what you suggested). Here is my code:

<!-- NAVIGATION BAR TEXT --><div id="navigation"><ul><li><a href="index.html">Home	</a></li><li><a href="thismonth.html">|	This Month	</a></li><li><a href="directory.html">|	Directory	</a></li><li><a href="archives.html">|	Archives	</a></li><li><a href="about.html">|	About	</a></li></ul></div>

What shows on the screen are the five descriptions in a vertical list, rather than strung out horizontally along the nav bar. My .css file code for this is:

#navigation ul li a { color: #FFFFFF; text-decoration:none;}#navigation ul { a:link { color: #ffffff; text-decoration: none; }a:active { color: #ffffff; text-decoration: none; }a:visited { color: #ffffff; text-decoration: none; }a:hover { color: #000000; text-decoration: none; }margin: 0; padding: 0; position: static;background-color: #FFFFCC;color: white;margin-top: 2px;font-size: 14px;font-family: verdana, arial, helvetica, sans-serif; /* ul with no margin or padding */display: inline; /* list is inline */}

I've mucked about with this since you gave me the original pristine stuff, and have probably screwed up the "list in line" action. Can you spot the problem?Thanks for all your help; I really appreciate it.

[vchris]

First, remove the spaces in your links.You want to display each list item inline not the ul. So remove the display: inline in your ul style (last line).Then add this to your css:#navigation ul li {display: inline;padding: 0px 5px 0px 5px;}padding will add spacing on the right and left of your links. The first number is top, second is right, third is bottom and last is left. You can play with those numbers depending on what you want.

[SteveHoffmanUK]

First, remove the spaces in your links.

Yes, I thought the use of ' ' was a bit crude, but it did work.

You want to display each list item inline not the ul. So remove the display: inline in your ul style (last line).Then add this to your css:#navigation ul li {display: inline;padding: 0px 5px 0px 5px;}padding will add spacing on the right and left of your links. The first number is top, second is right, third is bottom and last is left. You can play with those numbers depending on what you want.

I did all that and tidied (mucked up?) my code a bit. The result is that the link names are now spread out horizontally OK but:1. are one line below where they should be2. have no padding3. are in the blue link color rather than the white that I want.4. have underscores, when I don't want them toHere is what my coding looks like now:My .css file:

#navigation ul li{ display: inline;padding: 0px 5px 0px 5px;color: #FFFFFF;text-decoration: none;font-size: 14px;font-family: verdana, arial, helvetica, sans-serif; }

My .html file:

<!-- NAVIGATION BAR TEXT --><div id="navigation"><ul><li><a href="index.html">Home</a></li><li><a href="thismonth.html">|This Month</a></li><li><a href="directory.html">|Directory</a></li><li><a href="archives.html">|Archives</a></li><li><a href="about.html">|About</a></li></ul></div>

While you're suggesting the remedy, could you also tell me now to make the text change to black on hover?ON EDIT: I have now uploaded this into my webspace, so you can look at it at http://www.hoffman.vispa.com/xindex.html. I am developing and checking it using Linux Firefox 2.0; judging from what I can now see on my Win XP machine (IE7), I see that I shall have some additional cross-browser, erm, "challenges". What fun.Many, many thanks for your patience and help.

[vchris]

Alright. The problem with the list location is the margin/padding on the ul itself. By default ul have a margin top and bottom. They also have left padding.You need to add#navigation ul {margin: 0; /* Removes all margins */padding: 0; /* Removes all padding */}Now you should have it placed where you want it. If you want a bit more top spacing you can always add top margin. margin: 1px 0px 0px 0px. First number is top.For your link, you need to add a link sections. The code below only affects links inside navigation id, ul list, li items. Understand how it works? So that's why you lost your custom links. #navigation ul li will not change a link.#navigation ul li a {color: #FFFFFF;text-decoration: none;}#navigation ul li a:hover { /* on hover */color: #000000;}I'm guessing you don't want to have the | part of the link. I would put the | outside of the a tag but within the li tag.As for the padding, if you increase these values padding: 0px 5px 0px 5px; you will increase the padding. Only increase the 5px values.

[SteveHoffmanUK]

Thanks, Chris. That seems to have sorted out most of my problems (other than cross-browser incompatibility, but that's a separate issue to be faced). Have a look at it now here.

For your link, you need to add a link sections. The code below only affects links inside navigation id, ul list, li items. Understand how it works?

Yes, I think so. I'm starting to understand the css code structure a bit more from doing this.

I'm guessing you don't want to have the | part of the link. I would put the | outside of the a tag but within the li tag.

OK. I've done that (can you check the source and see whether I've done it correctly?), and I can see that the "|"s are no longer a part of the link. However, regarding this:

As for the padding, if you increase these values padding: 0px 5px 0px 5px; you will increase the padding. Only increase the 5px values.

The right padding (2nd digit) works fine, and I can see that change as I change the value, but the left padding (4th digit) doesn't seem to have any effect. As you can see, all the link names show up as left-justified, when I am trying to center them equidistantly between the "|"s.

[vchris]

I think with this kind of menu you should remove the | and just have them spaced out.

[SteveHoffmanUK]

I think with this kind of menu you should remove the | and just have them spaced out.

Ah, the KISS approach. Why didn't I think of that? I agree: it looks fine without the vertical bar separators.Next I must get my brain around:1. PHP for the website-wide stuff, but that's for a different thread 2. Cross-browser incompatibilities. This looks fine in Firefox, but not in either IE or Opera. Sigh.Meanwhile, thanks again for your help.