SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem displaying image and resizing

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

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

    HTML 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>
    <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. #2

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    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>
    <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. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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? 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:

    http://www.cutcodedown.com/for_other...ges/button.png

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •