0

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?

4
Contributors
6
Replies
7
Views
6 Years
Discussion Span
Last Post by diafol
0

Hi, on this div <div id="programl" class="programc"> you have given if an id and a class, the id is telling it to show one background image and the class another, it can't show both. The styles are also the wrong way around, in your styles you put programe1 as a class and programc as an ID. To show all 3 images you are going to need three elements to style, maybe put a strong tag within your a tag, something like this:
<div class="programl"><a href="#" class="programr"><strong id="programc"></strong></a></div>
I would remove the text ID and put those styles within your strong or a tag, if you don't want to have bold text just reset it within the styles. I have put an example below, it's not perfect and will need some tweaking but will give you a start:

<!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;
    color: #FFF;
    text-decoration: none;
}
#programc {
    background: url(img/programs_hover_c.jpg) repeat-x;
    height:34px;
    width:400px;
    display: block;
    font-size:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
}
</style>
</head>

<body>
<div class="programl"><a href="" class="programr"><strong id="programc">Here is my link</strong></a></div>
</body>
</html>

Edited by Dani: Formatting fixed

0

You will probably need to reset your image paths to eg ../img/programs_hover_c.jpg

0

Wrap your codes with code tag, that is providing on the toolbar with the button (CODE).

Edited by mike_2000_17: Fixed formatting

0

As louilly states, you can't have more than one background in some browsers (<IE9 - I think). If you want to implement multiple backgrounds (all major browsers):

#programl {
background-image: url(../img/programs_hover_c.jpg), url(../img/programs_hover_l.jpg);
background-position: center, left;
background-repeat: repeat-x, no-repeat;
}

I wouldn't know where to start with your float and width though as you're trying to place these on to a single item (#program1), so it doesn't make much sense to me.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.