Side Bar Menu complications

Discussion in 'HTML & Website Design' started by Pierre30w3kids, Apr 30, 2014.

0
  1. #1
    So i'm having a issue with a side menu that displays a image behind it. Its wrapped up in a ul=id and then and only then when I add the background image.. The links become inactive.. Can someone look at my code and tell me whats wrong? Or even a alternative?
    Thanks

    <ul id="coffmenu">

<img src="../images/category.png" width="209" height="27" class="cat" style="position: relative; z-index: -1;" />

<li><a href="cofe.html">Coffee Blends</a></li>
<li><a href="">Decaf</a></li>
<li><a href="">Espresso</a></li>
<li><a href="">Organic</a></li>
<li><a href="">Flavor Blends</a></li>
<li><a href="">Single Orgin</a></li>
</br>
<li><a href="">Teas</a></li>
<li><a href="">Black Tea</a></li>
<li><a href="">White Tea</a></li>
<li><a href="">Green Tea</a></li>
<li><a href="">Decaf</a></li>

</ul>

</div>
    Code (markup):
    CSS

    
ul#coffmenu {

list-style-type: none;
border-radius: 10px;
background-color: rgb( 9, 107, 107 );
position: relative;
overflow:hidden;
left: 17px;
top: 10px;
width: 229px;
height: 529px;
z-index: -1;
float: left;
}

ul#coffmenu li {

}

ul#coffmenu li a {
text-decoration: none;
}
    Code (markup):

     
    Pierre30w3kids, Apr 30, 2014 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,814
    Likes Received:
    4,535
    Best Answers:
    123
    Trophy Points:
    665
    #2
    I had a wee play: http://jsfiddle.net/XgFZ9/

    The background image should be in the css or outside the <ul></ul> tags.
    and you shouldn't have the <br> in the middle either. There are otherways to create space. I did it by removing the links from some of the labels (which may not be appropriate in your scenario) but you can do other things too (check out what I do with organic). This will give you a bit more direction though.
     
    sarahk, Apr 30, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    @sarahk has it right that the image belongs in the CSS as a background, not in the markup... and that both the placement of the IMG and BR tags is outright gibberish invalid markup...

    The only elements that can be direct children of a UL or OL is LI... what gave you the idea you could place those elements where you did?

    Basically, change this:
    background-color: rgb( 9, 107, 107 );

    To this:
    background:#096B6B url(../images/category.png) 0 0 no-repeat;

    and get rid of that IMG tag since how you are using it makes it very clear it is NOT content. Images that aren't content don't get IMG tags.

    Though I'm guessing slightly without the whole page markup being present... a lot of your CSS contains bad practices like sliding the element around relative and playing with z-index for christmas only knows what. I'd have to see the entire page to say what the proper markup/CSS is supposed to be, but I'm pretty sure that's not it.
     
    deathshadow, Apr 30, 2014 IP
  4. Pierre30w3kids

    Pierre30w3kids Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    ouch and ooch.. But thanks! I need tough critical input to shape up.. I'm definitely a newbie at this. Some of the css content was from the "copy CSS" element in Photoshop when I got the background element
     
    Pierre30w3kids, Apr 30, 2014 IP