problem displaying image and resizing

Page 1 of 1

10 Replies - 477 Views - Last Post: 26 June 2011 - 03:28 AM

#1 jackfusion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-June 11

problem displaying image and resizing

Posted 25 June 2011 - 11:21 PM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: problem displaying image and resizing

#2 jackfusion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-June 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 12:05 AM

here is the images

http://wcpwrc.org/im...ams_hover_c.jpg
http://wcpwrc.org/im...ams_hover_l.jpg
http://wcpwrc.org/im...ams_hover_r.jpg
Was This Post Helpful? 0
  • +
  • -

#3 scentauri  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 61
  • Joined: 16-February 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 01:26 AM

I'm going through your codes one at a time and I'm noticing some errors.

First of all you have:
...
#programl{}
.programr{}
.programc{}
...
<div id="programc" class="programl"><a href="" class="programr" id="text">


Id is referenced with a number sign(#), while class is referenced with a period(.).

<div id="programc"...> in your code should be referenced #programc in your stylesheet. You have it referenced as .programc.

<div ... class="program1"> in your code should be referenced as .program1 in your stylesheet. You have it referenced as #program1.
Was This Post Helpful? 0
  • +
  • -

#4 scentauri  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 61
  • Joined: 16-February 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 01:42 AM

Second issue.

Where you have the following code:

<div id="programc" class="programl">


By setting a background for both your #programc and .program1, the background for one will cancel the other out. You can set multiple backgrounds to one tag by doing the following:

#programl { background: url(./img/programs_hover_l.jpg) no-repeat left, url(./img/programs_hover_c.jpg) repeat-x; float:left; height: 34px; padding-left: 5px;}
...
<div id="programl">

This post has been edited by scentauri: 26 June 2011 - 01:42 AM

Was This Post Helpful? 0
  • +
  • -

#5 jackfusion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-June 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 01:45 AM

sorry made mistake when posting the code here is the correct code that I am having trouble with

<!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>

<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>


and the other code
<!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>

<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>

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#6 jackfusion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-June 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 02:01 AM

View Postscentauri, on 26 June 2011 - 01:42 AM, said:

Second issue.

Where you have the following code:

<div id="programc" class="programl">


By setting a background for both your #programc and .program1, the background for one will cancel the other out. You can set multiple backgrounds to one tag by doing the following:

#programl { background: url(./img/programs_hover_l.jpg) no-repeat left, url(./img/programs_hover_c.jpg) repeat-x; float:left; height: 34px; padding-left: 5px;}
...
<div id="programl">


every time I try to do it that way it does not work.
Was This Post Helpful? 0
  • +
  • -

#7 scentauri  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 61
  • Joined: 16-February 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 02:05 AM

View Postjackfusion, on 26 June 2011 - 02:01 AM, said:

View Postscentauri, on 26 June 2011 - 01:42 AM, said:

Second issue.

Where you have the following code:

<div id="programc" class="programl">


By setting a background for both your #programc and .program1, the background for one will cancel the other out. You can set multiple backgrounds to one tag by doing the following:

#programl { background: url(./img/programs_hover_l.jpg) no-repeat left, url(./img/programs_hover_c.jpg) repeat-x; float:left; height: 34px; padding-left: 5px;}
...
<div id="programl">


every time I try to do it that way it does not work.

You need to specify width: 400px; in the code
Was This Post Helpful? 0
  • +
  • -

#8 jackfusion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-June 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 02:15 AM

View Postscentauri, on 26 June 2011 - 02:05 AM, said:

View Postjackfusion, on 26 June 2011 - 02:01 AM, said:

View Postscentauri, on 26 June 2011 - 01:42 AM, said:

Second issue.

Where you have the following code:

<div id="programc" class="programl">


By setting a background for both your #programc and .program1, the background for one will cancel the other out. You can set multiple backgrounds to one tag by doing the following:

#programl { background: url(./img/programs_hover_l.jpg) no-repeat left, url(./img/programs_hover_c.jpg) repeat-x; float:left; height: 34px; padding-left: 5px;}
...
<div id="programl">


every time I try to do it that way it does not work.

You need to specify width: 400px; in the code


trying to make it look like the attached with out having to create a new image for every menu option.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#9 scentauri  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 61
  • Joined: 16-February 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 03:02 AM

The following code allows the display of the button with varying widths, as demonstrated by the 3 buttons:

<!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">
<!--
.button {display:inline}
.programl {background:url(img/programs_hover_l.jpg) no-repeat left;float:left; height:34px; width:5px;}
.programc { background: url(img/programs_hover_c.jpg) repeat-x; float:left; height:34px; padding-left:10px; padding-right:10px; vertical-align:middle; display:inline-block; line-height:34px; font-size:20px; font-family: Arial, Helvetica, sans-serif;}
.programr {background:url(img/programs_hover_r.jpg) no-repeat right; float:left; height:34px; width:5px;}
 -->
</style>
</head>

<body>
<div class="button">
	<div class="programl"></div>
	<div class="programc"><a href="">Link to Somewhere</a></div>
	<div class="programr"></div>
</div>
<div class="button">
	<div class="programl"></div>
	<div class="programc"><a href="">Another Link</a></div>
	<div class="programr"></div>
</div>
<div class="button">
	<div class="programl"></div>
	<div class="programc"><a href="">Link 3</a></div>
	<div class="programr"></div>
</div>
</body>
</html>


If you want a fixed-width button you can remove the padding from .programc and add a fixed width property.

Hope that helps.

The buttons should be shown as attached.

Attached Image

Also, a good rule of thumb to follow in your code is id should only be present once in your code, whereas class can show up multiple times in your code.

In the code I presented,
<div class=button></div>

is used rather than id=button because more than one div buttons appears on the same page.

Hope that also helps clean up your code a bit.
Was This Post Helpful? 1
  • +
  • -

#10 jackfusion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-June 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 03:21 AM

thank you that is exactly what I was looking for. Now to make it work in all IEs and other popular browsers.
Was This Post Helpful? 0
  • +
  • -

#11 scentauri  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 61
  • Joined: 16-February 11

Re: problem displaying image and resizing

Posted 26 June 2011 - 03:28 AM

If you found the post helpful, please mark it as helpful. Thank you.

Glad I could help. The solution I provided should work in IE and most other browsers as well. Cheers :)

View Postjackfusion, on 26 June 2011 - 03:21 AM, said:

thank you that is exactly what I was looking for. Now to make it work in all IEs and other popular browsers.

Was This Post Helpful? 1
  • +
  • -
Page 1 of 1