css problem

Discussion in 'CSS' started by mavahntooth, May 10, 2006.

0
  1. #1
    hello... noob question here...

    i have my code here.

    <ul>


    <li id="unindent"><a href="#" >Home</a>
    <li id="unindent">Services
    <li id="indent"><a href="#">choice 1</a></li>
    <li id="indent"><a href="#">choice 2</a></li>
    </ul>

    is it possible to have my unindent css id have a border around including the list-style-image?

    because i keep on trying it and the result is I cannot border it and the indent id does. (around list-style-image)
     
    mavahntooth, May 10, 2006 IP
  2. JudyJiaStyle

    JudyJiaStyle Well-Known Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    108
    #2
    This might help.

    Add 
    </li>
    Code (markup):
    to your unindent element, just like you did with the indent.
     
    JudyJiaStyle, May 10, 2006 IP
  3. iceberg

    iceberg Notable Member

    Messages:
    1,751
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    200
    #3
    you can add this

    img {
    border: 0px none;
    }

    :)
     
    iceberg, May 10, 2006 IP
  4. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #4
    Here you go.

    If you just appy the border to the li it will put a broder round each li which is not what you want I assume so you have to encase the li's you want to have a boarder with a div and apply the border to the div link in my example for ya.

    Also be sure to close all your tags as in your post you had missed a copuple of closing li tags. ;)

    You will want to adjust the border properties as you want them.

    This will help you.

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title></title>

<style type="text/css">

#border {
      border: medium double #f00;
}
</style>

</head>

<body>

<ul>
 <div id="border">
  <li id="unindent"><a href="#">Home</a></li>
  <li id="unindent"><a href="#">Services</a></li>  
 </div>
  <li id="indent"><a href="#">choice 1</a></li>
  <li id="indent"><a href="#">choice 2</a></li>
</ul>

</body>

</html>
    Code (markup):
     
    johneva, May 11, 2006 IP