Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tricky ( Possibly Impossible ) css list problem.

    Ok so let me lay it on you. Typical list elements when rendered display with 100% width, ie: they extend to the limits of the parent ul completely ( When displayed as block and non-float ). However the problem that I am working on now requires that my lists elements only take up as much space as the text/items inside them require because I need that empty space around the list elements to capture events in a different way than how my actual list elements capture the events.

    This may seem a little bit confusing but hopfully someone can tell me if this is even possible. While looking at the wc3 specifications for the display property it seemed as though this is a lost cause. I could render the lists as a div tree but thats really not a good solution here.

    Anyone that can help me out much appreciated.

    Thanks

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I can't fathom what you mean, but there are a lot of helpful sources at the URL in my signature,

    Knowing this site and its' members, I am sure that someone will come up with an answer.

    Frank
    Last edited by effpeetee; 11-01-2007 at 06:56 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Like this?

    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<style type="text/css">
    			li{
    				float:left;
    				clear:left;
    				background-color:blue;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="e">
    			<div id="pagecontent">
    				<ul>
    					<li>aaaaaaaaaaa</li>
    					<li>bbbb</li>
    					<li>cccccccc</li>
    					<li>dd</li>
    				</ul>
    			</div>
    			<div id="pagefoot">
    			</div>
    		</div>
    	</body>
    </html>
    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Great

    You freaking rock.

    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •