Grow your CSS skills. Land your dream job.

Page-wrap help!

  • # September 8, 2011 at 11:11 am

    I know this is an odd title because if I’m honest I have very little understanding of what I’m doing. Basically I’ve no idea how to explain how I want the page to look other than to draw it.

    This is how I’d like the page to look

    This is the css as is

    Thanks so much in advance and apologies for my awful web design knowledge!

    Bob
    # September 8, 2011 at 11:25 am

    Can you also show the HTML or maybe even a link to the webpage? It would make helping you loads easier!

    # September 8, 2011 at 11:27 am

    Ok will upload now

    # September 8, 2011 at 11:32 am
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
















    Welcome


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id convallis purus.







    Bob
    # September 9, 2011 at 10:36 am

    Ok, you have some errors in your html/css.

    First, you have a body tag in your html 2 times, so remove the first one. Next, right after the

    line, insert a div with a sidebar id, so:

    .
    Also, you have forgotten one closing

    tag, so add that just before the closing tag.

    Next, the css. Your #page-wrap width is just a bit too small to fit the sidebar and the content area. You can change it from 800 to 900px or whatever you want really of course. The #sidebar div, float it to the left instead of to the right, give it a height (or it won’t show without content) and maybe add a background-color: #A06B65; or whatever color/image you like of course. That’s pretty much it, you might wanna think of indenting your code somewhat better for easier reading.

    # September 13, 2011 at 5:39 am

    Thanks Bob, really appreciate that :)

    Bob
    # September 13, 2011 at 12:39 pm

    No problem – if you have any more questions feel free to ask me.

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".