Grow your CSS skills. Land your dream job.

{Solved}No Idea where i am going

  • # June 25, 2009 at 8:31 am

    Guys, need help here.

    i don’t know where i am missing but when ever i re-size my broswer the content inside the div tags changes it position and html goes messy..

    here is my CSS

    Code:
    body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    margin: 0px;
    padding: 0px;
    text-align:center;
    background-color: #eeeeee;
    background-image:url(images/backGroundFade-gray.gif);
    background-repeat:repeat-y;
    background-position:center;
    }
    #logo {
    width: 200px;
    height:90px;
    margin: 0 auto;
    padding: 0 10px 0 70px;
    background: url(images/Retail.jpg) no-repeat left top;
    margin-left:138px;
    }
    #logo ul {
    background: url(images/eZ-Publish-Website-Design.gif);
    height:111px;
    margin-top:-100px;
    margin-left:600px;
    background-repeat:no-repeat;
    }
    #logo li {
    list-style: none;
    background-image:none;
    margin-top:50px;
    margin-left:50px;

    }

    h1 {
    margin-top:65px;
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 12px;
    color:#4d728a;
    }
    h2 {
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 15px;
    color:#FF0000;
    text-align:center;
    }
    #line {
    background-image:url(images/line.jpg);
    background-repeat:repeat-x;
    width:1000px;
    margin-top:20px;
    background-color: #636C94;
    }

    /* Menu start here */
    #menu {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    }

    #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #menu li {
    display: inline;
    }

    #menu a {
    float: left;
    height: 25px;
    margin: 0;
    padding:5px 20px 0px 50px;
    text-decoration: none;
    text-transform: capitalize;
    background: url(images/Subscribe.jpg) no-repeat center;
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 12px;
    color:#000000;
    }

    #menu a:hover {
    color:#FF0000;
    }
    /* Body start here */
    #Content ul {
    list-style: none;
    background-image: url(images/retail_store.gif);
    background-repeat:no-repeat;
    height:361px;
    margin-left:138px;
    padding:0px 0px 0px 7px;
    }
    #Content ul li {
    display:block;
    margin-left:380px;
    margin-top:5px;
    background-color: #F1F0EF;
    height: auto;
    width: auto;
    width: 41%;
    border: 1px solid #000000;
    }

    and HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    Rob
    # June 25, 2009 at 8:42 am

    you don’t by chance have a live example do you :D

    Welcome to the forums btw :)

    # June 25, 2009 at 8:58 am

    let me host and than u will be able to see the problem…. and thanks for your welcome

    # June 29, 2009 at 12:04 pm

    Guys here i have hosted the site,

    http://chakkapayyan.org/del/home.html

    Plz help me. if there are any kind of suggestion, they are welcome too!!!

    Thanks in advance!!!

    Rob
    # June 30, 2009 at 5:34 am

    Hey :)

    Thanks for the live version it works so much better when you can see it :)

    Now for the bad news…

    Really sorry to say this but its such a mess it would be quicker to start again :S But don’t be disheartened you are nearly there with it all.

    I just ran it though the http://validator.w3.org and came up with 20 errors and 2 warnings. Its always good to validate your code, even if it doesn’t validate fully its a great bug catcher.

    What I would recommend is for you to check out some PSD to HTML video tutorials, this will give you a good idea of how to transfer a design into HTML/CSS from your design.

    http://css-tricks.com/video-screencasts … rt-1-of-3/
    http://net.tutsplus.com/site-builds/fro … p-by-step/

    try and get your head around positioning, using margin to position things is bad. (I should make a macro for this)

    http://alteredaspect.info/the-art-of-css-positioning/

    I hope these shed lots of light! I am sure they will :D

    # June 30, 2009 at 11:06 am

    Um…couple of things there!

    Unfortunately, there doesn’t seem to be anything right for you to work out from. As Robski said, it’s probably easier to start again.

    A few quick pointers…

    Set your background in your body tag, then create a wrapping div to hold everything in place according to that background. In other words, your background white area is about 1000px wide, so create a wrap div that’s approx 970px wide and auto margin it to center. This means you can now nest everything within this div without having to push them in from the edge of the screen – the wrap will do this for you.

    Your header div is supposed to be just that – for your header. It seems however you have nested everything on the page within it. Limit its content to just the header stuff, then create further ‘content’ and ‘footer’ divs for the rest. All three should be relatively positioned so they’ll stack nicely on top of one another. Robski has some excellent articles on positioning.

    Try to avoid using padding for positioning – different browsers render padding in different ways. If possible avoid it altogether, although this can be difficult. You also seem to be unconciously relying on your content overflowing some of your divs in order to be visible. Make your divs as big as they need to be to hold their content (+padding!) and you can delve into overflow properties later. Chris did an article on overflowing not too long ago.

    Be careful with how you name your elements, an id should be unique and only appear once per page. Classes can appear as many times as you like.

    Best of Luck! :)

    # July 1, 2009 at 10:23 am

    My presonal Thanks to both of you and surely will do it from the start and now will be more careful.

    Thanks Again, your help is really appericated….

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

You must be logged in to reply to this topic.

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