2 Replies Latest reply on Apr 7, 2010 2:06 PM by poorlostsoul

    Using Rollover images?

    poorlostsoul Level 1

      I replaced a single image with one that is a rollover image. Before switching to the rollover image my text was immediately to the right and level with the top of my image. When I replaced the image with the rollover, my text dropped and is now level with the very bottom of the image. I tried creating a style to clear the text left but that didn't seem to help. Does anyone know why my text dropped like it did or how I can fix it to bring it back to where it was?

       

      This is the code that Dreamweaver put in for my image:

       

       

      pumps and accessories
        • 1. Re: Using Rollover images?
          mhollis55 Level 4

          Can you give us a link to your images with the rollovers on an actual website?

           

          Also, what's your CSS code for rollover?

           

          Here is one I did:

           

          http://www.hollisinternetmarketing.net

           

          Applicable CSS:

           

          #menulinks {

          clear:both;

          width:900px;

          height:69px;

          background-image:url(../images/menulinks.png);

          }


          #menulinks a {

          padding-left:25px;

          padding-right:25px;

          padding-top:25px;

          height:44px;

          background-image:none;

          display:block;

          color:#FFFFFF;

          text-decoration:none;

          float:left;

          font-size:14px;

          font-weight:bold;

            }

           

           

          #menulinks a:hover, #menulinks a.active {

          background-image:url(../images/menuhover.png);

          background-position:left top;

          text-decoration:none;

          color:#FFFFFF;

          }

           

          In the page

           

          <div id="menulinks">

          <a class="active" href="index.html">HOME</a>

            <div class="menuline"></div>

          <a href="service.html">SERVICES</a>

            <div class="menuline"></div>

          <a href="price.html">PRICING</a>

            <div class="menuline"></div>

          <a href="about.html">ABOUT US</a>

            <div class="menuline"></div>

          <a href="portfolio.html">PORTFOLIO</a>

                <div class="menuline"></div>

          <a href="contact.php">CONTACT US</a>

            <div class="menuline"></div>

          </div>

          That's pretty much it.

          1 person found this helpful
          • 2. Re: Using Rollover images?
            poorlostsoul Level 1

            Sorry, I don't have a link to view it by. Thanks for including an example, I can try some of those styles but I just wondered why my positioning of text was working with a single image but not when replacing it with the rollover?

             

            I haven't had much luck inserting HTML to post on this forum so I won't use the insert:

             

            These were my styles for the photos:

             

            #storefront {
            display: inline;
            clear:left;
            padding-left: 5px;
            border: thin solid #006;
            }
            #inside_left {
            float: left;
            padding-right: 5px;
            border: thin solid #006;
            }
            #inside_right {
            float: right;
            border-top-width: thin;
            border-right-width: thin;
            border-bottom-width: thin;
            border-left-width: thin;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            }