Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Resolved] Best approach to creating a horiz menu bar?

  • This topic is empty.
Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • #155313
    paulob
    Participant

    Which do you prefer and why are they better?

    The problem is that the font-size:0 hack kills inheritance and you have to reset the font-size in pixels rather than percent. It’s benefits are that it is an easy hack to use and does work. (in some cases you could set the font to .0001 percent and then use a mutliplier to bring it back but is awkward and hacky.).

    The font-size:0 hack doesn’t work in older Safari or Chrome but is fixed in recent versions (although will still be broken in Safari PC if anyone is still using it).

    The method I prefer is shown here but is a little complex perhaps to understand and not as straight forward as the font-size:0 hack. It does however work almost everywhere.

    The trick is the display:table and width :100% n the parent that forces the browser to construct anonymous inner table elements when none are present to satisfy the requirements of being a table. When the anonymous elements are added then any white space nodes are set to display:none as directed by the specs thus curing the white space gap.

    Other browsers are fixed by negative word spacing on the whitespace node and a suitable large number will remove the whitespace without incident although you have to reset the word space on the actual content (much in the same way as as the font-size:0 hack but without any font-size issues).

    #155315
    Paulie_D
    Member

    Thanks for that…

    #155432
    Anonymous
    Inactive

    Greetings Paul,

    I’ve been working with the menu you created and I really like the way it functions. I’ve made a few changes and have tried to make others, but am not quite getting the results I want. The menu is here.

    I’ve tried to set the text down a bit (vertically centered) in the boxes and have attempted that by adjusting the top and bottom margins but am not doing anything but making the boxes bigger, or having no effect.

    I’ve tried adjusting the font weight and was able to do that and compensate for the added size by adjusting the margins, but I cannot get the height to be 20px which is what they need to be.

    I am having trouble adjusting the positions of the drop downs. For example, the <li> “History” appears to be both under and over the <li class="active"> “About Us” as the top border of the former and bottom border of the latter are missing. Also, the top inner border for the “History” button appears to be under the top nav button “Discover”. Of course this is inherent to all sub navs. The tert navs are overriding the right edge of their adjacent buttons and I’ve tried to adjust this by adding margin values to the .tert-nav > li, .tert-nav > li a { but I get some very strange gaps and extra “borders” no matter the value set for the left margin. (1px or 2 px).

    Can individual width values be given to the upper nav buttons such as the “about Us” button and if so, what would be the best way to do that?

    Thanks.

    #155456
    paulob
    Participant

    Hi,

    I’m not sure which items you want to change the height of as they look vertically centred to me (assuming you are catering for ascenders and descenders). You could set line-height:20px on the anchors if you want slightly more depth but that won’t change the vertical-alignment as such although it does default to the middle of that line-height. If you want to tweak by eye then just add some padding-top to the anchors as required. You don’t want to be using margins as such in here.

    The overlap on the menu is because you haven’t actually started below the items so you will need to raise the z-index on hover.

    e.g.

    .top-nav li:hover{z-index:99}/* any number larger than the normal menu items */
    

    To change the width of the top items you could just apply the width to the top level using the child selector but it may look odd as they aren’t all the same amount of text. You will also have to change the width of the parent if you don’t want them to wrap.

    e.g.

    nav{width:auto;background:none} .top-nav > li{width:110px}

    I’m not sure if that’s what you meant though. If you just want to change a couple of the top level items then add a unique class to them and change their width that way.

    e.g.

    .top-nav > li.item1 {width:110px}
    
    #155541
    Tom Houy
    Participant

    Here is a really basic drop down menu using only CSS:

    http://cdpn.io/zBkIC

    You could easily change the colors, padding, fonts, etc… and add some borders to make it look more like your initial example.

    #156977
    Anonymous
    Inactive

    Greetings Paul,

    Sorry for the long delay in replying. I wasn’t able to be at my computer for some time.

    I’m not able to get the letter to be bold and don’t know what I’m doing wrong. I think everything else is exactly like I want except that. The current version is here.

    Also, the page appears to contain a lot of coding that isn’t needed for my purposes such as input[type="checkbox"], input[type="radio"] I’m afraid all of this code has grown far larger than I can comprehend being a newbie at this. Is there a simpler way of doing this with css and images instead of the “hacks”? I find it all interesting, but beyond what I can handle at present. I need something I can comprehend and adapt to my needs and have a new site up and going. The current version is here.

    #156981
    paulob
    Participant

    HI,

    I’m not able to get the letter to be bold and don’t know what I’m doing wrong

    Which letter exactly ?

    Or did you want to bold all the text?

    If so you can do that here:

    .top-nav li a {
        font-weight: bold;
    }
    

    Of course that will make the menu too wide to fit in a 750px width so you will need to shorten the padding on each item.

    .top-nav li a{padding:0 13px}
    

    Also, the page appears to contain a lot of coding that isn’t needed for my purposes

    Most of that is from the normalise.css that you are using and you don’t really need to worry about that as all the clever stuff is being done for you. Just leave it alone.

    All of of the hacks are because you wanted to support older browsers and we already talked about this in detail so I don’t think we need to specifically go over it again. If you don’t need to support ie6 and 7 then you can remove the hacks. The rest of the code is actually pretty straight forward and I don’t see how it could be simpler for that design.

    I also mentioned a number of times right from the start about simplifying your design to start with but you were adamant you needed your triple/quadruple borders on everything which is a pain to maintain.

    In the end you just have to get your hands dirty and dig into the code. It is a matter of practising daily and not forgetting the things that you learned. It’s just like anythng else and the more you practice the easier it gets. :)

    #156993
    Anonymous
    Inactive

    Greetings,

    I take it there are different ways to achieve the same results as I’m getting several people commenting on the page online and suggesting other ways to do it with all being different. It’s all very confusing having several suggested ways when I don’t even have the way you’ve described to do it fully understood yet, nor the basics of CSS for that matter.

    Yes, I was insistent that the page look a certain way as its look, if it ever gets finished, will reflect advertisement which will be in print form and it’s best to keep a company look consistent.

    I made the adjustments you suggested and the menu didn’t do what I expected. The letters were bolder, and I decreased the padding, but the menu produced a strange result with its width. I will post it tomorrow. As for now I’m not feeling well and need to rest the remainder of this evening.

    Thank You and Best Regards.

    #156994
    paulob
    Participant

    Hi,

    I take it there are different ways to achieve the same results as I’m getting several people commenting on the page online and suggesting other ways to do it with all being different

    There are often many ways to do the same thing in CSS but there is always a trade off between browser support, design concept and what comes next. :) No two people will have the same approach although all should follow best practices.

    I would hazard a guess that most of the people who commented have missed your multiple borders, equal columns and subtle gradients especially the right hand side of the layout which was very awkward to achieve. Ask them to create a layout for you and I’ll pick holes in their approach :)

    However, I don’t see where you now have a problem in maintaining this as the structure is complete and all you have to worry about is placing content into your columns. You don’t need to revisit anything else that has been done.

    As I mentioned at the start this would have been better as a fluid layout so that you can scale down to mobile but that was a step too far for you to manage so we stuck to the fixed width which is a little easier for you to manage.

    I’m sorry to hear that you are unwell and its perhaps not best that you look at this until you feel a little better.

    #157068
    Anonymous
    Inactive

    I would hazard a guess that most of the people who commented have missed your multiple borders, equal columns and subtle gradients especially the right hand side of the layout which was very awkward to achieve. Ask them to create a layout for you and I’ll pick holes in their approach :)

    Only two have criticized for the hacks and state they are CSS purists. I say whatever gets the results desired. All others like what you’ve done, as do I.

    I recall you stating in a previous post that the version I created did not allow for text to be zoomed without the page coming apart. There is a similar problem with the current page as the text underneath the logo causes similar issues beyond a certain zoom level.

    As I mentioned at the start this would have been better as a fluid layout so that you can scale down to mobile but that was a step too far for you to manage so we stuck to the fixed width which is a little easier for you to manage.

    Everyone I know, and they are within my target audience, uses tablets now. I don’t see mobile as a necessity in this case.

    I’m sorry to hear that you are unwell and its perhaps not best that you look at this until you feel a little better.

    I appreciate your concern, but better is not something I will get and time is not on my side. I’m already behind on this project and missed one deadline. I am hoping to get it done in the next few weeks and beyond that someone else can take over the organization.

    #157072
    paulob
    Participant

    Hi Michael,

    I should point out that apart from the IE7 specific code in the conditional comments there were no actual hacks in the page so I’m not quite sure what you (or others) mean by hacks as such. The IE7 specific code is not something I would normally have used anyway as I felt it looked fine with simple borders. :)

    The only validation error in the main css is from normalise.css and not the code I gave.

    In the end its just basically two columns and the code is pretty clean for what it does. I’d be interested in knowing what others thought was hacky but I hazard a guess it would be their lack of understanding of CSS that falls short. Using :before and :after to add decoration elements is a perfect example of best use css and not a hack in any way.

    As I said above you don’t really need to worry about what went before and just put the content in the columns as required.

    Unlike your other example this page won’t break when text is resized because there are no fixed heights on the content and text can grow freely.

    #157079
    Anonymous
    Inactive

    Greetings Paul,

    I’m only going by the many different inputs given. All that is confusing in itself and I am only paying heed to what you say as you’ve been my source of help in this. I don’t know what is a hack and what isn’t, but if it achieves what I want, I honestly don’t care.

    If you will text zoom the page here then text zoom your page here you will see the former does break apart. I’ve checked the coding of both to see what is different with mine and see none.

    I forgot to mention the menu adjustments. As you can see here the menu doesn’t fit the width now. I’ve played with the various settings to try to compensate, but nothing.

    Best Regards.

    #157080
    paulob
    Participant

    Hi Michael,

    Your page zooms pretty well before breaking. Most sites won’t scale forever.:)

    You can fix the text busting out of the logo by adding a width to the logo anchor.

    .logo a {width:177px}

    Regarding the menu then you can’t expect that many items to fit horizontally unless you make the text smaller and reduce the padding.

    I’m not quite sure what you want it to look like as it was fitting nicely before. One thing to remember though is that should users resize their text once again then the menu will wrap anyway so you shouldn’t be trying to force it into a compact little space unless it was only one or two items.

    #157140
    Anonymous
    Inactive

    You can fix the text busting out of the logo by adding a width to the logo anchor.

    .logo a {width:177px}

    Yes, I figured that out last night after posting. Pretty straight forward when I am able to have a clear mind.

    I think at this stage I need to scout for someone to hire who can complete the basics of the site. I really just need a secure contact page and a few simple additions to what is in place but that little amount is more than I can handle as I am increasingly unable to be at my pc for long stints. Should I improve to the point I can study and comprehend the coding, that would be a premium.

    I appreciate what you’ve done, but regret I’m unable to follow at this point.

    Best Regards.

Viewing 14 posts - 16 through 29 (of 29 total)
  • The forum ‘CSS’ is closed to new topics and replies.