All geek questions in one place

Problems creating windows using CSS

I want to create a drawer shape and am having problems. I want the box to have a background color and then a different color inside the box.
Then the box will have a list of items using ul and li, and each list item will have a white background, and the background color of the list item will stretch the entire distance of the indoor unit too much. In addition, the list items must have an interval of 1 px between each, so that the background color of the color of the inner box will be visible.

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

http://i38.tinypic.com/2nalnrl.png

+4
source share
5 answers

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

+8
source

So, if you have a 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; }

For CSS to work correctly (especially in Internet Explorer), make sure you have the appropriate DOCTYPE definition in the document. See w3c recommended types for a list.

+3
source 
 <!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>
+1
source

Perhaps these two will help:

0
source

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 name to it if you don't like just deleting it ...

0
source

Source: https://habr.com/ru/post/1276975/

More articles:


All Articles