Проблемы при создании окна с помощью CSS
Я хочу создать форму коробки, но у меня возникли проблемы. Я хочу, чтобы у коробки был цвет фона, а затем другой цвет внутри коробки. В этом случае в поле будет список элементов с использованием ul и li, и каждый элемент списка будет иметь белый фон, а цвет фона элемента списка будет слишком растянут на все расстояние внутреннего поля. Кроме того, элементы списка должны иметь интервал в 1 пиксель между каждым, чтобы был виден цвет фона цвета внутреннего блока.
Вот примерный набросок того, что я пытаюсь сделать:
Ответы 5
Итак, если у вас есть источник:
<div class = "panel">
<div>Some other stuff</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Вы можете использовать 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; }
Чтобы CSS работал правильно (особенно в Internet Explorer), убедитесь, что у вас есть соответствующее определение DOCTYPE в вашем документе. См. Список в Доктайпы, рекомендованные w3c.
Хорошо, я удалил их, так как они были лишними по сравнению с требованиями.
Может быть, эти двое помогут:
Вы можете сделать это довольно чисто с помощью этого 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;
}
и этот html:
<div class = "box">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</div>
это выглядит великолепно, за исключением того, что ширина по какой-то причине не составляет 100% от этого контейнера, на самом деле по какой-то причине это очень узко, какие-либо идеи?
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;
}
Надеюсь, это поможет .... Я также добавил к нему заголовок, если он вам не нравится, просто удалите его ...
<!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>
Почему дочерние селекторы? Мне неизвестен тип документа, который позволит дочерним селекторам (>) работать в IE6 ...