www.webdeveloper.com
Results 1 to 6 of 6

Thread: Image Question

  1. #1
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900

    Image Question

    Hello,

    On this site http://djshawnmichaels.com/testmenu/

    Look for the features button, I want to add a graphic after the word features, but part of the same button.

    This is the line of code for the feature button:
    <li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')">Features</a></li>

    How would I go about doing this?

    Thank you kindly

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You can add it as the background-image for your link:
    Code:
    <li>
    <a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')" style="background: url(file.gif) no-repeat right;">
    Features
    </a>
    </li>
    The button looks pretty small - you may have to change some of the spacing.

  3. #3
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    Thanks, that helped It took out my divider by me adding that in there, so with having this
    <li>
    <a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')" style="background: url(file.gif) no-repeat right;">
    Features
    </a>
    </li>

    Is there a way to add another image right after my arrow?

    Thanks

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    How do you have the dividers inserted for the other links? Is it part of the background image? If so, all you need to do is adjust the padding/widths for that button and some of the neighboring buttons so that it reappears.

  5. #5
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    I played with the padding, and the same thing happens with no dividor bar. In my css for the menu, this is the code for the divider bar:

    #chromemenu ul li a{
    float: left;
    color: #AA1111;
    font-weight: bold;
    padding: 6px 11px 6px 11px;
    text-decoration: none;
    background: url(divider.gif) center right no-repeat; /*Theme Change here*/
    }

    So would there be a way that I could add the divider manually?

    Thanks

  6. #6
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You might try:
    Code:
    <li>
    <a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')" style="background: url(file.gif) no-repeat right;">
    Features
    </a>
    <span style="background: url(divider.gif) no-repeat; width: 2px;"></span>
    </li>
    Last edited by KDLA; 05-18-2006 at 04:15 PM. Reason: deleted too much

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles