Results 1 to 5 of 5

Thread: Top section Division: I want to divide the top of my page

  1. #1
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Top section Division: I want to divide the top of my page

    Please I know it is possible, I just want the topsection of my page to be divided into three sections with different div id.
    I am using this fixed css layout, so please specify the width for the different sections at the top also.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
    <style type="text/css">

    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }

    b{font-size: 110%;}
    em{color: red;}

    #maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }

    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }

    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }

    #contentwrapper{
    float: left;
    width: 100%;
    }

    #contentcolumn{
    margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    }

    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column in pixel*/
    margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
    background: #C8FC98;
    }

    #rightcolumn{
    float: left;
    width: 190px; /*Width of right column*/
    margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
    background: #FDE95E;
    }

    #footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }

    #footer a{
    color: #FFFF80;
    }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

    </style>

    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>

    </head>
    <body>
    <div id="maincontainer">

    <div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
    </div>
    </div>

    <div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>

    </div>

    <div id="rightcolumn">
    <div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
    </div>

    <div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

    </div>
    </body>
    </html>

    I appreciate your helps.

  2. #2
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    Basically you're asking that this div section:

    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }

    get cut up into 3 sections? Then what you would need to do is this. Create 3 new div's in your CSS like so:

    #top1 {
    width: 33%;
    height: 90px;
    float: left;
    }
    #top2 {
    width: 33%;
    height: 90px;
    float: left;
    }
    #top3 {
    width: 33%;
    height: 90px;
    float: left;
    }

    And insert them in your html code like so:

    <div id="topsection">
    <div id="top1">What you want in this chunk</div>
    <div id="top2">What you want in this chunk</div>
    <div id="top3">What you want in this chunk</div>
    </div>

    That's assuming you want all three to be of equal length. You would adjust the width parameters for each according to what you want. Just make sure they don't go over 100% (or, 840px which is the fixed with of your topsection div)

    The 'float: left;' will make them all line up with each other.

  3. #3
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks For the help

    I appreciate your help. I will try the editing immediately.
    thank you, and be blessed.

  4. #4
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Everything is working as fine as I wanted. Thanks Simcomedia.

  5. #5
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    My pleasure. Good luck!

Bookmarks

Posting Permissions

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