www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: CSS tab problem

  1. #1
    Join Date
    Nov 2009
    Posts
    41

    CSS tab problem

    Here's my CSS:
    Code:
    #tabs ul { margin: 0 ; padding: 0 ; list-style: none ; display: inline ;  padding-top:10px; width:36px; }
    #tabs ul li { height:43px; width:36px; margin: 0; padding: 0; display: inline; text-align: center; list-style: none; font-family: Arial, Helvetica, sans-serif; }
    #tabs li a { color: #ff0; background-image: url('../images/button-back.png'); padding-top: 15px; padding-bottom: 15px; text-decoration: none; display: inline; width:36px;}
    And my HTML:
    Code:
        <div id="topnav">
                <div id="tabs">
                    <ul>
                        <li><a href="#"><img src="images/bone-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/globe-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/settings-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/inventory-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/clan-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/clan-icon.png" border="0"/></a></li>
                    </ul>
                    <br/><br/><br/> 
                    <ul>
                        <li><a href="#"><img src="images/random-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/emote-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/note-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/achievement-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/objective-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/quest-icon.png" border="0"/></a></li>
                    </ul>
                </div>
        </div>
    If you look at this image:
    http://i32.tinypic.com/iwopwk.png

    You can see that they are different widths, etc. When they should all have a width of 36 and height of 43. No matter what size image is placed in the <li>'s

    Any ideas what I've done wrong?

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Inline elements cannot have widths. Also, no need for two lists. I altered your CSS slightly, removing unnecessary properties, and adding the border to your CSS not the img tags.
    Code:
    #tabs * { padding:0; margin 0;}
    #tabs ul {padding-top: 10px; width:216px; }
    #tabs li { height:43px; width:36px; text-align: center; list-style: none; font-family: Arial, Helvetica, sans-serif; float:left;}
    #tabs a { color: #ff0; background-image: url('../images/button-back.png'); padding: 15px auto; text-decoration: none;}
    #tabs img {border: none;}
    Code:
        <div id="topnav">
                <div id="tabs">
                    <ul>
                        <li><a href="#"><img src="images/bone-icon.png" /></a></li>
                        <li><a href="#"><img src="images/globe-icon.png" /></a></li>
                        <li><a href="#"><img src="images/settings-icon.png" /></a></li>
                        <li><a href="#"><img src="images/inventory-icon.png" /></a></li>
                        <li><a href="#"><img src="images/clan-icon.png"  /></a></li>
                        <li><a href="#"><img src="images/clan-icon.png"  /></a></li>
                        <li><a href="#"><img src="images/random-icon.png" /></a></li>
                        <li><a href="#"><img src="images/emote-icon.png" /></a></li>
                        <li><a href="#"><img src="images/note-icon.png"  /></a></li>
                        <li><a href="#"><img src="images/achievement-icon.png"  /></a></li>
                        <li><a href="#"><img src="images/objective-icon.png" /></a></li>
                        <li><a href="#"><img src="images/quest-icon.png" /></a></li>
                    </ul>
                </div>
        </div>
    If you are applying a background to the ul, you will need to define its height.

    Also, put a space before / in a self-closing tag to maintain compatibility with HTML, what your page is served as. It's also unlikely that you need two divs surrounding the ul tag, one or none should be ok, but I couldn't be absolutely sure without seeing the page. However, I'd suspect that this would do.
    Code:
    <div id="topnav">
      <ul>
          <li><a href="#"><img src="images/bone-icon.png" /></a></li>
          <li><a href="#"><img src="images/globe-icon.png" /></a></li>
          <li><a href="#"><img src="images/settings-icon.png" /></a></li>
          <li><a href="#"><img src="images/inventory-icon.png" /></a></li>
          <li><a href="#"><img src="images/clan-icon.png"  /></a></li>
          <li><a href="#"><img src="images/clan-icon.png"  /></a></li>
          <li><a href="#"><img src="images/random-icon.png" /></a></li>
          <li><a href="#"><img src="images/emote-icon.png" /></a></li>
          <li><a href="#"><img src="images/note-icon.png"  /></a></li>
          <li><a href="#"><img src="images/achievement-icon.png"  /></a></li>
          <li><a href="#"><img src="images/objective-icon.png" /></a></li>
          <li><a href="#"><img src="images/quest-icon.png" /></a></li>
      </ul>
    </div>
    Code:
    #top-nav ul * { padding:0; margin 0;}
    #top-nav ul {padding-top: 10px; width:216px; height:46px; }
    #top-nav ul li { height:43px; width:36px; text-align: center; list-style: none; font-family: Arial, Helvetica, sans-serif; float:left;}
    #top-nav ul a { color: #ff0; background-image: url('../images/button-back.png'); padding: 15px auto; text-decoration: none;}
    #top-nav ul img {border: none;}
    Last edited by Declan1991; 07-07-2010 at 06:38 PM.

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    Inline elements don't obey width, height, padding and margin rules.

    Code:
    #tabs ul li { display: inline-block; }

  4. #4
    Join Date
    Nov 2009
    Posts
    41
    Thanks for the reply Declan, but that doesn't seem to have worked either. Neither the height or width work, and the images in the <li> now show just out of the background (button-back).

  5. #5
    Join Date
    Jun 2010
    Posts
    92
    I'd avoid putting an image background in anchor tags; unless you are making them as 'blocks', you might want to shift the background image into the <li> tags

    edit: Ooops. Miss-read there; disregard my post

    However anchor tags should be display block if you are to use padding, an alternative is to use line-height:30px; (But with display:block

    :P
    Last edited by adamou; 07-07-2010 at 06:51 PM.

  6. #6
    Join Date
    Nov 2009
    Posts
    41
    Now I'm using:

    Code:
    #tabs ul { margin: 0 ; padding: 0 ; list-style: none ; display: inline ;padding-top: 10px; width:216px; }
    #tabs li { background-image: url('../images/button-back.png'); height:43px; width:36px; text-align: center; list-style: none; font-family: Arial, Helvetica, sans-serif; float:left;}
    #tabs a { color: #ff0; padding: 15px auto; text-decoration: none;}
    #tabs img {border: none;}
    Code:
         <div id="topnav">
                <div id="tabs">
                    <ul>
                        <li><a href="#"><img src="images/bone-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/globe-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/settings-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/inventory-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/clan-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/clan-icon.png" border="0"/></a></li>
                    </ul>
                    <br/><br/><br/> 
                    <ul>
                        <li><a href="#"><img src="images/random-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/emote-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/note-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/achievement-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/objective-icon.png" border="0"/></a></li>
                        <li><a href="#"><img src="images/quest-icon.png" border="0"/></a></li>
                    </ul>
                </div>
        </div>
    Which looks like:
    http://i25.tinypic.com/2qw349h.png

    It's giving the required width and height, but there's no spacing between them all.

  7. #7
    Join Date
    Jun 2010
    Posts
    92
    margin-top on the img tags?

    OR

    change

    #tabs a { color: #ff0; line-height: 30px; text-decoration: none;}

    edit: sorry again scratch that one.

    #tabs a { color: #ff0; padding:15px 0; display:block; text-decoration: none;}
    Last edited by adamou; 07-07-2010 at 07:01 PM.

  8. #8
    Join Date
    Aug 2007
    Posts
    3,767
    Oh that's my fault. I think this is closer to what you want. I cannot be absolutely sure without the actual images, but I misunderstood you intentions the first time.
    Code:
    #topnav ul * { padding:0; margin 0;}
    #topnav ul {padding-top: 10px; width:228px; height:66px; }
    #topnav ul li {  text-align: center; list-style: none; font-family: Arial, Helvetica, sans-
    
    serif; float:left; padding:10px 1px; 0;}
    #topnav ul a { height:43px; width:36px; display:block; color: #ff0; background:  #ff0; padding: 
    
    0; text-decoration: none;}
    #topnav ul img {border: none;}
    The only problem is when adjusting the padding between the li's, you'll have to adjust the width and height of the ul. Alternatively, if you don't need to have a background on the ul or #topnav, you can remove the height and width totally.

  9. #9
    Join Date
    Nov 2009
    Posts
    41
    Nevermind, I'd done the spacing now.

    All that's left is to try and center the whole thing in the middle of my page :P

  10. #10
    Join Date
    Jun 2010
    Posts
    92
    on the parent div just set a width and give it margin:auto;
    {marign:auto; width:500px;}

  11. #11
    Join Date
    Nov 2009
    Posts
    41
    I've uploaded what I've done so far.

    http://runehints.com/rhnew/

    What I'm trying to do now is to center the tabs between the two logos.

  12. #12
    Join Date
    Nov 2009
    Posts
    41
    Also, you'll noticed that the whole back image isn't linked like I want it to be, the link starts at the top of the image that's over the top of it.

  13. #13
    Join Date
    Jun 2010
    Posts
    92
    1) remove a {padding:5px;}
    2) change #tabs a { color:#FFFF00; display:block; height:40px; text-decoration:none;}
    3) rename #navlefttitle to .navlefttitle and change all the <div id="navlefttitle"></div> to <div class="navlefttitle">
    4) add #navleftbg a {padding:5px;}
    5) Remove <p>&nbsp;</p> after the divs, add a cssrule to .navlefttitle {margin-top:10px;}

    .. I'll keep editing this hang on


    You want to try avoid having multiple IDs. IDs are ment to be unique, if you are going to have something that is repeated, use class="" and to declare a class in the css instead of using a hash (#) you just use a dot ( . )

    run it through the w3c validator and you'll get a better idea


    You also have alot of floating elements, either use <br clear="all" /> or write a class in the css and write .clear {clear:both;} and add <br class='clear' /> after/before the footer.

    If you add it before the footer, remove float:left; from the footer
    Last edited by adamou; 07-07-2010 at 07:50 PM.

  14. #14
    Join Date
    Nov 2009
    Posts
    41
    The navleft and navlefttitle are fine as they are, they're displaying how I want them, it's the top tabs between the logos that I need centering.

  15. #15
    Join Date
    Jun 2010
    Posts
    92
    It looks centered to me? What are you trying to achieve?

    Could you possibly make a screenshot and edit it in MSPaint?




    ... and ok, but you might want to start getting into good practices it will avoid ALOT of headaches in the future

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles