Horizontal Rollover Images

  • Resolved orgspirit

    (@orgspirit)


    14 years, 8 months ago

    Hello!Please any one help me with this issue! I have a set of rollover images in my menu, but I cannot figure out how to horizontally align them.
    I have tried some tips from this forum but it didn’t help me…
    I have put two buttons for instance on my page. I want them to be horizontal, NOT vertical.
    Thanks in advance!

    page: https://businesmarketing.org/?page_id=846

    css:

    #home {
    width: 112px;
    height: 22px;
    margin-left: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    }

    #home a {
    background-position: center top;
    text-decoration: none;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: block;
    text-align: center;
    height: 101%;
    font-size: xx-small;
    line-height: 3px;
    color: #E6F4F1;
    background-image: url(‘/Home.png’);
    }
    #home a:hover {
    background-position: center bottom;
    text-decoration: none;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url(‘/Home.png’);

    }

    #company {
    width: 112px;
    height: 22px;
    margin-left: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    }

    #company a {
    background-position: center top;
    text-decoration: none;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: block;
    text-align: center;
    height: 101%;
    font-size: xx-small;
    line-height: 2px;
    color: #E6F4F1;
    background-image: url(‘/company.png’);
    }
    #company a:hover {
    background-position: center bottom;
    text-decoration: none;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url(‘/company.png’);
    }

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

  • Float them both left, or right.

    Or you can put them in an unorded list as below…

    <div id="Yourimages">
<ul>
   <li><img src="path to your image" widht="100" height="100";></li>
   <li><img src="path to your image" widht="100" height="100";></li>
 </ul>
</div>

    And in the style.css

    #Yourimages ul li{display:inline;list-style-type:none;}

    Thread Starter orgspirit

    (@orgspirit)

    Hey,I did try float them both left or right before but it didn’t work! And now it worked!?)) Thanks!

    Perhaps you should post your solution.

    Thread Starter orgspirit

    (@orgspirit)

    I float them both to the left!)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Horizontal Rollover Images’ is closed to new replies.