Hi all,

 

I created a few simple websites in the past but that's my first html5 website. I have been reading about new semantic elements. I'm wondering about the organisation of the website header. How would I correctly organise a simple page header like the one below:

 

 

------------------------------------------------------------------------------
|                         |                                                   |
|          Logo           |                  item1   item2   item3 item4      |
|_________________________|___________________________________________________|
 

 

 

 

The main box is the header <header></header>. Now I'd like to split the inside. Would I still use divs with classes?

The left box will only contain a logo image centred around the area, while the right hand section would contain menu items. I know

there's a new tag called <nav>.

In html4 I would probably do something like that:

 

<div id="header">
    <div class="left_header></div>
    <div class="right_header></div>
</div>

CSS:

.left_header {
width: 300px;
float: left;
}

.right_header {
width: 550px;
float: right;
}
 

 

 

Now how would I do it in html5? Thank you

You could try

<header>
      <img src="img/yourimg.png" class="logo"><!-- example logo image -->
      <nav class="main-nav">
            <ul>
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
                <li><a href="#">Item4</a></li>
            </ul>
        </nav>
</header>

This is a watered down version of something I'm working on that's grid based so both the HTML and CSS might not necessarily reflect what you're aiming to achieve.

 

Just to give you an example of the CSS code I'm using

.container /* not in the HTML example above */
    max-width: 1224px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; }

header {
    width: 100%;
    padding: 24px 0px; }

.logo {
    width: 49.5%;
    float: left; }

.nav {
    width: 49.5%;
    float: right;
    margin-right: 0px; }

.nav ul {
    list-style: none;
    display: inline-block; }

.nav ul li {
    display: inline-block;
    padding: 0px 12px; }

The above is just a quick hack job for illustrative purposes. There are some wizards on here that can explain better but this is just some food for thought based on something I'm working on that's similar to what you want to achieve.

 

On a side note, if you're delving into HTML5, look into section and article. Don't get too hung up on it, but they're very useful. Check out HTML Doctor for some great examples.

Edited August 24, 201313 yr by 4li4s

I tried you way there 4li4s...but for some reason it didn't work. I only tried it in jsfiddle so maybe there was an issue w/ that site and the code...don't know.

 

Anyway, here's what I worked out in jsfiddle...seems to work:

 

 

<div id="header">
    <div class="left">
        <a href="#"><img src="http://webitect.net/wp-content/uploads/2010/08/breathtaking_graphic_design_examples.jpg"></a>
    </div>
    <div class="right">
        <ul>
            <li><a href="#">Home</a>
 
            </li>
            <li><a href="#">Blog</a>
 
            </li>
            <li><a href="#">Articles</a>
 
            </li>
        </ul>
    </div>
</div>
</div>

and:

#header {
    height: 200px;
    width: 600px;
    border: 2px solid #40312E;
}
.left {
    height: 200px;
    width: 200px;
    float: left;
}
.right {
    height: 200px;
    width: 395px;

    /* change to 450px when remove borders */
    float: right;
}
.right ul {
    float: right;
    padding: 65px 30px;
}
.right li {
    display: inline;
    list-style-type: none;
    margin-top: 0;
}
.right a {
    display: inline;
    text-decoration: none;
    margin-right: 25px;
    color: #F2F2F2;
    background-color: #61788C;
    padding: 5px 10px 5px 10px;
    border:1px solid;
    border-radius:25px;
    font-size: 1.5em;
}
.right a:hover {
    display: inline;
    text-decoration: none;
    margin-right: 25px;
    color: #D9B29C;
    background-color: #40312E;
    padding: 5px 10px 5px 10px;
    border:1px solid;
    border-radius:25px;
}

Obviously, you don't need all that extra styling, I was just doing a little experimenting. But the positioning should work. At least, it works in Chrome (didn't test in all browsers admittedly).

Edited August 25, 201313 yr by Apokalupsis

Yeah, as per my post this is a snippet from a site I'm developing using Sass and a grid so taking out of context, it may not work but was more for illustrative purposes.

 

Glad you could resolve it for the OP though

Thank both of you. In html5 are we not discouraged from using elements like id="header" or 'container'/'wrapper'?

 

Instead of a separate wrapper I used body as a wrapper. Instead of using a separate id="header" I used the html5 header element:

 

body {
    width: 900px;
    margin: 0 auto;
    text-align: left;
}

header { height: 200px; }
 

 

 

etc. As I said, I am not a seasoned web designer (especially when it comes to html5) but from what I have read over the last few days, that's the direction we're all encouraged to go. At least that's what I understood from it. Am I taking it too seriously?

 

Thank you

4li4s example works fine for me as long as you remember to clear the floats (since both the logo and the nav is floating). You can do that by adding a clear:both propperty to whatever element you want under under the header

4li4s example works fine for me as long as you remember to clear the floats (since both the logo and the nav is floating). You can do that by adding a clear:both propperty to whatever element you want under under the header

 

Nice one Didn't consider the floats as it was straight from my code (with a few modifications) and I already had applied clearfix to the parent elements

 

Personally I don't use the body as a wrapper - like to keep it separated whenever possible. Failing that I give class names to body pending page layouts. You can still use id="header" if you like. I like to use as little id's as possible and would probably give it a class due to all the specificity rules.

 

 

Am I taking it too seriously?

 

Ha ha! Ask myself this regularly. Nothing wrong with being thorough, but sometimes it's your own call; take action, move along Best get stuck in with experimenting with your code and see what works best for you and your project as it always seems to change. Despite using grids, I always customise them depending on the content. You'll only find the best way for you through practice. Do post any questions up here though when confused!

4li4s example works fine for me as long as you remember to clear the floats (since both the logo and the nav is floating). You can do that by adding a clear:both propperty to whatever element you want under under the header

Man, I always forget to do that. I really need to brush up on floats.

 

Anyway, I also forgot to include the jsfiddle link (and I can no longer edit my first post). Here it is for convenience: http://jsfiddle.net/Apokalupsis/YJURX/5/

 

As to thw "wrapper issue"....

 

 

1) I think it's fine to use the html5 elements as long as it is understood that not all browsers still support it. So you have to ask who will be using this site? And when you do use html5 elements that are not widely supported cross-browser, then using the -moz- or -webkit- prefix where applicable is important IMO. That, or maybe using something like modernize.

 

2) I don't use the "body" tag as a wrapper, I like to keep it separate from containers or wrappers, using naming it something more applicable. I suppose this is an issue of preference (as well as habit maybe?)...but I'm just more comfortable that way, allows for a bit more freedom perhaps.

Edited August 25, 201313 yr by Apokalupsis

Good point from Apokalupsis about using modernizer. Or as a minimum you should apply display:block; properties to the html5 block element tags. That way your design wouldn't totally break in older browsers