Rollover buttons stacking vertically instead of horizontally

  • Hello,

    I have horizontal rows of buttons on my site which are images. I’m using the following code to give the buttons a rollover effect. The problem is that when I insert this code, the buttons no longer stay in rows: they stack on top of each other vertically. I imagine the solution is fairly simple, but I’ve been unable to figure it out.

    CSS:

    a.rollover {
	display: block;
	width: 188px;
	height: 60px;
	text-decoration: none;
	background: url("https://www.site.com/images/archive.jpg");
	}

a.rollover:hover {
	background-position: -188px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}

    HTML:
    <a href="https://www.site.com/?page_id=42" class="rollover" title="archive" rel="nofollow"><span class="displace">archive</span></a>

    Thanks in advance for any suggestions. : )

Viewing 8 replies - 1 through 8 (of 8 total)

  • You need to adjust the numbers after the background position CSS line. The first # is horizontal placement, the second vertical.

    What it means is there is more than one image stored in the single file called archive.jpg. The image is larger than the viewport it is displayed in. CSS manipulates which part of it is visible. Your best bet is use trial and error. (This technique is called CSS Sprite)

    Thread Starter indivi

    (@indivi)

    Thanks for the reply. I apologize for not quite being clear enough with the issue, so here are some images to demonstrate.

    This is the rollover image:
    https://www.brawlinthefamily.com/images/archive.jpg

    If I change the second value for background-position, the rollover no longer works, and it doesn’t solve the vertical issue, I’m afraid.

    This is what I want it to look like:
    https://www.brawlinthefamily.com/images/correct.jpg

    This is what it looks like when the HTML is inserted:
    https://www.brawlinthefamily.com/images/incorrect.jpg

    The rollover works, it just breaks the menu.

    Oh, that is a different issue than I thought you were describing. Your CSS has to be tweaked to position the buttons where you want them to be. If you want anyone to be able to help you with that you will have to post a URL. The issue can be debugged fairly simply with Firebug in the Firefox browser but that requires looking at the live site.

    Thread Starter indivi

    (@indivi)

    Ah, I see! The link is https://www.brawlinthefamily.com, and I’ve put the code in for the “archives” button now.

    Thanks a ton for your assistance!

    Thread Starter indivi

    (@indivi)

    I’ve installed Firebug, but I’m still uncertain as to what’s causing the break to occur.

    Thread Starter indivi

    (@indivi)

    The live site is currently displaying the issue. Thanks in advance for further suggestions. : )

    Thread Starter indivi

    (@indivi)

    I am still experiencing this problem. I took out the code for now so my menu doesn’t display in a broken fashion, but if someone would like to take a look at it, I’ll put it back in so you can see.

    Thread Starter indivi

    (@indivi)

    Bump! I will put the code live at anyone’s request.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Rollover buttons stacking vertically instead of horizontally’ is closed to new replies.