2 Replies Latest reply on Mar 4, 2010 4:59 PM by brightbelt

    Some nagging CSS image rollover questions

    brightbelt Level 1

      Hi,

      I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:

      http://www.brightbeltmusic.com

       

      And here are my questions:

       

      -Why, when my original images are 90 px  wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?

       

      -I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.

       

      -Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...

       

      -Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?

       

      I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.

       

      Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.

       

      Thanks, Frank B.

        • 1. Re: Some nagging CSS image rollover questions
          osgood_ Level 8

          brightbelt wrote:

           

          Hi,

          I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:

          http://www.brightbeltmusic.com

           

          And here are my questions:

           

          -Why, when my original images are 90 px  wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?

           

          Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s

           

          brightbelt wrote:


          -I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.

           

          Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.

           

          Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.

           

          brightbelt wrote:

           


          -Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...

           

          Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.

           

          brightbelt wrote:

           

           

          -Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?

           

          li's do have default padding and margins set so these need to be zeroed out.

           

          li {

          margin: 0;

          padding: 0;

          }

           

           

          As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>Untitled Document</title>
          <style type="text/css">
          #navcontainer {
          width: 775px;
          margin: 0 auto;
          background-image: url(navUp.gif);
          background-repeat: repeat-y;
          overflow: hidden;
          }
          #navcontainer ul {
          width: 547px;
          padding: 0;
          margin: 0 auto;
          background-image: url(navUp.gif);
          }
          #navcontainer ul li {
          width: 90px;
          float: left;
          margin: 0;
          padding: 0;
          list-style: none;
          }
          #navcontainer ul li a {
          background-image: url(navUp.gif);
          background-repeat:no-repeat;
          color: #fff;
          text-decoration: none;
          font-weight:bold;
          width: 90px;
          display: block;
          text-align: center;
          float: left;
          border-right: 1px solid #069;
          padding: 5px 0;
          font-family: arial, helvetica, sans-serif;
          font-size: 14px;
          }
          </style>
          </head>

           

          <body>
          <div id="navcontainer">
              <ul>
              <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
              <li><a href="Contact_Us.htm">Contact</a></li> 
              <li><a href="Profiles.htm">Profiles</a></li>
              <li><a href="Catalogue.htm">Songs</a></li>
               <li><a href="BBL.htm">BBL Label</a></li>
              <li><a href="Jazz_links.htm">Links</a></li>
              </ul>
          </div>

           

          </body>
          </html>

          • 2. Re: Some nagging CSS image rollover questions
            brightbelt Level 1

            Many Thanks Osgood !! I appreciate your thoroughness in helping me out. I'll run your code and see what I can learn.

            Thanks again, Frank B.