Ok, I've done everything I can think of and I've looked around and haven't found anyone else that has run into this kind of problem. Maybe I'm just missing something really simple but I am at my wit's end. Umm... actually, just had an idea, but I'll put this here just in case it doesn't work. I have a navbar with a roll-over image in the back. The text links however are all the way at the top of the bar instead of in the middle of the bar. I have done all I can think to do to move them but nothing seems to make them budge from the top. Am I missing something really simple here, or is there some fix yet to be exploited? Here's my code so far. Also, if anyone has any tips on making my code more concise, all opinions and advice are welcome. =) Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dante2 Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This is my personal website for my blogs, videos, podcasts, software reviews, and such." />
<meta name="keywords" content="funny, video, blog, Dante, 2, dante2, danet2, do not, rock, God, Jesus, Music, humor, cats, catology" />
<link rel ="stylesheet" type="text/css" href="styles/dante2 styles.css" />
<script src="sIFR-2.0.7/sifr.js" type="text/javascript"></script>
<link href="sIFR-2.0.7/sIFR-screen.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<h1 class="header">Dante2</h1>
<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="view_blog.php">Blogs</a></li>
<li><a href="videos.html">Videos</a></li>
<li> <a href="podcast.html">Pod Cast</a></li>
<li><a href="software.html">Software</a></li>
<li><a href="featured.html">Featured</a></li>
</ul>
<div id="sidebar" ><!--This is the sidebar for each page.-->
<h2>Welcome</h2>
<p>Welcome to the latest revision of my web site. I have redesigned it for two reasons. 1:) I am using this as an experiment/portfolio for my works. 2:) There are several things you will need to enjoy this site:</p>
<div id="require">
A good sense of humor<br />
A love for the strange<br />
No fear of laughing<br />
No fear of crying<br />
Your own tissues (I don't share mine)<br />
A good friend to laugh/cry with<br />
</div>
<p>Why someone to cry with? Some of the content on this site is meant to hit you in the heart. To make you seriously look at yourself in the light of God's Word and cause you to ask, <span class="quote"> Am I living for God with hope and peace, or am I living on my own power and not cutting it?"</span> You decide.</p>
</div>
<div id="content"><!--This is the news section for the front page-->
<h2>Site News</h2>
<p><strong>About Me Page <em>Aug 17th</em></strong><br /> I have finally begun work on the About Me page</p>
<p>Ok, Day one. We have updated the site and we are working full swing to bring you the best and most accessible site possible.
Nuff Said for now. </p>
</div>
</div>
</body>
</html>And here's the CSS:
@font-face {
font-family: love;
scr: url(../fonts/Fortheloveofhatelight.ttf);
}
body {
background: url("../images/metal.bmp") fixed;
}
#container {
background: url("../images/container-bgnd.png") no-repeat;
width: 805px;
margin: 0 auto;
overflow: hidden;
}
.header {
background: url(../images/logo.png) no-repeat;
height: 78px;
width: 204px;
text-indent: -9999px;
}
#navbar {
list-style: none;
overflow: hidden;
width: 805px;
padding: 0;
margin-left: 1px;
}
#navbar li {
float: left;
text-align: center;
}
#navbar li a {
display: block;
background: url(../images/button.gif)no-repeat;
width: 114.5px;
height: 73px;
text-decoration: none;
font: 20px Verdana;
vertical-align: text-bottom;
}
#navbar li a:hover {
background: url(../images/button.gif) center bottom no-repeat;
}
#sidebar {
float: left;
width: 380px;
margin-left: 20px;
color: #DDD;
}
#require {
font-size: 50px;
}
#content {
float: right;
width: 340px;
margin-right: 10px;
color: #DDD;
}
#about {
float: right;
width: 380px;
margin-right: 20px;
}
#videos {
position:relative;
left: 40px;
}
.intro {
font-weight: bold;
font-family: love;
}
.soft {
color: white;
text-decoration: none;
}
h2 {
margin-bottom: 10px;
border-bottom: 2px;
}
p {
font-weight: bold;
}
#profile {
padding: 0;
margin: 0;
}
#name {
width: 150px;
}Attached is the button image. Thanks again.
