problem displaying image and resizing

Question

jackfusion 0 Newbie Poster

15 Years Ago

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?

graphics:image html-css web-design

4 Contributors
6 Replies
135 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Member #120589

Dani AI

Generated 9 Months Ago

Short answer: the page is using the wrong selectors and the backgrounds that actually match your HTML are overwriting or never applied. As pointed out, you mixed IDs and classes (IDs start with # in CSS, classes with .). Also check image path resolution — when CSS lives in an external file the url() is relative to that CSS file; when CSS is inside the HTML <style> it is relative to the page.

Quick checklist to debug:

Confirm your HTML attributes exactly match the selectors (id="foo" vs class="foo").
Use the browser devtools to inspect the element and view the computed background and the Network tab to catch 404s for images.
Make sure the element has dimensions (display:block or inline-block, height/line-height or padding) so the background can be seen.
Remember CSS rules can override earlier rules; a later rule or a more specific selector will win.

A reliable pattern that avoids selector confusion is to keep one outer element and add nested elements (or pseudo-elements) for left, center (repeat-x), and right. Example (use different image names than in your thread):

<a href="#" class="btn">
  <span class="btn__label">Button text</span>
</a>

.btn {
  display:inline-block;
  background: url('left-cap.png') no-repeat left;
  position:relative;
  line-height:34px;
  padding-right:40px; /* leave room for right cap */
}
.btn::after {
  content: "";
  position:absolute;
  right:0;
  top:0;
  width:40px;
  height:34px;
  background: url('right-cap.png') no-repeat right;
}
.btn__label {
  display:block;
  background: url('mid-repeat.png') repeat-x left center;
  padding:0 12px;
}

If supporting very old IE, use extra markup for the caps rather than pseudo-elements. is correct that CSS3 supports multiple backgrounds, but that is a modern-browser solution; use the nested/pseudo approach for widest compatibility. ’s point about posting code with proper tags is useful for sharing exact markup when you retest.

All 6 Replies

Louilly 0 Light Poster

15 Years Ago

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 13 Years Ago by Dani because: Formatting fixed

Louilly 0 Light Poster

15 Years Ago

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

Reply to this topic

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.

jackfusion 0 Newbie Poster · Answer 1 · 2011-06-26T13:13:40+00:00

here is the images

ko ko 97 Practically a Master Poster · Answer 2 · 2011-06-27T18:17:28+00:00

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

Louilly 0 Light Poster · Answer 3 · 2011-06-27T20:41:39+00:00

Louilly 0 Light Poster

15 Years Ago

ok will do - didn't see that!

Member #120589 · Answer 4 · 2011-06-27T22:08:23+00:00

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.

problem displaying image and resizing

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers