Grow your CSS skills. Land your dream job.

CSS too messy to fix?

  • # October 8, 2009 at 10:31 pm

    Hi all,

    I have NO idea what I have done to screw this up, but every time I make a new page, css manages to make me feel like a blithering idiot.

    I have a wrapper div (green for visual aid) that doesn’t extend all the way to the footer.
    Also, I can’t get my nav list to display correctly (I had an image of a box for bullets) and can’t figure out why.

    I believe there might be something in the floats and clears, but no idea where the crux is… *sigh*

    Please help if ya can: Site here.

    and the css is long and here:

    Code:
    @charset “utf-8″;

    /*
    Theme Name:NERD
    Theme URI:
    Description: Our NERD site
    Author: Bree
    Author URI: http://nerdcomics.com
    Version: 1.0
    .
    General comments/License Statement if any.
    .
    */

    body {
    margin:0px;
    padding:0px;
    background: #FFF;
    }
    p{
    margin:0}

    #wrapper{
    width:1000px;
    margin:auto;
    border:3pt solid #0FC;
    }

    #header{
    background: transparent url(header.png);
    height:147px;

    }

    #nav {
    background:#c97272;

    height:30px;
    width:100%;

    }

    #nav ul {
    display: inline;
    }

    #nav li {
    display:inline;
    font-size:1em;
    text-decoration:none;
    font:Georgia, “Times New Roman”, Times, serif;
    color:#fff;
    margin:0;
    }

    #nav li a{
    text-decoration:none;
    font:bold;
    font-variant:small-caps;
    font:Georgia, “Times New Roman”, Times, serif;
    color:#fff;
    list-style-image:url(nav_box.png);
    padding:3px;
    }

    #nav li>ul{
    /*Make the sub list items invisible*/
    display: none;
    }

    #middle{
    background: #FFF;
    width:1000px;

    }

    #content{
    float:left;
    width:750px;

    }

    #content p{
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-size:1em;
    }
    #content a{
    color:#903;
    text-decoration:none;
    }

    #content h2{
    background-color:#CCC;

    }

    #sidebar{
    background-color: #a6a6a6;
    width:250px;
    float:right;
    clear:right;
    height:100%;

    }

    #sidebar p{
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-size:1em;
    }
    #sidebar a{
    color:#903;
    text-decoration:none;
    }

    #sidebar h2{
    color:#FFF;
    }

    #sidebar h2, p, a {
    margin:10px;
    }

    #nav ul, li {
    font-size:1em;
    text-decoration:none;
    font:Georgia, “Times New Roman”, Times, serif;
    color:#fff;
    margin:0;
    }

    #footer{
    width:1000px;
    height:100px;
    background:#151414;
    float:left;
    clear:both;

    }
    #footer p a{
    color:#CCC;
    padding:5px;
    }

    Thanks! Cheers! :oops:

    # October 8, 2009 at 11:35 pm

    can you post a picture of what it is suppose to look like? I don’t see any of the problems you are talking about. So if I had something to go off of that would help.

    # October 10, 2009 at 1:30 am

    Thanks for the reply!

    I fixed the wrapper problem, but I still can’t figure out how to get my bullets (a square image I’ve linked to) to work.

    This is basically what I want it to look like (the nav li etc) [img]http://breerubin.com/site.png[/img]

    # October 10, 2009 at 2:03 am

    your other option is to not use an image. You can use a border instead like this

    Code:
    #nav ul li {
    border-left: 10px solid white;
    }

    then put a little padding on the link

    #nav ul li a {
    padding-left: 10px;
    }

    this will make your site faster because you won’t have to download the list image

    # October 11, 2009 at 3:43 pm

    Will give it a go. Thanks guys! 8-)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".