Sent by Doug Ferguson on 18 May 2005 21:09
I took Schalk's code and enhanced it a bit. As mentioned earlier, for
bullets just use a background image on the acronym class (with some left
padding).
<style type="text/css">
..section {
margin-top:15px;
display:block;
clear:both;
}
..acronym {
float:left;
width:100px;
border:1px solid gray;
}
..dash {
float:left;
width:15px;
border:1px solid gray;
}
..acr-explain {
float:left;
text-align:left;
border:1px solid red;
}
</style>
</head>
<body>
<p class="section">
<span class="acronym">Acronym 1</span>
<span class="dash">-</span>
<span class="acr-explain">Acronym 1 Explanation</span>
</p>
<p class="section">
<span class="acronym">Acronym 2</span>
<span class="dash">-</span>
<span class="acr-explain">Acronym 2 Explanation longer</span>
</p>
<p class="section">
<span class="acronym">Acronym 3</span>
<span class="dash">-</span>
<span class="acr-explain">Acronym 3 Explanation really long</span>
</p>
</body>
Schalk Neethling wrote:
> Keith
>
> If Justin's does not do the trick try to float the acronym div left and
> the other right.
>
> Then your styles:
> .acronym {
> float:left;
> width:200px;
> }
> .acr-explain {
> float:right;
> width:400px;
> text-align:left;
> }
>
> Justin Reid wrote:
>
>> Keith:
>>
>>> li span {
>>> width: 200px;
>>> }
>>>
>>> but this doesn't give me a 'default' box area to keep the acronyms in.
>>> Any suggestions?
>>
>>
>> Have you also tried making the span block level in that scenario?
>> -Justin Reid
>> ______________________________________________________________________
>> css-discuss [EMAIL-REMOVED]]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>>
>>
>>
>>
>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
