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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Footer will not go to the bottom of the page

    Hello everyone.

    This is my first time posting on this forum. I'm very new to web design, but I hope to improve by practicing ceaselessly.

    I'm currently creating an experimental art page. For reference, please visit it at: Nefraj Studios

    It's very simple and I only just got started. The main trouble I'm having is that the footer is stuck in the middle of my page. I don't know why this is happening, but I would sincerely appreciate your help in figuring this out.

    The code is included below. I also wanted to mention that when I validate the code in an HTML validator, I get a weird error message that tells me:

    Code:
    Error Line 57, Column 209: Stray end tag script.
    
    b/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">
    
    Error Line 57, Column 209: Cannot recover after last error. Any further errors will be ignored.
    
    b/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">
    I'm not sure if this is causing the various problems I'm having with the page. I cannot find those lines in my original code, so I'm not sure where the Validator is finding this script...

    Here is the HTML code:

    Code:
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Nefraj Studios Homepage</title>
    	<link href="index.css" rel="stylesheet">
    	
    </head>
    
    <body>
    <div id="wrap">
    <header class="Logoheader">
    	<img src="NefrajL.gif" alt="Nefraj Logo">
    	<h1 style="display:none">Nefraj Studios</h1>
    </header>
    
    
    
    <aside class="Sidebar">
    
    <section>
    	<h2>Announcements</h2>
    	<p>Welcome to Nefraj Studios!</p>
    	<p>Coming soon in 2012!</p>
    </section>
    
    <div>
    	<img src="dragon_small.gif" alt="Small Nefraj Logo">
    </div>
    </aside>
    
    
    <article class="Content">
    	<header class="ContentHeader">
    		<h1>About Nefraj Studios</h1>
    		<h2>WEB.ART.DESIGN.</h2>
    	</header>
    	
    	<p><span class="LeadIn">Nefraj Studios</span> was started with one simple goal: to create. With this goal in mind, 
    	   I began drawing, designing websites, painting, and doing other forms of art as a hobby. 
    	   Pretty soon, the hobby grew into a desire to have something of my own. Thus, Nefraj Studios 
    	   was born.
    	</p>
    	
    	<figure class="ExamplePic">
    		<img src="example_reithe.jpg" alt="Picture From the Nine Rivers">
    		<figcaption>An example of a picture I created in 2011.</figcaption>
    	</figure>
    </article>
    
    <footer id="footer">
    	<p>Copyright Nefraj Studios</p>
    </footer>
    
    </div>
    </body>
    </html>
    Also, I have used the "wrap" code to center my page, but on my monitor, the page appears slightly (about 200px-ish) moved to the right on my screen instead of being completely centered. Here is the CSS code for my page. I believe that the problem is somewhere in the "wrap" element.

    Code:
    article, aside, figure, figcaption, footer, header, nav, section, summary {
    	display: block;
    }
    
    body {
    	font-size:        medium;
    	font-family:      "Myriad Pro", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    	margin:           0px;
    	background-color: #695eb9;
    	padding-left:     200px;
    }
    
    header.Logoheader {
    	padding-left:   5px;
    	padding-right:  5px;
    	padding-bottom: 0px;
    	border-bottom:  2px #695eb9 solid;
    	background:     black;
    	width:          910px;
    	
    }
    
    aside.Sidebar {
    	position:         absolute;
    	left:             0px;
    	padding-left:     0px;
    	width:            200px;
    	min-height:       640px;
    	background-color: black;
    	font-size:        small;
    }
    
    aside.Sidebar h2 {
    	color:         #3a2e94;
    	border-bottom: thin #1e1370 solid;
    	margin-bottom: 0px;
    	margin-top:    30px;
    	text-align:    center;
    }
    
    aside.Sidebar p {
    	color:        #3a2e94;
    	font-size:    small;
    	text-align:   center;
    	padding-left: 3px;
    	padding-right: 3px;
    }
    
    aside.Sidebar img {
    	margin-top:    40px;
    	margin-left:   25px;
    	margin-right:  50px;
    	border:        thin #1e1370 solid;
    }
    
    .Content {
    	margin-left:   240px;
    	padding:       20px;
    	max-width:     700px;
    	min-width:     500px;
    }
    
    .Content .LeadIn {
    	font-weight:   bold;
    	font-size:     large;
    	font-variant:  small-caps;
    	color:         #1e1370;
    }
    
    header.ContentHeader h1 {
    	margin-bottom: 0px;
    	color:         #1e1370;
    	font-size:     40px;
    }
    
    header.ContentHeader h2 {
    	margin-bottom: 30px;
    	color:         #1e1370;
    	font-size:     medium;
    }
    
    .Content p {
    	margin-top: 2px;
    	color:      #1e1370;
    	font-size:  small;
    }
    
    .ExamplePic {
    	float:         right;
    	margin-left:   0px;
    	margin-top:    0px;
    	margin-right:  30px;
    	margin-bottom: 240px;
    	
    }
    
    .ExamplePic figcaption {
    	max-width:     200px;
    	font-size:     x-small;
    	font-style:    italic;
    	margin-bottom: 5px;
    }
    
    #wrap {
    	width: 900px;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    }
    
    #footer {
    	max-width:  900px;
    	text-align: center;
    	color:      #1e1370;
    	border-top: 1px #1e1370 solid;
    }
    Thank you very much in advance! I hope this isn't a horribly noob question. I tried to find an answer for several hours before I found this forum, so I'm hoping that you guys could help me.

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    clear: both

    The position: absolute. bothered me. but simply adding clear:both; to your footer CSS seemed to solve your problem

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by waxdoc View Post
    The position: absolute. bothered me. but simply adding clear:both; to your footer CSS seemed to solve your problem
    Thank you for this!

    I tried removing the "position: absolute;" from the code, but then my <aside> flies off to the left of my monitor. Am I doing something wrong with the aside in the script?

    Thanks!

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    try soimething like ethis

    Basically created #continaerMain to hold the main/middle section together ... and then fiddled, fiddled, fiddled.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Nefraj Studios Homepage</title>
    	<link href="index.css" rel="stylesheet">
    <style type="text/css">
    article, /*aside,*/ figure, figcaption, footer, header, nav, section, summary {
    	display: block;
    }
    
    body {
    	font-size:        medium;
    	font-family:      "Myriad Pro", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    	margin:           0px;
    	background-color: #695eb9;
    	/*padding-left:     200px;*/
    	min-width: 960px;
    }
    
    header.Logoheader {
    	padding-left:   5px;
    	padding-right:  5px;
    	padding-bottom: 0px;
    	border-bottom:  2px #695eb9 solid;
    	background:     black;
    	width: 100%; min-width: 910px;
    	
    }
    
    aside.Sidebar {
    	/*position:         absolute;*/
    	display: inline-block;
    	float:left;
    	padding-left:     0px;
    	width: 20%; min-width: 195px;
    	min-height:       640px;
    	background-color: black;
    	font-size:        small;
    }
    
    aside.Sidebar h2 {
    	color:         #3a2e94;
    	border-bottom: thin #1e1370 solid;
    	margin-bottom: 0px;
    	margin-top:    30px;
    	text-align:    center;
    }
    
    aside.Sidebar p {
    	color:        #3a2e94;
    	font-size:    small;
    	text-align:   center;
    	padding-left: 3px;
    	padding-right: 3px;
    }
    
    aside.Sidebar img {
    	margin-top:    40px;
    	margin-left:   25px;
    	margin-right:  50px;
    	border:        thin #1e1370 solid;
    }
    #containerMain {	width: 95%; min-width: 950px; } 
    
    
    .Content {
    	/*margin-left:   240px;*/
    	padding: 20px;
    	margin-left:2px; 
    	width: 85%;
    	max-width:     650px;
    	min-width:     420px;
    	float: left;
    	display: inline-block;
    	background-color: white;
    }
    
    .Content .LeadIn {
    	font-weight:   bold;
    	font-size:     large;
    	font-variant:  small-caps;
    	color:         #1e1370;
    }
    
    header.ContentHeader h1 {
    	margin-bottom: 0px;
    	color:         #1e1370;
    	font-size:     40px;
    }
    
    header.ContentHeader h2 {
    	margin-bottom: 30px;
    	color:         #1e1370;
    	font-size:     medium;
    }
    
    .Content p {
    	margin-top: 2px;
    	color:      #1e1370;
    	font-size:  small;
    }
    
    .ExamplePic {
    	float:         right;
    	margin-left:   0px;
    	margin-top:    0px;
    	margin-right:  30px;
    	margin-bottom: 240px;
    	
    }
    
    .ExamplePic figcaption {
    	max-width:     200px;
    	font-size:     x-small;
    	font-style:    italic;
    	margin-bottom: 5px;
    }
    
    #wrap {
    	width: 95%; min-width: 910px;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	border: solid medium #FFF; 
    }
    
    #footer {
    	width: 100%; min-width:  910px;
    	text-align: center;
    	color:      #1e1370;
    	border-top: 1px #1e1370 solid;
    	clear:both;
    }
    </style>	
    </head>
    
    <body>
    <div id="wrap">
    <header class="Logoheader">
    	<img src="NefrajL.gif" alt="Nefraj Logo">
    	<h1 style="display:none">Nefraj Studios</h1>
    </header>
    
    <div id="containerMain">
    
    <aside class="Sidebar">
    
    <section>
    	<h2>Announcements</h2>
    	<p>Welcome to Nefraj Studios!</p>
    	<p>Coming soon in 2012!</p>
    </section>
    
    <div>
    	<img src="dragon_small.gif" alt="Small Nefraj Logo">
    </div>
    </aside>
    
    
    <article class="Content">
    	<header class="ContentHeader">
    		<h1>About Nefraj Studios</h1>
    		<h2>WEB.ART.DESIGN.</h2>
    	</header>
    	
    	<p><span class="LeadIn">Nefraj Studios</span> was started with one simple goal: to create. With this goal in mind, 
    	   I began drawing, designing websites, painting, and doing other forms of art as a hobby. 
    	   Pretty soon, the hobby grew into a desire to have something of my own. Thus, Nefraj Studios 
    	   was born.
    	</p>
    	
    	<figure class="ExamplePic">
    		<img src="example_reithe.jpg" alt="Picture From the Nine Rivers">
    		<figcaption>An example of a picture I created in 2011.</figcaption>
    	</figure>
    </article>
    </div><!--close CONTAINERMAIN-->
    
    <footer id="footer">
    	<p>Copyright Nefraj Studios</p>
    </footer>
    
    </div>
    </body>
    </html>

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    hhm2r7287 ???? hhm2r7287

    What is it with hhm2r7287 ?????


  •  

    Posting Permissions

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