4 Replies Latest reply on Sep 26, 2008 4:18 PM by Ruby7829

    Help with positioning text links over image

    Ruby7829 Level 1
      I'm creating a five page site with a different background color for each horizontal nav bar. I created a solid color graphic (780 x 30) and inserted it into my div. I now want to place my text links over the graphic but I can't seem to do it. It keeps appearing underneath. Someone recommended using a table and I'm wondering if this would be easier.

      Thanks!
        • 1. Re: Help with positioning text links over image
          Level 7
          You have to use the image as a background image in your 'navcontainer' <div>

          #navcontainer {
          background-image: url(images/nav_services.gif);
          background-repeat: no-repeat;
          }

          If you actually insert the image into the page, as you have done, it
          WILL push the text links down because its ABOVE them on the page.


          Ruby7829 wrote:
          > I'm creating a five page site with a different background color for each
          > horizontal nav bar. I created a solid color graphic (780 x 30) and inserted it
          > into my div. I now want to place my text links over the graphic but I can't
          > seem to do it. It keeps appearing underneath. Someone recommended using a
          > table and I'm wondering if this would be easier.
          >
          > Thanks!
          >
          > <div id="navcontainer"><img src="images/nav_services.gif" />
          > <ul id="navlist">
          > <li id="active"><a href="test_index.html" id="current">Home</a></li>
          > <li><a href="test_services.html">Services</a></li>
          > <li><a href="test_faq.html">FAQ</a></li>
          > <li><a href="test_testimonials.html">Testimonials</a></li>
          > <li><a href="javascript">Contact</a></li>
          > </ul>
          > </div>
          >
          >
          > #navcontainer ul
          > {
          > text-align: center;
          > padding: 0px 0px;
          > margin: 0;
          > color: white;
          > width: 100%;
          > line-height: 18px;
          > }
          >
          > #navcontainer ul li
          > {
          > display: inline;
          > padding-left: 0;
          > padding-right: 0;
          > padding-bottom: 5px;
          > /* matches link padding except for left and right */
          > padding-top: 5px;
          > }
          >
          > #navcontainer ul li a
          > {
          > padding-left: 10px;
          > padding-right: 10px;
          > padding-bottom: 5px;
          > padding-top: 5px;
          > color: white;
          > text-decoration: none;
          > }
          >
          > #navcontainer ul li a:hover
          > {
          > color: #CCCC99;
          > }
          >
          • 2. Re: Help with positioning text links over image
            Ruby7829 Level 1
            So I'll need five #navcontainers that each need a different background image (each page has a different color nav bar). Do I need to create five #navcontainer styles?? One for the home page, one for the services page, etc? This is where I'm confused because if I add an image to the one #navcontainer then it will show up on each page.
            • 3. Re: Help with positioning text links over image
              Level 7
              Ruby7829 wrote:
              > So I'll need five #navcontainers that each need a different background image
              > (each page has a different color nav bar). Do I need to create five
              > #navcontainer styles?? One for the home page, one for the services page, etc?
              > This is where I'm confused because if I add an image to the one #navcontainer
              > then it will show up on each page.

              You can do it two ways really.

              1) As you say create 5 unique ids, like 1,2,3,4,5 as below.

              #navcontainer1 {
              background-image: url(images/whatever1.gif);
              background-repeat: no-repeat;
              }

              #navcontainer2 {
              background-image: url(images/whatever2.gif);
              background-repeat: no-repeat;
              }

              #navcontainer3 {
              background-image: url(images/whatever2.gif);
              background-repeat: no-repeat;
              }

              etc, etc for pages 4 and 5.

              or

              You create and editable css region in each one of your other 4 pages
              (probably a better solution)

              <style type="text/css">
              #navcontainer {
              background-image: url(images/whatever1.gif);
              background-repeat: no-repeat;
              }
              </style>


              Then on each of the 4 pages you just swap the name of the background
              image you want to feature in your #navcontainer <div>

              Please note the editable css region MUST go after any link to your main
              stylesheet for the styling to take effect.
              • 4. Re: Help with positioning text links over image
                Ruby7829 Level 1
                Thank you! I did apply five unique id's so my CSS is pretty long (I had to make different id's for the five ul, ul li, ul li a, and ul, li, a, :hover). That said, it worked!

                I'm still learning so if I can get the site up this way for my friend then I can focus on going back and figuring out how to make it shorten. Thanks a million! If you have any more tips please pass them on.