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