...

View Full Version : Footer will not go to the bottom of the page



zariell
02-05-2012, 12:37 AM
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. :thumbsup:

I'm currently creating an experimental art page. For reference, please visit it at: Nefraj Studios (http://www.nefrajstudios.com)

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:


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:



<!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.



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.

waxdoc
02-05-2012, 01:19 AM
The position: absolute. bothered me. but simply adding clear:both; to your footer CSS seemed to solve your problem

zariell
02-05-2012, 03:51 AM
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!

waxdoc
03-20-2012, 02:49 AM
Basically created #continaerMain to hold the main/middle section together ... and then fiddled, fiddled, fiddled.


<!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>

waxdoc
03-20-2012, 03:23 AM
What is it with hhm2r7287 ?????



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum