Forums

NikeAirforce1s

Hi guys,

Ok, I'm designing and coding my first html/css layout and I've been using Chris's tutorials but I need your help now.

This is my mock up

http://www.ukbestkept.com/chandon/images/mock.jpg

And I've coded it this far..

http://www.ukbestkept.com/chandon/index2.php

As you can see, in the mock up, I have two content areas in the right column, how do I do this here?
I do have a right column in ny working design, but so far I'm lost on how to have those 2 boxes.

Am I gonna need to nest divs in my right column to achieve this? Is this semantically right?

Thanks.

Edwin

I am not an semantic-expert, but I would do it the way you suggest, nest two divs in the right column. :?

NikeAirforce1s

Yeah, hope it validates, until someone suggests something else, I'll go for it. Thanks for your time.

chriscoyier

There is nothing semantically wrong about having nested div's in your right column div. It looks like your mockup is perfectly suited for just that. I could see something like this for markup:

<div id=\"right-column\">
  <div class=\"sidebar-box\">
     <h3>Skill Sets</h3>
         .... stuff ....
  </div>
  <div class=\"sidebar-box\">
     <h3>Contact Details</h3>
        ... stuff ....
  </div>
</div>

In your CSS, h3's inside your right-column could have that shiny background plate and the sidebar-box's themselves can have the bottom-right upturned page graphic. Let us know if you need more help!

dag

I suggest you use this markup:

<div id=\"right-col\">
  <h2>SKILL SETS</h2>
  <ul>
    <li><a href=\"#\">HTML/XHTML</a></li>
    ...
  </ul>
  <h2>CONTACT DETALIS</h2>
  <ul>
    <li>Email: <a href=\"#\">chandon@mail.com</a></li>
    ...
  </ul>
</div>

[list]
[*]Is semantically correct[/*:m]
[*]Is clean[/*:m]
[*]Is fast[/*:m][/list:u]

Adam

what you've been told is spot on already, except I wouldn't have a class or id with 'right' in it, as later on you may decide the menus look better on the left hand side and change it over. This would then be confusing.

box

"Adam" said:
what you've been told is spot on already, except I wouldn't have a class or id with 'right' in it, as later on you may decide the menus look better on the left hand side and change it over. This would then be confusing.

Agreed. The id and class names should describe (as best you can) the type of content and not their position. Position is layout and styling, so non-semantic. Try to avoid using left, middle, right or any positional references when naming your classes/ids.

NikeAirforce1s

Thanks for all the inputs, I'll continue working on it :)

treehouse : what would you like to learn today?

Forums

Content boxes on right side of website