Grow your CSS skills. Land your dream job.

Content boxes on right side of website

  • # April 15, 2008 at 5:51 pm

    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.

    # April 15, 2008 at 6:15 pm

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

    # April 15, 2008 at 6:47 pm

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

    # April 15, 2008 at 8:40 pm

    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:

    Code:

    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
    # April 16, 2008 at 6:53 am

    I suggest you use this markup:

    Code:

    SKILL SETS

    CONTACT DETALIS

    • Is semantically correct[/*:m]
    • Is clean[/*:m]
    • Is fast[/*:m][/list:u]
    # April 16, 2008 at 7:31 am

    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
    # April 16, 2008 at 8:20 am
    "Adam" wrote:
    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.

    # April 16, 2008 at 8:43 am

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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

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