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 3 of 3

Thread: Modify CSS

  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Modify CSS

    Hello Coders,

    For the page - http://www.guru99.com/software-testi...rinciples.html , The top and the left index modules appear BEFORE the main content.

    Is there are a way to manipulate the code WITHOUT changing the appearance such that in code the main content appears before anything else.

    I guess need to use some content wrapper and some negative margins.

    I am very weak with CSS and looking towards the community to direct me to a solution

    Cheers
    Kris

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You may try this:

    <html>
    <head>
    <title>Negative Margins</title>
    <meta http-equiv="Content-Type" content-wrapper="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    #wrapper {
    text-align: left;
    width: 770px;
    margin: 10px auto 0 auto;
    border: 1px solid silver;
    }

    #header {
    background: red;
    padding: 10px 15px 10px 13px;
    }

    #content-wrapper {
    width: 100%;
    background: gold;
    float: left;
    margin-right: -200px;
    }

    #content-inner {
    margin-right: 200px;
    padding: 5px 15px 0 15px;
    }

    #navigation {
    width: 200px;
    float: right;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">header</div>
    <div id="content-wrapper">
    <div id="content-inner">
    <p>this is a test. this is a test. this is a test.
    this is a test. this is a test. this is a test.
    this is a test. this is a test. this is a test.
    this is a test. this is a test. this is a test. </p>
    </div>
    </div>

    <div id="navigation">
    <ul>
    <li><a href="">Day 1</a></li>
    <li><a href="">Day 2</a></li>
    <li><a href="">Day 3</a></li>
    <li><a href="">Day 4</a></li>
    <li><a href="">Day 5</a></li>
    </ul>
    </div>

    </div>

    </body>
    </html>

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is a lot of help here. Use the search facility. Single words often best when searching.

    Frank

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    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
    •