CODEWITHSUNDEEP
css
public static
public static

Reputation: 12990

Issues creating a box using CSS

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:

Upvotes: 6

Views: 11134

Answers (5)

Josh Millard
Josh Millard

Reputation: 1093

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>

DEMO

Upvotes: 8

bryant jaquez
bryant jaquez

Reputation: 11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: white;                /* text color is white */ 
        background: blue;            /* Content, padding will be blue */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: lime;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is
           a bit longer to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

Upvotes: 1

techy
techy

Reputation:

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...

Upvotes: 0

Mike Tunnicliffe
Mike Tunnicliffe

Reputation: 10772

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.

Upvotes: 3

spinodal
spinodal

Reputation: 4017

Maybe those two will help:

Upvotes: 0

Related Questions