Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Hi all,

    I have a problem with my page layout as when I add a heading to my content div it pushes the footer down, why?

    I have checked the dimensions and the content div is more than big enough o compensate for a header. I have uploaded my .css and html files as an example, you should see a header with something stupid in it which pushes the footer down, as a comparison I have also included the index page.

    I have tried to do my calculations over and over for the dimensions of each div and can't work it out, please help me.

    Thanks

    .css
    Code:
    body {
        margin:0px;
        padding:0px;
        background-color:white;
    }
    #wrapper {
        margin:0 auto;
        padding:0px;
        background-color:white;
        background-image: url('../images/Red-flower-background2.gif');
        background-repeat:no-repeat;
        background-position:center;
    
    }
    #container {
        margin:0 auto;
        width:950px;
        height:1100px;
        background-color: #FFFFFF;
        position:relative;
    }
    #header {
        margin:0px;
        padding:0px;
        background-image:url('../images/Header2.gif');
        background-repeat:no-repeat;
        height:130px;
        width:950px;
    
    }
    #footer {
        width:950px;
        height:75px;
        margin:0px;
        padding:0px;
        background-color:silver;
        border-top:1px red solid;
    }
    
    #header h1 {
        margin:0px;
        padding:0px;
        font-family: Verdana, sans-serif, Arial;
        display:block;
        text-indent:-800px;
        float:left;
    }
    /*Main navigaition links*/
    #nav {
        margin:0px;
        padding:0px;
        width:950px;
        height:10px;
    }
    ul#navlinks {
        margin:0px;
        padding:0px;
        position:absolute;
        right:5px;
        height:10px;
    }
    #navlinks li {
        display:inline;
        margin-left:15px;
    }
    ul#navlinks li a {
        text-decoration:none;
        color:#e70202;
        font-family: Verdana, sans-serif, Arial;
        font-size:15px;
        font-weight: bold;
        text-transform:uppercase;
    }
    #navlinks li a.active {
        color: gray;
        text-decoration:underline;
    }
    #navlinks li a:hover {
        color: #333333;
    }
    /*Navigation end*/
    #clearboth {
                clear:both;
                display:block;
                overflow:hidden;
                visibility:hidden;
                width:950px;
                height:0px;
    }
    /*Content blocks*/
    #content {
        padding:0px;
        margin:0px;
        height:885px;
        width:950px;
    }
    Index.html
    Code:
    <!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>Picture Perfect</title>
    <meta http-equiv="Content-Language" content="en" />  
    <meta http-equiv="imagetoolbar" content="no" />  
    <meta name="MSSmartTagsPreventParsing" content="true" />  
    <meta name="description" content="Description" />  
    <meta name="keywords" content="Keywords" />  
    <meta name="author" content="Marc Smedley" />  
    <link rel="stylesheet" type="text/css" href="css/master.css" />
    </head>  
        
    <body> 
     
    <div id="wrapper">
    <div id="container">
    <div id="header">
    <h1>Picture perfect</h1>
    </div>
    <div id="nav">
     <ul id="navlinks">
     <li><a href="index.html" class="active">Home</a></li>
     <li><a href="our-day.html">Our day</a></li>
     <li><a href="photos.html">Photos</a></li>
     <li><a href="credits.html">Credits</a></li>
     </ul>
    </div>
    <div id="clearboth"></div>
    <!--This section is for the main content of the page such as images and text-->
    <div id="content">
    <div class="box">
    <img class="main" src="images/group.jpg" alt="Wedding party"/>
    <h2>Welcome</h2>
    <p>There will be many memorable events in a persons life such as graduating from university 
    or even as a child learning to ride your first bike, but there will be some 
    occasions 
    which hold a special place in your heart forever. Picture perfect is a personal blog
    designed to share one such landmark in my life, my wedding day.
    <br/><br/>
    Through our story and <a href="photos.html">photos</a> I hope to convey the joy, excitement, tension (eventually relief for my part)
    and happiness experienced on the wedding day of Mr. and Mrs. Smedley.
    </p>
    </div>
    <div class="box">
    other stuff in here
    </div>
    </div>
    <div id="footer">
    Footer stuff here
    </div>
     
    </div>
    </div>
    </body>
    </html>
    Problem page
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Picture Perfect</title>
    <meta http-equiv="Content-Language" content="en" />  
    <meta http-equiv="imagetoolbar" content="no" />  
    <meta name="MSSmartTagsPreventParsing" content="true" />  
    <meta name="description" content="Description" />  
    <meta name="keywords" content="Keywords" />  
    <meta name="author" content="Marc Smedley" />  
    <link rel="stylesheet" type="text/css" href="css/master.css" />
    </head>  
        
    <body> 
     
    <div id="wrapper">
    <div id="container">
    <div id="header">
    <h1>Picture perfect</h1>
    </div>
    <div id="nav">
     <ul id="navlinks">
     <li><a href="index.html">Home</a></li>
     <li><a href="our-day.html" class="active">Our day</a></li>
     <li><a href="photos.html">Photos</a></li>
     <li><a href="credits.html">Credits</a></li>
     </ul>
    </div>
    <div id="clearboth"></div>
    <!--This section is for the main content of the page such as images and text-->
    <div id="content">
    <h2>something stupid</h2>
    </div>
    <div id="footer">
    Footer stuff here
    </div>
    
    </div>
    </div>
    </body>
    </html>

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Post a link. Giving us code is like giving us a picture of a car and asking us to figure out why it doesn't run. It can probably be done, but only if we put in a lot of time, and it's still not guaranteed to work
    m3n0tu18 and AlphaMare like this.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    If by link you are referring to a web address where the website exists then that would certainly not be possible as it doesn't....This is an incomplete design in progress purely for the purpose of testing myself in the actual html code and css, in which I am obviously failing since I am having this problem. The best I can offer is to place the files in a zip file and attach, would this be suitable?

  5. #4
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Here are the files in full.....thanks again


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:50 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com