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 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question div positioning (template for website)

    i am having trouble setting out a basic template for my website when concerning divs.

    the header is fine, however i am having trouble creating a footer div as it does not go underthe previous div (mainbody div). the code is inseted below.....any sugesstions???

    html

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DMP Devices - Home</title>
    <link rel="shortcut icon" href="favicon1.ico">
    <link rel="stylesheet" type="text/css" href="css 2.css" />
    </head>


    <body style="margin:0px;"

    <div id="wholeweb">

    <div id="hcontainer">

    <center><h1>Digital Media Playback Devices (DMPD)</h1></center>

    <div id="pnum">
    <p>Call Us: 02383 384345</p>
    </div>




    <ul id="mainNav">
    <li><a href="index.html"> Index </a></li>
    <li><a href="About.html"> About </a></li>
    <li><a href="Overview.html"> Overview&nbsp;</a></li>
    <li><a href="Latest.html"> Latest </a></li>
    <li><a href="Contact.html"> Contact </a></li>
    </ul>

    <div class="clear">&nbsp;</div>

    </div>
    <br />


    <div id="Mainbody">
    <h2>Home Page</h2>
    </div>

    </div>
    <div id="footerdiv">
    thtrht
    </div>
    </body>
    </html>

    css

    @charset "utf-8";
    /* CSS Document */

    #hcontainer
    {
    background-image: url(bckimage.png);
    background-repeat:repeat-x;
    padding:0px;
    margin:0px;
    position:fixed;
    width:70%;
    left:200px;
    clear:both;
    float:left;
    z-index:5;
    }
    #wholeweb
    {
    position:relative;
    padding:0px;
    margin:0px;
    }
    #Mainbody
    {
    background-color:#CCC;
    position:relative;
    float:left;
    top:80px;
    left:200px;
    clear:both;
    width:70%;
    left:200px;

    float:left;
    height:100px;
    }
    #pnum
    {
    position:absolute;
    right:10px;
    top:0px;
    padding:0px;
    margin:0px;
    height:50px;
    width:165px;
    height: 8px;
    clear:both;
    }
    #mainNav {
    margin: 0px;
    text-decoration:none;
    text-align:center;
    font-size:15px;
    float:left;
    position:relative;
    left:50%;
    clear:both;
    }
    #mainNav li
    {
    border-width:0px;
    float: left;
    height: 100%;
    padding: 0px;
    list-style-type: none;
    position:relative;
    right:50%;

    }
    .clear
    {
    clear: both;font-size:0;line-height:0;
    }
    ul
    {
    list-style-type:none;
    padding:0px;
    margin:0px;
    text-decoration:none;
    text-color:white;
    }
    li
    {
    float:left;
    }
    a
    {
    display:block;
    width:100px;
    text-decoration:none;
    background-color:grey;
    color:#FFFFFF;
    }

    #footerdiv
    {
    background-color:#CCC;
    position:relative;
    float:left;
    height:300px;
    left:200px;
    clear:both;
    width:70%;

    }


  • #2
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    you need a clear.

    <div class="clr"></div>

    put that after your center content div and before your footer div.

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the divs still underlap/overlap one another :S

  • #4
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Did you define the clr class in your css?

    Code:
    .clr {
     width: 100%;
     clear: both;
    }
    I use this between ALL div areas that I want to stack horizontally. I don't want to leave anything to chance.

  • #5
    New Coder
    Join Date
    Oct 2011
    Location
    North Carolina
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You have quite a few coding errors.
    It may help you if you were to put your code through validation at: http://validator.w3.org/

    Here is what I found that needs corrected:

    need to close:
    <link rel="shortcut icon" href="favicon1.ico" />
    <body style="margin:0px;">

    and I would move the close div </div> right before your opening "footerdiv" to just before the closing body tag </body> thereby having the "wholeweb" div surround everything.

    Hope that helps.

  • #6
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yh its defined :S would it be possible for you to run the code in a text editor yourself and save it, open it to view the problem?


  •  

    Posting Permissions

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