Sprite Positioning (Going into Wiget Below) (8 posts)

  1. carolynyalin
    Posted 2 years ago #

    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.

    Site: http://www.aakpreschool.com/blog/

    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('http://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') 0 0;}
    #fb a:hover{background:url('http://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') 0 -80px}
    #rss{background:url('http://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') -84px 0;}
    #rss a:hover{background:url('http://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') -86px -80px}
    #mail{background:url('http://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') -168px 0;}
    #mail a:hover{background:url('http://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') -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 - http://codex.wordpress.org/Forum_Welcome#Posting_Code - this makes it easier to read and keeps it from getting corrupted by the forum's parser]

  2. Peter_L
    Posted 2 years ago #

    Could you explain what it's supposed to look like?

  3. carolynyalin
    Posted 2 years ago #

    Sorry a simple rollover.
    The top 3 buttons are purple then when rolled over they are green.
    See: http://www.aakpreschool.com/blog/
    I've installed it.

  4. Michael
    Part-Time Forum Moderator
    Posted 2 years ago #

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

    try and set a fixed height for the ul:


  5. Peter_L
    Posted 2 years ago #

    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 ... }

  6. carolynyalin
    Posted 2 years ago #

    Didn't work :(

  7. carolynyalin
    Posted 2 years ago #

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

  8. carolynyalin
    Posted 2 years ago #

    Oh and sorry about not pasting code correctly.

Topic Closed

This topic has been closed to new replies.

About this Topic