#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    13
    Rep Power
    0

    Menu Tabs drop below Menu Bar


    I working on a CSS to display a round-shouldered-tab menu. My result is acceptable:
    http://rickduley.webs.com/roundShoulderTabMenu.jpg
    except for the fact that the tabs are set below the menuBar on which the are supposed to display.

    I have run out of ideas. Would someone please set me on the right path?
    Thanks.

    P.S.: the code is at
    http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
    you have to delete the 'dot key gee bee' suffix.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    64
    Rep Power
    10
    could you show us a page with the html and the css that you are using?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    13
    Rep Power
    0
    Originally Posted by foxtail
    could you show us a page with the html and the css that you are using?
    I posted the code in the ZIP file -
    Originally Posted by rickduley
    the code is at
    http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
    you have to delete the 'dot key gee bee' suffix.
    Thanks
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Why don't you give us the addy of the actual page, instead of a zip file I'd have to unzip and load to my own server?

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    13
    Rep Power
    0
    Originally Posted by kk5st
    Why don't you give us the addy of the actual page, instead of a zip file I'd have to unzip and load to my own server?
    I would if I could, Gary, but I can't.

    Since Christmas, my website has not displayed correctly. I do not know what has happened, and they do not respond to my emails, but the formatting appears correctly for a few seconds then goes haywire (at least, it does on IE8 - Firefox 3.5.6 demonstrates its independent spirit by ignoring colour and layout altogether).

    You wouldn't get to see the view in the JPEG if I did upload the HTML, so the code is the best I can do. Kaspersky Internet Security 2010 tells me the ZIP is clean
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    13
    Rep Power
    0
    Just to show you what I mean, I have uploaded the Round-shouldered tab menu to the site at
    http://rickduley.webs.com/roundedTopCornerTabMenu-993300-darkBrown.html

    You will see it is not quite what I intended.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    64
    Rep Power
    10
    give the menubar div a height of 14px, I did that and it looked fine.
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Originally Posted by rickduley
    Just to show you what I mean, I have uploaded the Round-shouldered tab menu to the site at
    http://rickduley.webs.com/roundedTopCornerTabMenu-993300-darkBrown.html

    You will see it is not quite what I intended.
    To #menuBar, add {overflow: hidden;} OR {display: table;}. See Enclosing Float Elements for the reasons.

    Why are you not marking the menu as a list? That is what a menu is, a list.

    See sliding doors for a much better way to get your rounded corners.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    13
    Rep Power
    0
    Originally Posted by foxtail
    give the menubar div a height of 14px, I did that and it looked fine.
    Aaaarrrggghhhh!
    How simple is that!
    Duh!

    Thanks foxtail
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    13
    Rep Power
    0
    Originally Posted by kk5st
    Why are you not marking the menu as a list? That is what a menu is, a list.
    Hi Gary

    I dodn't realize I could put somthing like this:
    Code:
             <div class="menuTab">
                <div class="top-left-corner">
                   <img
                      src="img/quarter-top-left-993300-darkBrownOnPaleGold-radius14.gif"
                      width="14px"
                      height="14px"
                      alt="">
                </div>
    
                <div class="top-right-corner">
                   <img
                      src="img/quarter-top-right-993300-darkBrownOnPaleGold-radius14.gif"
                      width="14px"
                      height="14px"
                      alt="">
                </div>
    <a href="#"> Simple Examples </a>
    </div>
    in a list. Come to that, I think I tried it and got spat out.

    I'm not sure what to make of 'sliding doors', but I'll print it and read it.

    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo