okay, so this is my updated page, the HTML/CSS are a lot cleaner
<!-- w --><a class="postlink" href="http://www.freewebs.com/chrisab508/">www.freewebs.com/chrisab508/</a><!-- w -->
okay, so if you notice on the right side, outside of the border the background color extends a little bit, I don't know where that comes from. Also, if you look VERY closely the very last link button (about the artist) it doesn't extend all the way to the border.
Thanks a lot in advance!!
Chris
this is my code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet"
type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" />
<title>Another Page</title>
</head>
<div id="container">
<body>
<div id="titlebar"><img src=http://www.webdeveloper.com/forum/archive/index.php/"titlebar.jpg" alt="Ryan Photo Art"></div>
<div id="menu">
<ul>
<li id="one"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a></li>
<li id="two"><a href=http://www.webdeveloper.com/forum/archive/index.php/"pictures.html" class="topbarklinks"> Pictures </a></li>
<li id="three"><a href=http://www.webdeveloper.com/forum/archive/index.php/"cards.html">Cards</a></li>
<li id="four"><a href=http://www.webdeveloper.com/forum/archive/index.php/"contactme.html">Contact Me</a></li>
<li id="five"><a href=http://www.webdeveloper.com/forum/archive/index.php/"bio.html">About the Artist</a></li>
</ul>
</div>
<div id="middle">
<h1> Your Text Goes here </h1>
<p>some more text</p>
</div>
<div id="footer">
<p>Copyright © 2004 <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto: <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->">Kathleen Ryan</a>
All Rights Reserved HTML/CSS/Javascript done by <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">Chris Burgner</a>
</p>
</div>
</div>
</body>
</html>
and CSS:
body {
background-image: url(background.jpg);
background-repeat: repeat-x;
}
#container {
background-color: #f5f5f5;
position:absolute;
left: 276px;
width:600px;
margin-right:-828px;
}
#titlebar {
background-color: #f5f5f5;
border: 1px solid #000;
border-bottom: none;
}
#middle {
background-color: #f5f5f5;
border: 1px solid #000;
padding: 10px 10px 10px 10px;
border-top: none;
border-bottom: none;
}
#footer {
background-color: #f5f5f5;
border: 1px solid #000;
padding-left: 10px;
padding-right: 10px;
padding-top: none;
padding-bottom: none;
font-size: 80%;
}
#menu {
background-color: #f5f5f5;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#menu ul li A:hover {
BACKGROUND: #ccc; COLOR: #000
}
#menu a:active {
BACKGROUND: #c60; COLOR: #fff
}
a:link {
color: #0000FF;
text-decoration: none;
font-size: 95%;
}
a:visited {
color: #0000FF;
text-decoration: none;
font-size: 95%;
}
a:hover {
color: darkblue; text-decoration: none;
font-size: 95%;
}
a:active {
color: #0000FF; text-decoration: none;
font-size: 95%;
}
#menu {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
}
#menu ul {
BORDER-TOP-WIDTH: 0px;
CLEAR: left;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
BORDER-RIGHT-WIDTH: 0px;
}
#menu ul li {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
TEXT-ALIGN: center;
}
#menu ul li a {
PADDING-RIGHT: 0px;
BORDER-TOP: #ccc 1px solid;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: #fff;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 10px;
BORDER-LEFT: #ccc 1px solid;
WIDTH: 118px;
COLOR: #990000;
LINE-HEIGHT: 2em;
PADDING-TOP: 0px;
BORDER-BOTTOM: #ccc 1px solid;
BORDER-RIGHT-STYLE: none;
LETTER-SPACING: 1px;
HEIGHT: 2em;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
voice-family: inherit;
}This looks vaguely familiar? (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->).
And your starting #container <div> tag should be inside the <body> tag, not outside it. And empty tags, such as <br>, <img>, <hr>, <input>, ext., should be closed via a space and forward slash, like so: <img />. Not sure if iit's required, but you might want to lower-case your CSS.
Nice job.
P.S., I'll check out the problems in a bit... I'm too lazy.
yah i know i pretty much copied a list aparts design because i liked it. But i did e mail them and ask and they said yes that I could, so i think im home free.
Chris.i Download ed netscape to cross check all my pages and the bug didn't appear in netscape but the whole thing went all the way to the top, whereas in IE it didn't, and the links were a little below the logo whereas in IE they are touching.
Chris
<!-- w --><a class="postlink" href="http://www.freewebs.com/chrisab508/">www.freewebs.com/chrisab508/</a><!-- w -->
okay, so if you notice on the right side, outside of the border the background color extends a little bit, I don't know where that comes from. Also, if you look VERY closely the very last link button (about the artist) it doesn't extend all the way to the border.
Thanks a lot in advance!!
Chris
this is my code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet"
type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"stylesheet.css" />
<title>Another Page</title>
</head>
<div id="container">
<body>
<div id="titlebar"><img src=http://www.webdeveloper.com/forum/archive/index.php/"titlebar.jpg" alt="Ryan Photo Art"></div>
<div id="menu">
<ul>
<li id="one"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a></li>
<li id="two"><a href=http://www.webdeveloper.com/forum/archive/index.php/"pictures.html" class="topbarklinks"> Pictures </a></li>
<li id="three"><a href=http://www.webdeveloper.com/forum/archive/index.php/"cards.html">Cards</a></li>
<li id="four"><a href=http://www.webdeveloper.com/forum/archive/index.php/"contactme.html">Contact Me</a></li>
<li id="five"><a href=http://www.webdeveloper.com/forum/archive/index.php/"bio.html">About the Artist</a></li>
</ul>
</div>
<div id="middle">
<h1> Your Text Goes here </h1>
<p>some more text</p>
</div>
<div id="footer">
<p>Copyright © 2004 <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto: <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->">Kathleen Ryan</a>
All Rights Reserved HTML/CSS/Javascript done by <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">Chris Burgner</a>
</p>
</div>
</div>
</body>
</html>
and CSS:
body {
background-image: url(background.jpg);
background-repeat: repeat-x;
}
#container {
background-color: #f5f5f5;
position:absolute;
left: 276px;
width:600px;
margin-right:-828px;
}
#titlebar {
background-color: #f5f5f5;
border: 1px solid #000;
border-bottom: none;
}
#middle {
background-color: #f5f5f5;
border: 1px solid #000;
padding: 10px 10px 10px 10px;
border-top: none;
border-bottom: none;
}
#footer {
background-color: #f5f5f5;
border: 1px solid #000;
padding-left: 10px;
padding-right: 10px;
padding-top: none;
padding-bottom: none;
font-size: 80%;
}
#menu {
background-color: #f5f5f5;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#menu ul li A:hover {
BACKGROUND: #ccc; COLOR: #000
}
#menu a:active {
BACKGROUND: #c60; COLOR: #fff
}
a:link {
color: #0000FF;
text-decoration: none;
font-size: 95%;
}
a:visited {
color: #0000FF;
text-decoration: none;
font-size: 95%;
}
a:hover {
color: darkblue; text-decoration: none;
font-size: 95%;
}
a:active {
color: #0000FF; text-decoration: none;
font-size: 95%;
}
#menu {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
}
#menu ul {
BORDER-TOP-WIDTH: 0px;
CLEAR: left;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
BORDER-RIGHT-WIDTH: 0px;
}
#menu ul li {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
TEXT-ALIGN: center;
}
#menu ul li a {
PADDING-RIGHT: 0px;
BORDER-TOP: #ccc 1px solid;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: #fff;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 10px;
BORDER-LEFT: #ccc 1px solid;
WIDTH: 118px;
COLOR: #990000;
LINE-HEIGHT: 2em;
PADDING-TOP: 0px;
BORDER-BOTTOM: #ccc 1px solid;
BORDER-RIGHT-STYLE: none;
LETTER-SPACING: 1px;
HEIGHT: 2em;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
voice-family: inherit;
}This looks vaguely familiar? (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->).
And your starting #container <div> tag should be inside the <body> tag, not outside it. And empty tags, such as <br>, <img>, <hr>, <input>, ext., should be closed via a space and forward slash, like so: <img />. Not sure if iit's required, but you might want to lower-case your CSS.
Nice job.
P.S., I'll check out the problems in a bit... I'm too lazy.
yah i know i pretty much copied a list aparts design because i liked it. But i did e mail them and ask and they said yes that I could, so i think im home free.Chris.i Download ed netscape to cross check all my pages and the bug didn't appear in netscape but the whole thing went all the way to the top, whereas in IE it didn't, and the links were a little below the logo whereas in IE they are touching.
Chris