Support » Fixing WordPress » Sprite Positioning (Going into Wiget Below)

  • I’ve been trying all morning to figure this out. I’ve created a sprite code and when I put it in a widget it bumps into the widget below. I understand I need some margins and padding, and I’ve tried but I can’t get it to work.

    Any help would be appreciated.


    In my Stylesheet

    #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    #navlist li, #navlist a{height:80px;display:block;}
    #fb{background:url('') 0 0;}
    #fb a:hover{background:url('') 0 -80px}
    #rss{background:url('') -84px 0;}
    #rss a:hover{background:url('') -86px -80px}
    #mail{background:url('') -168px 0;}
    #mail a:hover{background:url('') -170px -80px}

    In the text widget:

    <ul id="navlist">
    <li id="fb"><a href="default.asp"></a>
    <li id="rss"><a href="css_intro.asp"></a>
    <li id="mail"><a href="css_syntax.asp"></a>

    [please mark any posted code – – this makes it easier to read and keeps it from getting corrupted by the forum’s parser]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Could you explain what it’s supposed to look like?

    Sorry a simple rollover.
    The top 3 buttons are purple then when rolled over they are green.
    I’ve installed it.

    ‘position:absolute;’ moves the elements out of te flow of the other elements;

    try and set a fixed height for the ul:


    The following will make the code much better

    #navlist {
    	overflow: auto;
    #navlist li{
    	float: left;
    	/* add following if needed */
    	list-style: none;
    	padding: 0;
    	margin: 0;
    #navlist a{
    	display: block;
    	width: 80px; /* or 84 of 87 whatever you like */
    	height: 80px;

    And also, don’t put the background on the li element, put it on the a element. So not:
    #mail{ background ... }
    #mail a{ background ... }

    Didn’t work 🙁

    We crossed messages, I will try your new code when I log back in. I have to pick kids up from school.

    Oh and sorry about not pasting code correctly.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Sprite Positioning (Going into Wiget Below)’ is closed to new replies.