HTML5 and CSS3 Header Styling Issue

[KKHAN]

Hi,

I am creating the beginnings of my website with new html5 and css3 elements. However, i am having a problem with my head title not keeping inline with my logo.

See jsfiddle here:

Jsfiddle

Additionally why is the anchor tag sat the way it is and not expanded to the size of the span it is contained in.

[__]

Your images are not displaying in your fiddle. Remember to use fully qualified URLs (and that http://localhost is not reachable over the internet).

i am having a problem with my head title not keeping inline with my logo.

Because h1 uses block display by default, not inline.

why is the anchor tag sat the way it is and not expanded to the size of the span it is contained in.

In your fiddle, the anchor element is the same size as its containing span.

~ ~ ~ ~ ~ ~ ~ ~ ~ ~

You have lots of seemingly unnecessary markup. Is there a reason you have so many wrapper elements? in most cases, they are unneeded, along with all of your declared heights and widths.

<header>
    <nav>
        <!--  nav items  -->
    </nav>
    <h1>
        <a href=#><img src="your/logo.png"></a>
        My Site Name
    </h1>
</header>

pen

I highly recommend using inline-block instead of floats for not-actually-floating layouts (e.g., menu items). Likewise, you might want to look into normalize.css instead of using a css reset (resets create a lot of extra work and are often counter-productive). These decisions are up to you, however.

[KKHAN]

When i change span to display:inline-block the text sits in the middle of the bottom border :/ it has something to do with the image.

[__]

That does not happen when I try… however:

• I was suggesting using inline-block for the menu items.
• Is there a reason you are wrapping your logo and title in spans? there doesn’t seem to be. It would be much simpler to just put the logo* and title inside the h1 element. They wouldn’t need float _or_ inline-block.

* semantically, it would be better to instead “make space” (e.g., via padding) for the logo and define it as a background image on the h1, rather than using an img element. But if this concept confuses you, don’t worry about it right now.

Have you looked at the pen I made for you?

[KKHAN]

I have looked at the pen but, with no offense you have gone on a tangent than what i wanted :) I have 2 nav elements for a reason. Obviously i havent implemented it yet but i will be.

[KKHAN]

Check the Title now that the image is showing. You can see what i mean about the element sitting halfway inbetween the line.

Here

[__]

I have 2 nav elements for a reason.

In the fiddle you originally posted there is only one nav element.

If you need two, that’s fine. But it doesn’t address my question about why you have so many wrapper elements, and whether those are needed.

see what i mean about the element sitting halfway inbetween the line.

It’s because inline-block has a vertical alignment of “baseline” by default, meaning it will align with the item next to it on the same “line” the the text sits on. You can change this by setting vertical-align:bottom (or center, or top).

Again, however, note that I was not actually suggesting you use inline-block on the heading and logo. Is there a reason you are using such an elaborate structure? This

     <section id="header-logo">
            <span><a href=""><img src="http://i.imgur.com/M5GIqGb.png"/></a></span>
            <span id="header-title"><h1>My Site Name</h1></span>
        </section>

…could easily be this instead:

<section id=header-logo>
    <a href=#><img … ></a>
    <h1 id=header-title>My Site Name</h1>
</section>

…or even:

<h1 id=header-logo>
    <a href=#><img … ></a>
    My Site Name
</h1>

without compromising your current design, and it would be much cleaner (and more maintainable) markup.

[KKHAN]

I agree your method is better, i still can’t fix this original issue of mine.

I have tried changing vertical align to middle, see below.
Click Here

[__]

bottom worked best when I tried. But I am not recommending you use inline-block for the title at all.

[Paulie_D]

It should also be noted that block level elements such as h1 should not be placed inside inline elements like span.

It will fail validation for that and many other reasons.

[Author]

Posts