PDA

View Full Version : HTML Copyright Placement



Wallace
Apr 2nd, 2007, 05:38 PM
Hello,

I've currently been trying to create my own HTML webpage using Notepad. I've finished all of the coding, except for the copyright. I've got the copyright to align to the bottom of every page correctly, but everytime (in FireFox) when I only have one tab open, the copyright moves outside of its place where it is supposed to be. When I have two or more tabs open, the copyright is fine. I don't have a clue on how to fix this problem, it seems very weird, I know nobody who has got the this problem before.

Click (http://www.freewebs.com/wfolio/)

I will edit this post with a screenshot in one minute.

Screenshot (http://sixpop.com/images/images/93691637.png)

Thanks for reading.

Excavator
Apr 2nd, 2007, 06:53 PM
Goodmorning Wallace,
To start with, you have no DocType. Read about DocTypes at the link in my sig below. See what the validator has to say (http://validator.w3.org/check?verbose=1&uri=http://www.freewebs.com/wfolio/)about your site.
==
Found this in #main:

float:center; There's no such thing.
==
#copyright is going where you told it. You absolutely positioned it 217pixels off the bottom of the browser window. Read about absolute positioning here. (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)
==
You have inline styling for #dropmenudiv but it comes after you close your document.
You also have some js down there.
Those go up inside the head tags.
==
Don't use <table>
==


Try this to start:
In your markup make change your body tag:
</style>
<body><!--delete inline style here-->
<div id="main"><div i

Copy/Paste this CSS to yours and compare the differences:

body { /*style body here instead of inline*/
text-align: center;
background-color: #75A8DC
}
* {
margin: 0;
padding: 0;
border: none;
}
#main {
background-color: #F0F0F0;
margin: 0 auto; /*centers your page*/
width:800px;
height:600px;
border:1px solid #5780A9;
font-family: Tahoma; font-size:11px;
color: #000;
padding:4px 4px 4px 4px;
}

#main a { text-decoration:none; color: #919191; }
#main a:hover { text-decoration:none; color: #5780A9; }

#header {
background-image:url(http://sixpop.com/images/images/96903255.png);
border-bottom:1px solid #D0D0D0;
height:104px;
margin:-4px;
}
#header2 {
background-image:url(http://sixpop.com/images/images/8790142.png);
border:1px solid #D0D0D0;
height:19px;
margin:-4px;
text-align:right;
}
#header2 a { padding:0px 3px 0px 3px; vertical-align: middle; }
#notice { background-color: #F7F7F7; border:1px solid #D0D0D0; width:300px; height:100px; padding:4px 4px 4px 4px; color: #919191; }

#news {
width:400px;
float: left; /*I floated this so you could put content next to it*/
padding:4px 4px 4px 4px;
color: #919191;
}
#copyright {
background-color: #FFF;
border:1px solid #D0D0D0;
height:15px;
color: #919191;
font-size:10px;
padding:2px 0px 0px 0px;
width:798px;
margin: 368px 0 0 0;
}

Use floats and margins instead of absolute positioning. Read about floats here. (http://css.maxdesign.com.au/floatutorial/)

Excavator
Apr 2nd, 2007, 07:02 PM
I misunderstood where you wanted your #copyright.

To get it below #main:
make your markup read like this:

<div id="news"><B>Welcome!</B><br><br>I'm just testing my website. This website was made using Notepad.
</div>
</div>
<!--deleted /table-->
<div id="copyright">Copyright Wallace & WEBSITE-NAME 2007. Best viewed in <a href="http://getfirefox.com"><B>FireFox</B>.</div>
</body> <!--closed body-->
</html>

and your CSS like this:

#copyright {
background-color: #FFF;
border:1px solid #D0D0D0;
height:15px;
color: #919191;
font-size:10px;
padding:2px 0px 0px 0px;
width:798px;
margin: 20px auto 0 auto; /*makes it go 20px below #main and centers it*/
}

There are a lot of other things the validator will find for you - check the links in my sig.

Wallace
Apr 2nd, 2007, 07:21 PM
Thanks. Do the page(s) look fine now?

Excavator
Apr 2nd, 2007, 08:15 PM
No, not yet.

Look at this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Wallace - Index</title>
<style type="text/css">
body {
text-align: left;
background-color: #75A8DC;
color: #919191;
}
* {
margin: 0;
padding: 0;
border: none;
}
#main {
background-color: #F0F0F0;
margin: 10px auto;
width:800px;
height:600px;
border:1px solid #5780A9;
font-family: Tahoma;
font-size:11px; color: #000;
padding:4px 4px 4px 4px;
}
#main a { text-decoration:none; color: #919191; }
#main a:hover { text-decoration:none; color: #5780A9; }
#header {
background-image:url(http://sixpop.com/images/images/96903255.png);
border-bottom:1px solid #D0D0D0;
height:104px;
padding:0px;
margin:-4px;
}
#header2 {
background-image:url(http://sixpop.com/images/images/8790142.png);
border:1px solid #D0D0D0;
height:19px;
margin:-4px;
text-align:right;
}
#header2 a { padding:0px 3px 0px 3px; vertical-align: middle; }
#notice {
background-color: #F7F7F7;
border:1px solid #D0D0D0;
width:300px;
height:100px;
padding:4px 4px 4px 4px; color: #919191;
}
#news {
width:400px;
padding:4px 4px 4px 4px;
color: #919191;
float: left;
}
#copyright {
background-color: #FFF;
border:1px solid #D0D0D0;
height:15px;
color: #919191;
font-size:10px;
padding:2px 0px 0px 0px;
width:798px;
margin: 465px auto 0 auto;
text-align:center;
}
#copyright a { color: #919191; text-decoration:none; }
#copyright a:hover { color: #5780A9; text-decoration:none; }
</style>
</head>
<body>
<div id="main">
<div id="header">
<img src="Wallace%20-%20Index_files/96903255.png" alt="logo">
</div>
<div id="header2">
<a href="http://www.freewebs.com/wfolio/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu1, '100px')" onMouseOut="delayhidemenu()"><b>Links</b></a>
<a href="http://www.freewebs.com/wfolio/contact.html">Contact</a> <a href="http://www.freewebs.com/wfolio/about.html">About</a>
</div>
<div id="news">
<p><b>Welcome</b><br><br>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nam faucibus erat eget mauris. Aliquam
nulla. Proin turpis est, posuere eget, rutrum nec, suscipit eu, tortor.
Donec non neque ac mauris fermentum accumsan. Donec adipiscing rhoncus
purus. Morbi blandit ornare metus. Sed felis massa, bibendum ut,
ullamcorper quis, commodo ac, lacus. Quisque elementum pulvinar urna.
Proin et ante. Vestibulum mauris nibh, interdum in, nonummy nec,
vulputate sit amet, turpis. Fusce ac lacus. Donec pretium. Nullam ac
enim commodo neque nonummy tincidunt. In at purus. Nam tincidunt
euismod mi. Cras nisl.l
</p>
</div>
<div id="copyright">Copyright � Wallace &amp; WEBSITE-NAME 2007. Best viewed in <a href="http://getfirefox.com/"><b>FireFox</b>.</a></div>
<!--closes main--></div>
</body>
</html>

That validates.