Issues creating a box using CSS

Question

Hi,

I want to create a box shape and I am having trouble. I want the box to have a background color, and then different color inside the box.
The box will then have a list of items using ul and li, and each list item will have a background of white, and the list item's background color is too stretch the entire distance of the inner box. Also, the list items should have a 1 px spacing between each one, so that the background color of the inside box color is visible.

Here is a rough sketch of what I am trying to do:

Answer 1

So if you have source:

<div class="panel">
  <div>Some other stuff</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

You can use CSS:

div.panel { background-color: #A74; border: solid 0.5em #520; width: 10em; 
            border-width: 0.75em 0.25em 0.75em 0.25em; }
div.panel div { padding: 2px; height: 4em; }
div.panel ul li { display: block; background-color: white; 
                      margin: 2px; padding: 1px 4px 1px 4px; }
div.panel ul { margin: 0; padding-left: 0; }

To get the CSS to work properly (particularly on Internet Explorer), make sure you have an appropriate DOCTYPE definition in your document. See w3c recommended doctypes for a list.

Answer 2

Maybe those two will help:

• Listutorial
• CssPlay Menus

Answer 3

You can do this pretty cleanly with this css:

.box {
        width: 100px;
        border: solid #884400;
        border-width: 8px 3px 8px 3px;
        background-color: #ccaa77;
}

.box ul {
        margin: 0px;
        padding: 0px;
        padding-top: 50px; /* presuming the non-list header space at the top of
                              your box is desirable */
}

.box ul li {
        margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
                                    sufficiently visible */
        background-color: #ffffff;
        list-style-type: none;
        padding-left: 2px;
}

and this html:

<div class="box">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
   </ul>
</div>

Answer 4

Html:

<div id="content">
  <a><div class="title">Title</div>Text</a>
  <ul>
   <li>Text</li>
   <li>More Text...</li>
  </ul>
 </div>

CSS:

#content{
   text-align:left;
   width:200px;
   background:#e0c784;
   border-top:solid 10px #7f4200;
   border-bottom:solid 10px #7f4200;
   border-right:solid 5px #7f4200;
   border-left:solid 5px #7f4200;
  }
  #content a{
   margin-left:20px;
  }

  #content ul{
   list-style-type:none;
   margin-bottom:0px;
  }
  #content ul li{
   padding-left:20px;
   margin:0px 0px 1px -40px;
   text-align:left;
   width:180px;
   list-style-type:none;
   background-color:white;
  }
  #content .title{
   text-align:center;
   font-weight:bolder;
   text-align:center;
   font-size:20px;
   border-bottom:solid 2px #ffcc99;
   background:#996633;
   color:#ffffff;
   margin-bottom:20px;
  }

Hope this helps.... I also added a title to it, if you dont like it just delete it...