Help: CSS Two Back Ground?

  • I got this design I like, and am attempting to get it on wordpress. Well I attempted to learn CSS, but i’m still stumped. Basically i took the theme known as connections and tried to change it to look like how i want it (cause it seem the easiest to convert to my design out of the 200 i look at). I’m still trying to get the the design of the category of it to look right.

    https://elitetrackstar.com/help.gif

    The one i have right now is with border lines on the left and right side. As seen in the code in sidebar ul, the commented out part is what I want to be in the middle. (i erased my garbage code out)


    /*---------------------------- SIDE -------------------------------*/
    #sidebar h2 {
    margin: 10px 0 0 0;
    padding:0px;
    font-size: 1em;
    color: #FFFFFF;
    text-align:center;
    background:url('img/sidenav_top.gif') no-repeat center;
    border:#ccc 0px solid;
    height:31px;
    font-weight:bold;
    }

    #sidebar ul {
    list-style-type: none;
    padding: 20px;
    margin: 0;
    font-size: 0.9em;
    padding-bottom:3em;
    background:url('img/sidenav_bottom.gif') no-repeat bottom;
    /*background:url('img/sidenav_bg.gif') center repeat-y;*/
    border-left: .01em #a1a1a1 solid;
    border-right: .01em #a1a1a1 solid;
    }

    #sidebar ul li {
    margin: 0.1em 0 0 0;
    padding: 0;
    }

    #sidebar li a {
    text-decoration: none;
    border:none;
    }

    #sidebar li a:link {
    color: #909D73;
    }

    #sidebar li a:visited {
    color: #999999;
    }

    #sidebar li a:hover, #sidebar li a:active {
    color: #990000;
    }

Viewing 4 replies - 1 through 4 (of 4 total)

  • u might want to wrap the ul with a div and put the bg in that, thats the way I get around needing two bg images, just wrap a div around it….

    Thread Starter dmx

    (@dmx)

    by wrap a div you mean… lol i’m sorry i have no idea. Like in the css i do that or in one of those other files? I just took a quick glance at those files for the theme and i have no idea what goes where. Can ya throw me a little code for example?

    if I’m understanding you correctly, then you could do something like this

    css:
    #sidebar ul wrap {
    margin: 0;
    padding: 0;
    background:url('img/sidenav_bg.gif') center repeat-y;
    }

    and in your html “wrap” that new div around the ul

    xhtml:

    <div id="sidebar">
    <div id="sidebar ul wrap">
    <ul>
    <li>stuff</li>
    </ul>
    </div><!-- close sidebar ul wrap -->
    </div><!-- close sidebar -->

    also make sure to make the bg transparent in your ul rule:

    #sidebar ul {
    list-style-type: none;
    padding: 20px;
    margin: 0;
    font-size: 0.9em;
    padding-bottom:3em;
    background: transparent url('img/sidenav_bottom.gif') no-repeat bottom;
    border-left: .01em #a1a1a1 solid;
    border-right: .01em #a1a1a1 solid;
    }

    Thread Starter dmx

    (@dmx)

    sorry for bumping this, but i tried it and it didn’t come out. If anyone would help, i can create a user name and grant it a certain level so u or anyone can edit it for me =)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help: CSS Two Back Ground?’ is closed to new replies.