Member Avatar for jackfusion

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
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for Louilly

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 because: Formatting fixed
Member Avatar for Louilly

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

Member Avatar for ko ko

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

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for Louilly

ok will do - didn't see that!

Member Avatar for diafol

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.