www.webdeveloper.com
Results 1 to 13 of 13

Thread: Header, Footer, Content problems?

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    7

    Header, Footer, Content problems?

    Hi, I'm new to having a footer on my page. I've always just used a Header. But using a Footer is confusing me a lot.
    I've managed to find a great template which I'm using but I'm still having some problems.

    There is an annoying space between my header and the start of my content which I don't think should be there.

    The main problem though is that the content and footer parts are overlapping each other.

    This is the link to my site so you can see what I mean: http://www.ohmygawd.co.uk

    This is my css code:

    Code:
    html,body {
    	margin:0;
    	padding:0;
    	height:100%; /* needed for container min-height */
    	background:#FFF;
    	
    	font-family:arial,sans-serif;
    	font-size:small;
    	color:#000;
    }
    
    h1 { 
    	font:1.5em georgia,serif; 
    	margin:0.5em 0;
    }
    
    h2 {
    	font:1.25em georgia,serif; 
    	margin:0 0 0.5em;
    }
    	h1, h2, a {
    		color:#000;
    	}
    
    p { 
    	line-height:1.5; 
    	margin:0 0 1em;
    }
    
    div#container {
    	position:relative; /* needed for footer positioning*/
    	margin:0 auto; /* center, not in IE5 */
    	width:1000px;
    	background:#FFF;
    	
    	height:auto !important; /* real browsers */
    	height:100%; /* IE6: treaded as min-height*/
    
    	min-height:100%; /* real browsers */
    }
    
    div#header {
    	border-bottom:0px;
    }
    	div#header p {
    		font-style:italic;
    		font-size:1.1em;
    		margin:0;
    	}
    
    div#content {
    	padding:1em 1em 5em;
    	color:#000
    }
    	div#content p {
    		text-align:justify;
    		padding:0 1em;
    		
    	}
    
    div#footer {
    	position:absolute;
    	width:100%;
    	bottom:0; /* stick to bottom */
    	background:#FFF;
    	border-top:0px;
    }
    	div#footer p {
    		padding:1em;
    		margin:0;
    	}

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    OH BOY! Anyone viewing source code of your site is going to flip.

    The basic structure of an XHTML Web page is

    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>Untitled Document</title>
    </head>
    
    <body>
    </body>
    </html>
    PLEASE fix your HTML structure! What are the DOCTYPE and the <HTML> tags doing in the middle of the <BODY>, etc. ??????
    Last edited by auntnini; 10-18-2012 at 06:30 PM. Reason: typo

  3. #3
    Join Date
    Oct 2012
    Posts
    7
    Ok I can't edit the first post, but I've put the wrong link in.

    This is where the problem is http://ohmygawd.co.uk/index1.php , take no notice of the index file at the moment that will get changed.

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    NEED TO FIX this (you probably were copy/pasting or something)
    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" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>CSS Layout - 100% height</title>
    	<link rel="stylesheet" type="text/css" href="http://ohmygawd.co.uk/style.css" />
    </head>
    
    <body>
    
    
    		<div id="header">
    <html>
    <head>
    
    <meta http-equiv="Content-Language" content="en-us">
    <title>OH MY GAWD : Colourful, Funky Jewellery</title>
    <meta name="keywords" content="oh,my,gawd,o,love,heart,sweet,ring,jewellery,sweets,cute,funky,kawaii,buy,online,shopping,shop,hipster,girls,boys,culture, ">
    <meta name="description" content="Oh My Gawd Jewellery. Funky Jewellery for those who want to get noticed. But also for those who want classic looking pieces of jewellery. If your a Hipster or just want to look a bit different and make  statement Oh My Gawd is the place to shop.">
    <meta name="author" content="Tom">
    <meta name="copyright" content="march 2012">
    <meta name="contact" content="ohmygawd1@hotmail.co.uk">
    <LINK REL=stylesheet HREF="http://ohmygawd.co.uk/style.css" TYPE="text/css">
      
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"> 
    <!--
    .style1 {color: #000000}
    body,td,th {
    	color: #FFF;
    }
    -->
    </style></head>
    
    
    <body>
    <div style="position: absolute; top: 35px; left: 553px; width: 162px; padding: 0px; height: 90;"><img src="http://ohmygawd.co.uk/images/LOGO.png" alt="" width="220" height="106" border="0" align="absmiddle" /></div>
    <div style="position: absolute; top: 140px; left: 193px; width: 349; padding: 0px; height: 90;"><img src="http://ohmygawd.co.uk/images/NAVIGATION.png" alt="" width="976" height="72" border="0" align="absmiddle" /></div>
    </body>
    </html>
    
    		</div>
    
    		<div id="content">
    			
                <!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>Untitled Document</title>
    </head>
    <html>
    <head>
    
    <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="http://ohmygawd.co.uk/Images/panda.png"
    var image2=new Image()
    image2.src="http://ohmygawd.co.uk/Images/dragonfly.png"
    var image3=new Image()
    image3.src="http://ohmygawd.co.uk/Images/thanks.png"
    //-->
    </script>
    </head>
    <body>
    <div style="position: absolute; top: 247px; left: 193px; width: 349; padding: 0px; height: 90;"><img src="firstcar.gif" name="slide" width="1001" height="470" /></div>
    <script>
    <!--
    //variable that will increment through the images
    var step=1
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step<3)
    step++
    else
    step=1
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500)
    }
    slideit()
    //-->
      </script>
    </body>
    </html>
    <body>
    </body>
    </html>
    			
    		</div>
    
    		<div id="footer">
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <title>OH MY GAWD : Colourful, Funky Jewellery</title>
    <meta name="keywords" content="oh,my,gawd,o,love,heart,sweet,ring,jewellery,sweets,cute,funky,kawaii,buy,online,shopping,shop,hipster,girls,boys,culture, ">
    <meta name="description" content="Oh My Gawd Jewellery. Funky Jewellery for those who want to get noticed. But also for those who want classic looking pieces of jewellery. If your a Hipster or just want to look a bit different and make  statement Oh My Gawd is the place to shop.">
    <meta name="author" content="Tom">
    <meta name="copyright" content="march 2012">
    <meta name="contact" content="ohmygawd1@hotmail.co.uk">
    <LINK REL=stylesheet HREF="http://ohmygawd.co.uk/style.css" TYPE="text/css">
      
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"> 
    <!--
    .style1 {color: #000000}
    body,td,th {
    	color: #FFF;
    }
    -->
    </style></head>
    
    
    <body>
    <div style="position: absolute; top: 6px; left: 193px; width: 349; padding: 0px; height: 90;"><img src="http://ohmygawd.co.uk/images/FOOTER.png" alt="" width="976" height="100" border="0" align="absmiddle" /></div>
    </body>
    </html>
    		</div>
    	</div>
    
    
    	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		_uacct = "UA-472607-1"; urchinTracker();
    	</script>
    
    </body>
    <!-- Hosting24 Analytics Code -->
    <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
    <!-- End Of Analytics Code -->
    Last edited by auntnini; 10-18-2012 at 06:57 PM. Reason: add color

  5. #5
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    need to correct basic HTML structure

    Was going to highlight errors with color, but there are too many!
    Code:
    <HTML>[outer shell]
    
    <HEAD>
    [contains instructions and info about page, such as <META ...> tags and links to external CSS and JS files, which do not display in  browser window]
       <title> ....</title>
    </HEAD> [closing tag]
    
    <BODY>
    [contains page content, which display in browser window]
    </BODY> [closing tag]
    
    <HTML>  [closing tag]

  6. #6
    Join Date
    Oct 2012
    Posts
    7
    See I know you got that from the page source. But my actual file for that page looks like this.

    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" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>CSS Layout - 100% height</title>
    	<link rel="stylesheet" type="text/css" href="http://ohmygawd.co.uk/style.css" />
    </head>
    <body>
    
    
    		<div id="header">
    <?php include("header.php"); ?>
    
    		</div>
    
    		<div id="content">
    			
                <?php include("slider.php"); ?>
    			
    		</div>
    
    		<div id="footer">
    <?php include("footer.php"); ?>
    		</div>
    	</div>
    
    
    	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		_uacct = "UA-472607-1"; urchinTracker();
    	</script>
    
    </body>

  7. #7
    Join Date
    Oct 2012
    Posts
    7
    Can you help me instead being rude please. I stated in my first post, I'm new this, expect mistakes. Its why I'm on here asking for help.

  8. #8
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    I was NOT rude! I pointed you in right direction!

  9. #9
    Join Date
    Oct 2012
    Posts
    7
    It read that way. Anyway, Honestly It hasn't helped could you maybe simplify it please.

  10. #10
    Join Date
    Aug 2012
    Posts
    155
    Addin a footer to your page is not the problem. The problem is that you have 5 <head></head> tags, 5 <bod></body> tags and 4 <html></html> tags. This basically means that you are creating 4 / 5 HTML pages within one page. I don't even know where to start to help you until you sort all your basic coding out.

    All I can suggest is that you strip everything out of your code and start a new page with one set of <html>,<head> and <body> tags then copy and paste your required content into the <body> section as an html page should be formatted. Once you have this working you can take out the sections from the page and save them into your header and footer ect files and include the once again.

  11. #11
    Join Date
    Oct 2012
    Posts
    7
    Right so my code is basically a bit of a mess at the moment Ha. Right i'll try and start over and then if I still cant fix it ill post up the code I've redone. Thanks

  12. #12
    Join Date
    Oct 2012
    Posts
    7
    Sorry for double posting.

    I've used a different tutorial online and even though I think the coding is better, it still doesn't work properly in that the header, content and footer still overlap. This time I've not used a style CSS as it wasn't part of the tutorial.

    here are my codes

    Header:

    Code:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html>
    <head>
    <title>Oh My Gawd - Jewellery</title>
    </head>
    <body>
    <div style="position: absolute; top: 35px; left: 553px; width: 162px; padding: 0px; height: 90;"><img src="http://ohmygawd.co.uk/images/LOGO.png" alt="" width="220" height="106" border="0" align="absmiddle" /></div>
    <div style="position: absolute; top: 140px; left: 193px; width: 349; padding: 0px; height: 90;"><img src="http://ohmygawd.co.uk/images/NAVIGATION.png" alt="" width="976" height="72" border="0" align="absmiddle" /></div>
    Content:

    Code:
    <?php include("headerexample.php"); ?>
    </br>
    Neaga Jeil Jal Nalga
    </br>
    <?php include("footerexample.php"); ?>
    Footer:

    Code:
    <div style="position: absolute; top: 6px; left: 193px; width: 349; padding: 0px; height: 90;"><img src="http://ohmygawd.co.uk/images/FOOTER.png" alt="" width="976" height="100" border="0" align="absmiddle" /></div>
    
    </body>
    
    </html>
    I have just done what the tutorial said, Thanks.

  13. #13
    Join Date
    Aug 2012
    Posts
    155
    Firstly, even if the tutorial has inline CSS, move it out to a separate stylesheet and give each div a name. Secondly remove the positioning from the styles (there seems to be a trend for using position: absolute it all styles at the moment and I don't know why as not required that much and causes problem). Use floating and margins instead.

    I was going to sort it into a working example for you but there is another fatal flaw in your code and that is that your div styles have one width but the images you are using inside these divs have larger widths so won't fit so I am stuck as to how to do this for you with the information provided (for example in your footer, the div is set to a width of 349px but the footer.png image is 976px wide).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles