.codeList dt {
background: #dddddd;
padding: 7px;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
5. Style the list items within the ordered list by adding the following rule. The
margin-left value places the bullets within the definition list, rather than outside
of it.
.codeList li {
background: #ffffff;
margin-left: 2.5em;
}
6. Finally, style the code elements. The background value is slightly lighter than that
used for the dt element, ensuring that each element is distinct. By setting display
to block, the code elements stretch to fill their container (meaning that the background
color also does this). The borders ensure that each line of code is visibly
distinct, and the border-right setting essentially provides a border all the way
around the code lines, seeing as the border-bottom setting in .codeList dt
defines one at the top of the first line of code. The font is set to a monospace font,
and the padding values place some space around the code, making it easier to
read.
Note that in Internet Explorer, the bullets typically display further to the left than in
other browsers. This behavior can be dealt with by overriding the margin-left value
of .codeList li in an IE-specific style sheet attached using a conditional comment??”
see Chapter 9 for more on this technique.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
116
.codeList code {
background: #eaeaea;
display: block;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
font : 1.
Pages:
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195