SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking CSS inline 2 in 1 image rollover

    Hi there!

    I have created a rollover that uses a 2 in 1 image and sets the position of that image so that only 1 of the two states appears at a given action. The rollover uses 1 image that contains the active and inactive state aligned vertically in composition. The style sheet only allows so many pixels of that image to appear at a given state. It allows for no lag time on rollovers.

    The idea was introduced to me and was said to have been tested on Firefox and NS. However the entire navigation menu does not appear at all in these two browers. It works fine in IE as is.

    Here is the link to the site http://www.aliveinlove.com/test/index.htm

    Please let me know if you have any answers...

  2. #2
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here the Code for 1 rollover

    <style type="text/css" media="screen">
    @import "/css/mini.css";
    </style>
    <style type="text/css">
    <!--

    /* example-specific CSS */

    BODY {
    scrollbar-base-color: ff00ff;
    scrollbar-track-color: ffffff;
    scrollbar-face-color: ffffff;
    scrollbar-highlight-color: ffffff;
    scrollbar-3dlight-color: ff00ff;
    scrollbar-darkshadow-color: ff00ff;
    scrollbar-shadow-color: ffffff;
    scrollbar-arrow-color: ffOOff;

    }

    #nav {
    position: top;
    list-style: none;
    margin: 0;
    padding: 0;
    height:38px ;
    display: inline;
    overflow: hidden;
    width: 213px;
    }

    #nav li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }

    #nav a {
    float: left;
    padding 0px 0 0 0;
    overflow: hidden;
    height: 0px !important;
    height /**/:38px; /* for IE5/Win */
    }

    #nav a:hover {
    background-position: 0 -38px;
    }

    #nav a:active, #nav a.selected {
    background-position: 0 -38px;
    }

    #tbio a {
    width: 213px;
    background: url(new/bio.png) top left no-repeat;
    }
    #tmusic a {
    width: 213px;
    background: url(new/music.png) top left no-repeat;
    }
    #tlyrics a {
    width: 213px;
    background: url(new/lyrics.png) top left no-repeat;
    }
    #temail a {
    width: 213px;
    background: url(new/email.png) top left no-repeat;
    }
    #tcontact a {
    width: 213px;
    background: url(new/contact.png) top left no-repeat;
    }
    #tbook a {
    width: 213px;
    background: url(new/book.png) top left no-repeat;
    }
    -->
    </style>

    /* then the rollover */

    <ul id="nav">
    <li id="tbio"><a href="bio.htm"></a>
    </ul>

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing this insane line :
    Code:
    #nav a {
    	float: left;
    	padding 0px 0 0 0;
    	overflow: hidden;
    	height: 0px !important; 
    	height /**/:38px; /* for IE5/Win */
    	}

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like the technique used here: http://wellstyled.com/css-nopreload-rollovers.html
    Hello World

  5. #5
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    O.K. -- I have removed the "height: 0px !important;" line from the script. The inactive stage of the inline rollover is now showing up, however these images do not rollover. They still roll over fine in IE even with out this line. How do I get these images to rollover in this style of rollover?

    By the way thanks for your help thus far.

    Billy

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps a working example would help.
    http://www.dynamicsitesolutions.com/...mage_switching
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Kravvitz for helping me out with a working model. Could you or anyone by chance help me with this script? I have implemented the image switching formula from the dynamic site solutions site and now my rollover won't roll over. I need to know what I am doing wronge and need a solution. -- Billy

    Here's the code:

    ul#example1,ul#example1 li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    height: 38px;
    }
    ul#example1 li {
    float:left;
    width: 213px;
    }
    ul#example1 li a {
    text-align: center;
    float: left;
    width: 213px;
    line-height: 38px;
    height: 38px;
    text-indent: -5000px;
    text-decoration: none;
    background-position: 0 0;
    }
    ul#example1 li a:hover {
    background-position: 0 -38px;
    /* the second number should be the negative height of the link. */
    }
    #bio {
    background-image: url(new/bio.png);
    }

  8. #8
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You didn't change "example1" to the ID of your top level list.

    IDs must be unique. Use a class instead.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here are the changes I have made (and the rollover still doesn't roll over) any more suggestions? I do appreciate the help!!!

    ul#nav,ul#nav li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    height: 38px;
    }
    ul#nav li {
    float:left;
    width: 213px;
    }
    ul#nav li a {
    text-align: center;
    float: left;
    width: 213px;
    line-height: 38px;
    height: 38px;
    text-indent: -5000px;
    text-decoration: none;
    background-position: 0 0;
    }
    ul#nav li a:hover {
    background-position: 0 -38px;
    /* the second number should be the negative height of the link. */
    }
    #bio {
    background-image: url(new/bio.png);
    }

    /* The list script */

    <ul id="nav">
    <li id="bio"><a href="bio.htm"></a>
    </ul>


    -- Billy

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome.

    The problem is the specificity.

    "#nav a:hover" doesn't have the specificity necessary to override "#tbio a".

    Code:
    #nav a {
    	float: left;
    	padding 0;
    	height: 38px;
    	width: 213px;
    	background-position: 0 0;
    	background-repeat: no-repeat;
    }
    
    #nav a:hover, #nav a:active, #nav a.selected {
    	background-position: 0 -38px;
    }
    	
    #tbio a {
    	background-image: url(new/bio.png);
    }
    #tmusic a {
    	background-image: url(new/music.png);
    }
    #tlyrics a {
    	background-image: url(new/lyrics.png);
    	}
    #temail a {
    	background-image: url(new/email.png);
    }
    #tcontact a {
    	background-image: url(new/contact.png);
    }
    #tbook a {
    	background-image: url(new/book.png);
    }
    That code fixes the first page you linked to.

    Why did you put each <li> in a separate <ul>?

    Why tables for layout is stupid
    Why avoiding tables (for layout) is important
    http://www.workingwith.me.uk/tablefree/why/
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz or anyone else that has useful help,

    I have change the specificity of the script and it still doesn't rollover in IE.

    So that we are on the same page, I am now refering to this file:
    http://www.aliveinlove.com/test/index2.htm

    & referring to this script:

    ul#nav,ul#nav li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    height: 38px;
    }
    ul#nav li {
    float:left;
    width: 213px;
    }
    ul#nav li a {
    text-align: center;
    float: left;
    width: 213px;
    line-height: 38px;
    height: 38px;
    text-indent: -5000px;
    text-decoration: none;
    background-position: 0 0;

    }
    #nav a:hover, #nav a:active, #nav a.selected {
    background-position: 0 -38px;
    }
    #bio {
    background-image: url(new/bio.png);
    }

    /* the <li> */

    <ul id="nav">
    <li id="bio"><a href="bio.htm"></a>
    </ul>

    I am a newbie to CSS so please be patient with me. I am learning as I go.

    -- Billy

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you didn't notice my question, so I'll ask it again. Why did you put each <li> in a separate <ul>?

    Your CSS does not match you HTML. IDs in CSS are useless if they don't match up with an element in the HTML that has the same ID.

    Try using the CSS I posted with the first page you linked to which has HTML that isn't quite as messed up as the second one.

    What program are you using to code with?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #14
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responce to your question!

    The Inclusion of all the <li> tags under one <ul> is something I haven't understood. I am used to tables of course having started learning HTML first. However I do intend to learn CSS more.

    The editor that I am using is Dream Weaver.

    I will trying implementing the code you posted, with the first file, and work with that code if that is way you want to go.

    : )

    Billy

  15. #15
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz....
    Thank you much... you really helped me clean up the code. Everything is working in IE, Net Scape, and Mozilla!

    Have a great day!!!

    : )

  16. #16
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Onebit,
    Do you understand the meaning of those tags?
    'ul' means 'unordered list' while 'li' is 'list item' - it makes sense that you have lots of list items within 'ul' tags.

    I'm glad you got everything fixed.

  17. #17
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <ul> and <li> are standard (X)HTML tags, and have no part in CSS (Other than to be styled). You have to define your unordered list, to add list items, so for example

    HTML Code:
    <ul> <!-- this opens my list -->
     <li>This is a list item</li>
    </ul> <!-- this ends my list -->
    The below snippet of markup is not valid;

    HTML Code:
    <div id="top">
     <li>This is my list item</li>
    </div>
    I noticed you mentioned being 'used to tables'. This may be a little off topic, but get out of the habit whilst you can. Tables should be used for tabular data, divides (<div> tags) are used for dividing the page up (AKA layout).

    Hope that helps!
    Equentity, LLC - Coming Soon

    Have a question? Ask here


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
  •