Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML CSS basic HELP for coursework

    Hi
    It is really important for my coursework. I hope anyone of you can help.

    what i need to do is. i need to convert the .gif image into a proper design. i have done most parts. but i do not know how to position the columns and the navigation. it needs to be the same as in the image.

    Thank you very very much

    I really need your help!!!!
    Please please please
    Attached Thumbnails Attached Thumbnails HTML CSS basic HELP for coursework-screenshot.gif  
    Attached Files Attached Files

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This should get you started. The example uses float:left so you will need to change that. To what exactly I will leave up to you to find out.

    http://bonrouge.com/2c-hf-fixed.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Just to add to what _Aerospace_Eng_ said, you can couple floats with margins to help space those 'floating objects'.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    It looks like you need a "standard" header, 2 column, footer layout.

    Maybe use this demo "skeleton" layout as a starting guide.

    It contains a header bar, a main content bar on the left (width 70%), a right side bar (width 30%) and a footer bar all centered on the web page.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 900px;
                    margin: 0px auto 0px auto;
                    border: 1px solid red;
                }
                #header {
                    border: 1px solid blue;
                }
                #content {
                    width: 70%;
                    float: left;
                }
                #content .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                }
                #sidebar {
                    width: 30%;
                    float: right;
                }
                #sidebar .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                    border: 1px solid green;
                }
                #footer {
                    clear: both;
                    border: 1px solid black;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">
                    <h1>HEADER and NAVIGATION BAR</h1>
                </div>
                <div id="content">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>LEFT MAIN CONTENT COLUMN</h1>
                    </div>
                </div>
                <div id="sidebar">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>RIGHT SIDE BAR COLUMN</h1>
                    </div>
                </div>
                <div id="footer">
                    <h1>FOOTER BAR</h1>
                </div>
            </div>
        </body>
    </html>
    Last edited by bullant; 04-19-2011 at 03:45 AM.

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up thank u

    thanks guys

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •