Forum Moderators: not2easy
I hope I'm posting in the correct section... my problem at the least partly involves changing CSS, I think.
I'm using a plugin which adds a chatbox to my wordpress website, it can be seen here: <snip>
the plugin generates an unordered list and fills in the list items with database info. I've heavily modified the css to get it looking the way I want (each post having its own little box).
But I'd like the background color on each list item to only go as far as the words, vs taking up the entire width of the ul.
How can I get this done?
appreciate any help! best, Chris
[edited by: swa66 at 3:42 am (utc) on Sep. 7, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
ul.some-class { /*some-style*/ }
or the list items?
ul.some-class li { /*some-style*/ }
You could try it on the li only, but don't set the width for 100%.
But I'd like the background color on each list item to only go as far as the words, vs taking up the entire width of the ul.
Well - taking just the text out of the <li> block display and giving just the text its own background is the mission - probably complicated by needing some 'block controls'.
The width of the <ul> is less a factor than the width of the <li>. The dilemma is the same however. Lists can add complication, so don't feel tied to using a list. It's question of getting the background to behave 'inline' behind the text, but probably maintaining some block level control.
You might not be very happy with the solution offered, which is going to require you to <span> the text. 99% probability that someone will offer something cleaner, but this works in FF, Opera, IE7 (don't care about 6 and didn't check 8)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#wrapper {
background-color: #ccc; margin: 1em 10%; padding: 1em;
}
ul {
margin: 0; padding: 0;
}
li {
display: block; list-style-type: none; margin: 1em 0;
}
.list-bg {
background-color: red; display: inline-block; padding: .5em;
}
</style>
<body>
<div id="wrapper">
<ul>
<li>
<span class="list-bg">List item</span>
</li>
<li>
<span class="list-bg">List item</span>
</li>
<li>
List item
</li>
<li>
List item
</li>
</ul>
</div>
</body>
</html>
#chatoutput ul#outputList { padding: 0; margin: 0; }
#chatoutput ul#outputList li { background: #dadfe1; padding: 10px; margin: 12px; etc, etc.
and there is no set widths on either, ul or li.
span is a good idea... another solution I considered was using a table instead of a list and styling the background of a td. it would be pretty tricky because it's all dynamic code fed by the plugin so I may have to dig around in multiple files and hope I don't wreck the syntax :)
i will look at the plugin files and see if I can figure out where to put span tags.
