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.

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

    Code:
    In my Stylesheet

    #navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:80px;display:block;}

#fb{left:0px;width:84px;}
#fb{background:url('https://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') 0 0;}
#fb a:hover{background:url('https://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') 0 -80px}

#rss{left:90px;width:84px;}
#rss{background:url('https://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') -84px 0;}
#rss a:hover{background:url('https://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') -86px -80px}

#mail{left:178px;width:84px;}
#mail{background:url('https://www.aakpreschool.com/wp-content/uploads/2013/01/icons_hover.png') -168px 0;}
#mail a:hover{background:url('https://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 – https://codex.www.ads-software.com/Forum_Welcome#Posting_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?

    Thread Starter carolynyalin

    (@carolynyalin)

    Sorry a simple rollover.
    The top 3 buttons are purple then when rolled over they are green.
    See: https://www.aakpreschool.com/blog/
    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:

    #navlist{height:80px;}

    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 ... }
    but
    #mail a{ background ... }

    Thread Starter carolynyalin

    (@carolynyalin)

    Didn’t work ??

    Thread Starter carolynyalin

    (@carolynyalin)

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

    Thread Starter carolynyalin

    (@carolynyalin)

    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.

Tags