Grow your CSS skills. Land your dream job.

inline-block vs. float

  • # September 4, 2011 at 10:11 pm

    did you remove the absolute positioning?

    # September 4, 2011 at 10:12 pm

    yes, I am changing it on the version without ap.

    # September 4, 2011 at 10:20 pm

    Can you give me a link to the version without AP?

    # September 4, 2011 at 10:29 pm

    Version 2 – No AP

    # September 4, 2011 at 10:34 pm

    @djpic – What font are you using for the menu?

    # September 4, 2011 at 10:39 pm

    The text font or the font in the sprite?

    The anchors have text in them but it is just pushed off the screen. The text you are seeing is from the sprite image. The font name is: Capitals

    # September 4, 2011 at 10:40 pm

    My example, as mentioned, did not include the shiv for IE. Do me a favor and add this little bit to that page between the footer a style in the head and the closing head tag:

    footer a {
    text-decoration: none;
    color: #000;
    }

    article, aside, figure, footer, header, hgroup,
    menu, nav, section { display: block; } /* defaults for html5 elements */



    This will correct IE6, 7, and 8 as well adjust older Firefox, etc. That’s it – that’s all that’s needed!

    Now back to your page…
    You really don’t need to center the menu. What you need is to have it start 10px from the left to compensate for the shadow. Simply put a left and right margin on #mainnav #mainnav { margin: 0 10px; } /* < -- shorthand! */
    You've already discovered the padding problems so all that remains is the vertical positioning of nav. There are a couple ways of approaching it. I personally like the way I used in my example (using absolute positioning of the nav and floating the anchors within). That had the nav inside the header and was positioned to the bottom of the header. Your current float code has the nav outside of the header, so you could position it in relation to the body, or use a negative top margin to pull it up - either will work. Try the negative top margin, so now the #mainnav margin looks like
    #mainnav { margin: -30px 10px 0; } /* < -- more shorthand! */
    So, to fix all the problems with the float page, all I had to do was change height of header to 126px and its padding to 20px 15px 0; add margin of -30px 10px 0 to #mainnav, and add 1px padding to #content. Sure beats re-doing the entire page with a different method ;)

    # September 4, 2011 at 10:44 pm

    This could be done with CSS alone without absolute positioning and with @font-face. But hey, whatever way you think is best.

    # September 4, 2011 at 11:27 pm

    @wolfcry911 – Yep, that fixed it on your layout. Also, I have seen a comment formatted like that before. That is just like an HTML if statement? What is the official name of those so I can google it? I do like the full CSS layout better the only thing holding it back was the browser compatibility, but with that shiv fix makes it worth it. I did notice that IE 8 put the dashed line at the end of the menu as well (after SignOut). Does that have something to do with IE8 not supporting last-child I take it? It is kind of funny how I started wanting to do the whole thing using CSS and then went to using images, and now I am back to using CSS. The only thing thing really that is an image is the logo. If you don’t mind, I will use more of what you did in your example instead of using all those sprites and such? I am also amazed with the matching the font type so well. is the 16px/30px is defining the size of the lower case caps and the upper case caps (and how did you know it was the capitals font?

    @ChristopherBurton – I know it can, that is what @wolfcry911 did in his example.

    # September 4, 2011 at 11:29 pm

    I still see position:absolute; so I would disagree. But everyone has different opinions as to what absolute positioning should be used for. Since you want the menu contained within the flow of the page, I would not use absolute positioning. That is my opinion.

    # September 4, 2011 at 11:32 pm

    I must not have uploaded it, just did again. I didn’t want to use AP but didn’t know of a way to do it at the time, now @wolfcry911 said to just change the padding, which I did and now it is fine.

    # September 4, 2011 at 11:33 pm

    Awesome

    # September 5, 2011 at 8:44 am

    I have seen a comment formatted like that before. That is just like an HTML if statement?
    It’s a conditional comment – the defacto standard for feeding IE fixes for several years now.

    I did notice that IE 8 put the dashed line at the end of the menu as well (after SignOut). Does that have something to do with IE8 not supporting last-child I take it?
    Yes, that’s correct. I probably should have put the border on the left and used first-child to remove it from the first. IE 7 and 8 understand first-child, but not last (IIRC). You could feed IE 6 ( 7 and 8 ) a fix with conditional comments. Or you could class the first or last anchor and target it that way.

    The only thing thing really that is an image is the logo.Which is content, so that is good. But, I don’t want you to think that background images in css are bad – they’re not. Sometimes, however, it’s just quicker, easier, lighter to use straight css.

    If you don’t mind, I will use more of what you did in your example instead of using all those sprites and such
    I don’t mind at all. I was just hoping to help you out.

    Is the 16px/30px is defining the size of the lower case caps and the upper case caps?
    No, the 16px is font-size and the 30px is line-height – which centers the font vertically within the nav – more or less. It will be 1px off from browser to browser because of the way fonts and inline boxes work. You could also not set the line-height and use top padding to center vertically. The upper and lower case caps was achieved with the font-variant: small-caps (which is in the font shorthand rule).

    and how did you know it was the capitals font?
    ;)
    Capitals should be available to anyone with MS Office installed (PC or Mac) which is a very large percentage of probable viewers. I set a fallback to Georgia if Capitals is not available and then to serif if Georgia is not available – you can change or add as many fallbacks as you like. So most of the visitors will see it the way you intended and small percentage will see something very close (and will have no idea its not your first choice). You could also use @font-face, like Christopher mentions above, to pretty much guarantee that everyone sees the same font.

    # September 5, 2011 at 8:53 am

    Here’s a change so that IE 7 and 8 (screw IE 6) don’t have the dashed border at the end. I changed the first-child to not have a border and increased its width 1px, so that on hover you wouldn’t notice the 1px offset (that could be seen when I changed the border to black). Again, this is just to show you how much is possible with css and how things can be tackled in many different ways.

    nav a {
    float: left;
    width: 159px;
    color: #eee;
    text-decoration: none;
    font: small-caps 16px/30px capitals, georgia, serif;
    text-align: center;
    border-left: 1px dashed #eee;
    letter-spacing: .04em;
    }

    nav a:first-child {
    border-left: none;
    width: 160px;
    }
Viewing 14 posts - 31 through 44 (of 44 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".