Jump to content

how do I keep the buttons from jumping around - Solved with our thanks in the last post


niche
 Share

Recommended Posts

I have a script for two hovers. How do I keep the "Company Hover" from displacing the "Item Button" (ie how do I keep the button from jumping around)?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><?php session_start(); ?><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>savebop </title><style type="text/css">.button {padding:0px;width:82px;height:40px;vertical-align:top;}.message {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;display:none;border-style:solid;border-width:4px;}.button2 {padding:0px;width:82px;height:40px;vertical-align:top;}.message2 {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;display:none;border-style:solid;border-width:4px;}button.button:hover + div.message {display:block;}button.button2:hover + div.message2 {display:block;}</style></head><body><button class="button" id="a1" >Company Info</button><div class="message" id="a2">This company.</div> <button class="button2" id="b1" >Item Info</button><div class="message2" id="b2">This item.</div>  </body></html>

Edited by niche
Link to comment
Share on other sites

probably better to use visibility rather than display.

.button {padding:0px;width:82px;height:40px;vertical-align:top;}.message {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;/*display:none;*/visibility:hidden;border-style:solid;border-width:4px;}.button2 {padding:0px;width:82px;height:40px;vertical-align:top;}.message2 {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;/*display:none;*/visibility:hidden;border-style:solid;border-width:4px;}.button_cont {float:left;  text-align:center;}button.button:hover + div.message {visibility:visible;}button.button2:hover + div.message2 {visibility:visible;}

<div class="button_cont"><button class="button" id="a1" >Company Info</button><div class="message" id="a2">This company.</div></div><div class="button_cont"><button class="button2" id="b1" >Item Info</button><div class="message2" id="b2">This item.</div></div>

  • Like 1
Link to comment
Share on other sites

Point of information: I have no idea what happened to my first post. I'll use your suggestions . I also found changing the order of the code corrected the immediate problem. to this:

<?phpecho '<button class="button" >Item <br/>Info</button>';	echo '<button class="button2" >Company Info</button>';echo '<div class="message">Item Info</div>';echo '<div class="message2">Company Info</div>';?>

from this:

<?phpecho '<button class="button" >Item <br/>Info</button>';echo '<div class="message">Item Info</div>';  echo '<button class="button2" >Company Info</button>';echo '<div class="message2">Company Info</div>';?>

Thank-you for your dsonesuk.

Edited by niche
Link to comment
Share on other sites

I'll use your suggestions . I also found changing the order of the code corrected the immediate problem. to this:
<?phpecho '<button class="button" >Item <br/>Info</button>';	echo '<button class="button2" >Company Info</button>';echo '<div class="message">Item Info</div>';echo '<div class="message2">Company Info</div>';?>

button.button:hover + div.message {visibility:visible;}button.button2:hover + div.message2 {visibility:visible;}

Actually this should not work with '+' as it targets the very next div element, it does not care if it has class or id ref, you would have to use '~' instead.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...