Problem displaying image and resizing

HTML & CSS
1

the problem I am having is getting the centre image to display. when I change the code to



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="button.css" rel="stylesheet" type="text/css" />
<style type="text/css">
  #programl { background: url(../img/programs_hover_l.jpg) no-repeat left; float:left; height: 34px; padding-left: 5px;}
 .programr { background: url(../img/programs_hover_r.jpg) no-repeat right; float:right; height: 34px; padding-right: 5px;}
 .programc { background: url(../img/programs_hover_c.jpg) repeat-x; height:34px; width:400px;}
 #text{ font-size:20px; font-family: Arial, Helvetica, sans-serif;}
  </style>
</head>

<body>
<div id="programc" class="programl"><a href="" class="programr" id="text"></a></div>
</body>
</html>

the centre image displays but the left image will not display and when I change to this



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="button.css" rel="stylesheet" type="text/css" />
<style type="text/css">
  .programl { background: url(../img/programs_hover_l.jpg) no-repeat left; float:left; height: 34px; padding-left: 5px;}
 .programr { background: url(../img/programs_hover_r.jpg) no-repeat right; float:right; height: 34px; padding-right: 5px;}
 #programc { background: url(../img/programs_hover_c.jpg) repeat-x; height:34px; width:400px;}
 #text{ font-size:20px; font-family: Arial, Helvetica, sans-serif;}
  </style>
</head>

<body>
<div id="programl" class="programc"><a href="" class="programr" id="text"></a></div>
</body>
</html>

The left shows up and the centre does not show up why?

2

here is the images

http://wcpwrc.org/img/programs_hover_c.jpg
http://wcpwrc.org/img/programs_hover_l.jpg
http://wcpwrc.org/img/programs_hover_r.jpg

3

Hi,

You can’t apply 2 background images to the same element in css2.1. You can do it in css3 but then you lose ie8- support.

You;d need an extra element like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="button.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.programl {
    background: url(http://wcpwrc.org/img/programs_hover_l.jpg) no-repeat left;
    float:left;
    height: 34px;
    padding-left: 5px;
}
.programr {
    background: url(http://wcpwrc.org/img/programs_hover_r.jpg) no-repeat right;
    float:right;
    height: 34px;
    padding-right: 5px;
}
.programc {
    background: url(http://wcpwrc.org/img/programs_hover_c.jpg) repeat-x;
    height:34px;
    width:400px;
}
.text {
    font-size:20px;
    font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="programl"><div class="programc"><a href="" class="programr text"></a></div></div>
</body>
</html>

Or if you just want two elements then use a sliding door approach and have one whole very long image sprite (longer than you need) and just apply it without a repeat. The downside is the increased filesize. If you wamt to use three images then wrap them up into one sprite and position accordingly.

4

Paul is quite correct in suggesting sliding doors – the downside he mentioned would be greatly offset by using image recombination so it would only take one image instead of three. I would do this with a span inside the anchor so hover states could be easily added without scripting assistance in older browsers. I would ALSO suggest easing up on all the unnecessary classes and ID’s, particularly since you seem to be using them JUST for applying presentation. Also, you’ve basically got 41k in three jpegs there to do a single 3.5k PNG file’s job so…

Paul also mentioned that you can’t apply multiple backgrounds – I think in general you missed that CSS is applied by ELEMENT, not by class – which is to say if you declare something once with an ID and once with a class, whatever you say on the ID overrides the class… just as a class overrides tag specific… you declare two classes on a element whichever one appears in the CSS second overrides the first – that’s called “specificity” and is a hefty chunk of the “cascade” in “cascading style sheets”.

Oh, and what’s with the tranny doctype, what is this 1998? :smiley: The lack of a specific line-height, attempt to declare a fixed height – it’s all extra stuff that’s just not going to be reliable cross browser.

This is a very rough demo, it kind-of looked like your images weren’t quite sliced out of whatever they’re from completely. I included examples of it in a one atop the other list, a inline list, and as a standalone. For standalone, apply class=“button” to the anchor; if it’s all in a nice list like a menu then you make the menu have the “buttonList” class on it, and all the anchors inside the list will pick up on it. Figured it would be a good idea to show you both ways being we don’t know in what context you are using those buttons.

Button Demo

as with all my examples the directory:
Index of /for_others/jackfusion

is open for easy access to the bits and pieces. all of those buttons and their hover states are based off this single image:

At 800x70 that means the maximum button width is 800px – you need wider, just add to the middle. (for a text button 800 should be overkill)

Hope this helps.