Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What's wrong with my CSS?

    I can't seem to color my sidebar navigational menu. Here is my code for CSS, home.html, and sidebar.html. Can you help me find the error?

    Thanks, Joe


    **********CSS********
    #body {
    background-color: #009900;
    font-family: "Trebuchet MS";
    }
    #table {
    list-style-position: outside;
    list-style-type: disc;
    border-spacing: 2px 2px;
    border-collapse: separate;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-family: "Trebuchet MS";
    }
    #main-con {
    position: absolute;
    top: 200px;
    left: 300px;
    border-color: #FF0000;
    border-width: 10px;
    padding: 1px;
    height:auto;
    width:500px;
    font-size: 14px;
    font-family: "Trebuchet MS";
    background-color: #000066;
    }
    #main-con a:link {color: #FFFF00;}
    #main-con a:visited {color: #00FFFF;}
    #main-con a:hover {color: #000000; background: #00FFFF; font-weight: bold;}
    #main-con a:active {color: #00FFFF;}
    #sideframe {
    position: absolute;
    top: 150px;
    left: 0px;
    height: 500px;
    width: 150px;
    }
    #SidebarMenu {
    position: absolute;
    top: 150px;
    left: 0px;
    height: 500px;
    width: 150px;
    background: #000066;
    }
    .header {
    margin-top: 0px;
    font-size: 15pt;
    text-align: center;
    border-bottom: 1px solid #009900;
    }
    #SidebarMenu a {
    display: block;
    text-decoration: none;
    text-indent: 10px;
    border-bottom: 1px solid #FFFFFF;
    }
    #SidebarMenu a:link{color: #FF0000; background: #000066; border-bottom: 1px solid #FFFFFF;}
    #SidebarMenu a:visited{color:#FF0000; background: #000066;border-bottom: 1px solid #FFFFFF;}
    #SidebarMenu a:hover{color: #000066; background: #FF0000; border-bottom: 1px solid #FFFFFF; font-weight: bold; font-style: italic;}
    #SidebarMenu a:active{color: #FF0000; background:#000066; border-bottom: 1px solid #FFFFFF;}
    #footer {
    position: absolute;
    top: 490px; <!--was 500-->
    left: 0px; <!--was 375-->
    width: 275px; <!--was 300-->
    }
    #footer a:link {color: #00FFFF;}
    #footer a:visited {color: #00FFFF;}
    #footer a:hover {color: #000000; background: #00FFFF; font-weight: bold; font-style: italic;}
    #footer a:active {color: #00FFFF;}
    p {
    color: #FFFFFF;
    font-size: 12pt;
    }
    h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #FFFFFF;
    }
    strong {
    color: #FFFFFF;
    }
    ul {
    color: #FFFFFF;
    }
    ol {
    color: #FFFFFF;
    }
    li {
    color: #FFFFFF;
    }
    table, td, tr {
    text-align: center;
    color: #FFFFFF;
    }
    marquee {
    font-color: FFFFFF#;
    background-color: #FFFFFF;
    }

    ************HOME****************
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    <head>
    <title>The DS Realm - Home</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <img src="logo.jpg">
    </head>
    <body bgcolor="#000000">
    <marquee>What is up?</marquee>
    <div id="main-con">
    <table>
    <center><caption><img src="news.jpg"></center></caption>
    <td><tr><h1>Site Created!</h1><hr>Hi/tr></td>


    </table>
    </div>
    <iframe src="sidebar.html" scrolling="no" frameborder="0" id="sideframe">The navigation is here. Click<a href="sidebar.html" target="_top">here</a>to navigate.</iframe>
    </div>
    </body>
    </html>
    *************SIDEBAR****************
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="sidebar">
    <div class="header"><a href="home.html" target="_top">Home</a></div>
    <div class="header"><a href="news.html" target="_top">News</a></div>
    <div class="header"><a href="cheats.html" target="_top">Cheats</a></div>
    <div class="header"><a href="codes.html" target="_top">Codes</a></div>
    <div class="header"><a href="previews.html" target="_top">Previews</a></div>
    <div class="header"><a href="reviews.html" target="_top">Reviews</a></div>
    <div class="header"><a href="screenshots.html" target="_top">Screenshots</a></div>
    <div class="header"><a href="videos.html" target="_top">Videos</a></div>



    </div>
    </body>
    </html>


    THANKS!

  • #2
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    In your CSS, try changing all instances of 'SidebarMenu' to just 'sidebar'
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •