SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Text Over an Image

    I'm having difficulities positioning text over an image. Specifically, I am trying to position the text within each <div> to the topleft of each image within that <div>.

    The following works as I want it to in IE6, but the text is not properly positioned in Mozilla 1.4.

    A test page can be found here:

    http://members.rogers.com/db-ls/test/textoverimage.html


    CSS:
    HTML Code:
      <style type="text/css'>
      #navtabs  { width: 190px; }
       .navtab { position: relative; height: 19px; width: 190px;  margin-bottom: 1px; }
       .navtab img { cursor: pointer; }
       .navtab p {  position: absolute; float: left; left: 0px; top: 0px; z-index: 10; cursor: pointer; }
      </style>

    HTML:

    HTML Code:
      <div id="navtabs">
     <div class="navtab"><img src="images/navtab_1.gif" id="navtab_1" alt="" width="190" height="19"><p>link 1</p></div>
     <div class="navtab"><img src="images/navtab_2.gif" id="navtab_2" alt="" width="190" height="19"><p>link 2</p></div>
     <div class="navtab"><img src="images/navtab_3.gif" id="navtab_3" alt="" width="190" height="19"><p>link 3</p></div>
      </div>

  2. #2
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming you're trying to make a vertical navigation list. I suggest looking at Listamatic. Here's a list example that you might want to consider, just change the img to your nav image. Anyway here's the solution to your question.
    Code:
      #navtabs  { width: 190px; }
       .navtab { position: relative; height: 19px; width: 190px;  margin-bottom: 1px; }
       .navtab img {cursor: pointer;}
       .navtab p {display:inline; position: absolute; float: left; left: 0px; top: 0px;  cursor: pointer; margin: 0; padding: 0 0 0 10px;}
    of course you can change the padding under .navtab p to your liking.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked great - thanks for the help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •