Announcement

Collapse
No announcement yet.

creating new nav bar css

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    creating new nav bar css

    im trying to layout a new nav bar to insert into executive theme,
    the button image steps up from the bottom of the parent div tag, i want it to sit on the bottom so as not to see the background image of the parent div tag.
    whats pushing this image up a couple of pixels.. sorry for long paste to follow:


    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .nav_full_width {
    margin: 0px;
    }

    .nav_button_container_left {
    float: left;
    width: auto;
    margin-left: 10px;

    }
    .nav_762_box {
    background-image: url(../../../Program Files/Actinic v8/Sites/Site1/gray_nav_background.gif);
    width: 762px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: bottom;
    }

    .nav_button {
    background-image: url(../../../Program Files/Actinic v8/Sites/Site1/button.gif);
    background-repeat: no-repeat;
    float: left;
    width: 70px;
    height: 30px;
    position: static;
    }
    -->
    </style>
    </head>

    <body>
    <div class="nav_full_width" align="center">
    <div class="nav_762_box"><div class="nav_button_container_left"><table align="left"><tr><td valign="bottom">
    <div class="nav_button" align="center" >home</div></table></td></td>
    Content for class "nav_button_container_left" Goes Here</div>
    <img src="../../../Program Files/Actinic v8/Sites/Site1/shim.gif" width="1" height="30" />

    </div>
    </div>
    </body>
    </html>
    Simbo thanks you in advance again

    Location: Jersey Channel Islands
    Tags: None
    #2
    Maybe worth setting the border and padding declarations to none in the containing <div> and see how that fares


    Bikster
    SellerDeck Designs and Responsive Themes

    Comment

      #3
      sorry fair's bad

      the button.gif is 30high so i would have thought it would have pushed down even without the table around it, my guess is its something to do with the 762_container which includes a background image 762x20 set to bottom,,?
      Simbo thanks you in advance again

      Location: Jersey Channel Islands

      Comment

        #4
        not a very productive day

        if all i get done is a half cocked nav bar, but i suppose this is my css steep learning curve...
        Simbo thanks you in advance again

        Location: Jersey Channel Islands

        Comment

          #5
          As jont says, its invariably padding or border settings that are doing it.
          To add to the annoyance, you may well find different results in IE and Firefox.
          I have managed to get IE to square up on hover, but in Firefox my hovers state still pushes that extra pixel higher.

          I would add your own css definitions for nav a and nav a:hover, otherwise, you are using those set by actinic, which may contain padding that you did not intend.

          You will find css is a joy.
          You find the way different browsers intepret it ...hair-pullingley, head-bangingley, nose-out-of-joint-ingly frustrating.

          Comment

          Previous template Next
          Working...
          X