SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Images In CSS

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images In CSS

    I currently have images as <img src... But I am wanting to make different skins so I need to have them in my CSS, how do I do this?

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div class="img-you-want"></div>

    .img-you-want {
    background-image: url('images/boring.gif');
    height: 50px;
    width: 50px;
    }

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you explain some more?

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I have images that I am using as link:

    Code:
    <dl class="links">
    <dt><a href="index.html"><img class="border"  src="images/home.gif" alt ="home" /></a></dt>
    <dt><a href="aboutme.html"><img class="border" src="images/aboutme.gif" alt ="About Me" /></a></dt>
    <dt><a href="blog.html"><img class="border" src="images/blog.gif" alt ="Blog" /></a></dt>
    <dt><a href="guestbook.html"><img class="border" src="images/guestbook.gif" alt ="Guestbook" /></a></dt>
    <dt><a href="tutorial.html"><img class="border" src="images/webtutorial.gif" alt ="Web Tutorial" /></a></dt>
    </dl>
    And I need to be able to put the SRCs of those images into CSS

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically I want to have my website use different CSSs depending on what the user chooses, and I am fine with the coding but I need to get my link images into the CSS so that they change aswell. That is the code of my link above. Please help,

    Bumfluff

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anybody show me what to do?

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried making different classes in different places in that but all to no avail.

    Can somebody show me the CSS that I need to use?

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I willjust give up on any help shall I, something even saying that you need to know more info would be nice, I have posted my code.

  10. #10
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, but I am not able to help. I suggest you try and contact one of the many CSS gurus on this site or the advisors such as the css wizard Paul o'b

  11. #11
    Chillin like a Villain DaStuff's Avatar
    Join Date
    Jul 2003
    Location
    Huntington Beach
    Posts
    649
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like you want a php script that can call and remember different stylesheets? But yes, i am confused exactly what you want.. If you're looking for images that are links in css this may help:
    http://css.maxdesign.com.au/listamatic/ (different lists)
    http://www.sitepoint.com/forums/show...light=trifecta
    (a css rollover button from images script)

    Also if you could link your site that would help too...
    • Follow the dancing banana

  12. #12
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    You need to use programming for that, not only CSS. You can do it different ways. You can set a cookie that remembers the settings (or pictures) that a particular user wants, or you can that keeps the name of the stylesheet that load those pictures, or you can use any scripting language create it on the fly.

  13. #13
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont know if I understood you correctly but Im guessing you only wanted to see how to move images from your markup into CSS.

    heres my try:

    remove images completely from your html, and add ids to every <dt> or <a> so later you can apply unique image to every link:

    Code:
    <dl class="links">
    <dt><a id="home" href="index.html">home</a></dt>
    <dt><a id="about" href="aboutme.html">About Me</a></dt>
    <dt><a id="blog" href="blog.html">Blog</a></dt>
    <dt><a id="guestb" href="guestbook.html">Guestbook</a></dt>
    <dt><a id="webtut" href="tutorial.html">Web Tutorial</a></dt>
    </dl>
    and you add appropriate image to every id using CSS
    Code:
    dt a#home { background: white url(images/home.gif) no-repeat center top; }
    dt a#about { background: white url(images/aboutme.gif) no-repeat center top; }
    dt a#blog { background: white url(images/blog.gif) no-repeat center top; }
    dt a#guestb { background: white url(images/guestbook.gif) no-repeat center top; }
    dt a#webtut { background: white url(images/webtutorial.gif) no-repeat center top; }
    Although I used white as the color beneath the image, you should put the bg color of your image.

    I used <a> as the tag to attach bg image to, so some additional styling is necessary in order for the entire image to be revealed; turn <a> into block element and give it the width and the hight of the bg image used. Here I presumed that all of your images are the same width and hight so it can be declared in only one rule instead of repeating it for every <a> id (youll use your numbers of course):
    Code:
    dl.links dt a { width: 170px; height: 30px; display: block; }
    Here (in the above selector) you could also put the rules for "no-repeat center top" part so you dont have to repeat it in every id like i did.


    ps. i noticed you dont have definition descriptions for your definition terms. I dont know what the overall purpose of this code snippet is, but if its just "normal" navigation you should consider using <ul> instead of <dl>

    You may also want the link text to be hidden so only the bg image shows through in your navigation, you can do it using one of the Image replacment techniques. I like the last one the best

    Note that images that are content-relevant should be in HTML and images that are only style-relevant should be kept in CSS


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
  •