Could someone help out with a piece of CSS please?

ikthius · 24-07-2007, 17:59

Hey everyone, I am making up a website for one of my mates.

I got the some bits of the site going, mainly trying to do it by CSS.

ok I got a banner for a heading, and some glass looking buttons going down the left side for links in the site.

I was wanting to put a main part to the right of these links.

I have given an image, and its the white text that I am trying to fix, I got the text moved to the side but not up.

I not used a table, but will play with one soon, but was hoping to get it done without tables.

any help?
here is one HTML and CSS code;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <LINK REL="Stylesheet" type="text/css" HREF="rick2.css">
  <TITLE> Site Map </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
<span class="banner">Ricky Waddell</span><span class="bodyheading">Site Map</span>
    <a class="nav" href="home.html">Home</a>
    <a class="nav" href="career.html">Playing Career</a>
    <a class="nav" href="videos.html">Videos</a>
    <a class="nav" href="gallery.html">Gallery</a>
    <a class="nav" href="about.html">About Ricky</a>
    <a class="nav" href="links.html">Links</a>
    <a class="nav" href="site.html">Site Map</a>

    <div class="main">testing</div>
 </BODY>
</HTML>

Code:

body    
{
    background-color:#000000;
}
.banner 
{
    display:block; 
    width:800px; 
    height:45px; 
    background-image:url(images/banner.JPG); 
    margin-top:0px; 
    text-align:center; 
    font-weight:bold; 
    text-decoration:none; 
    font-family:palatino linotype, times new roman, verdana, arial, sans-serif; 
    font-size:30px; 
    color:#fdfe98; 
    line-height:40px; 
    overflow:hidden;
}
a.nav, a.nav:link, a.nav:visited 
{
    display:block; 
    width:150px;
    height:25px; 
    background-image:url(images/button0.JPG); 
    border:1px solid #000; 
    margin-top:2px; 
    text-align:center; 
    text-decoration:none; 
    font-family:verdana, arial, sans-serif; 
    font-size:12px; 
    color:#fdfe98; 
    line-height:25px; 
    overflow:hidden;
}
a.nav:hover 
{
    color:#fdfe98; 
    background-image:url(images/button1.JPG); 
    font-weight:bold;
}
a.nav:active 
{
    color:#fdfe98; 
    background:#000000;
}

.bodyheading 
{
    position:absolute; 
    margin-left:350px; 
    font-weight:bold; 
    font-size:16pt; 
    color:#fdfe98;
}
.main
{
    display:inline;
    margin-left:180px;
    color:#ffffff;
    font-family:arial, palatino linotype, times new roman, verdana;
    font-size:11pt;
}

ik

ikthius · 25-07-2007, 23:17

ok, I just added a table and sorted it.

but could someone please tell me where I am going wrong with this piece.

its the small buttons have a shadow of a new button below it.

ik