SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    lists and associated lists

    How would you have 2 divs, one with a list of categories and the other next to it with the list of items in each category.

    IOW, I want to do something like:
    Attached Files Attached Files
    Aaron Brazell
    Technosailor



  2. #2
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think what you looking for is something that I am trying to get on to with this post....

    http://www.sitepoint.com/forums/showthread.php?t=149591

    I assume you want to make the 2nd level of DIV appear when you rollover its related parent DIV? Yeah??

    Tryst

    I am currently still trying to get it to work.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    A 2-column table with a list in each cell perhaps? Or perhaps this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    	<title>Hello</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<style type="text/css">
    	<!--
    		#thelist dt {
    			float: left;
    			width: 200px;
    			clear: both;
    		}
    		#thelist dd {
    			float: left;
    			width: 200px;
    		}
    	-->
    	</style>
    	</head>
    	<body>
    		<div id="everything">
    			<dl id="thelist">
    				<dt>Item 1</dt>
    				<dd>
    					<ul>
    						<li>Item 1</li>
    						<li>Item 2</li>
    						<li>Item 3</li>
    					</ul>
    				</dd>
    				<dt>Item 2</dt>
    				<dd>
    					<ul>
    						<li>Item 1</li>
    						<li>Item 2</li>
    						<li>Item 3</li>
    					</ul>
    				</dd>
    				<dt>Item 3</dt>
    				<dd>
    					<ul>
    						<li>Item 1</li>
    						<li>Item 2</li>
    						<li>Item 3</li>
    					</ul>
    				</dd>
    			</dl>
    		</div>
    	</body>
    </html>
    The above code works in Firebird, but not in IE or Opera

  4. #4
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HEy guys,

    Vinnie, I'd have to have IE support. Tryst, I'm doing my resume in XHTML. I already have it in Word format but I'm trying to render it identically/similarly in XHTML, so no...rollovers are not what I'm looking for.

    Aaron
    Aaron Brazell
    Technosailor



  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Use a 2-column table:
    Code:
    <table summary="My skills">
    <caption>My Skills</caption>
      <tr>
         <!--scope="row" will give your first <td> a header-like status-->
         <td scope="row">Operating Systems</td>
         <td>
             <ul>
                <li>Windows 2000</li>
                <li>Red Hat Linux</li>
                <li>OS/390</li>
             </ul>
          </td>
      </tr>
      <!--repeat this process-->
    </table>
    This seems like a valid use for a data table.

  6. #6
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True but not flexible if I wanted to display it differently later...
    Aaron Brazell
    Technosailor



  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Sketch
    True but not flexible if I wanted to display it differently later...
    That is true, but short of absolutely positioning everything and ensuring that your content doesn't exceed a specified height, or using display: table-cell; and allowing IE to degrade its appearance (which you already said isn't practical) it's probably the best/easiest solution for now.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I tried doing something clever with lists but it didn't work

    I did this for someone else but I think its too rigid for you. It's the other way around to what you want but you'll get the picture

    http://www.pmob.co.uk/temp/tabledatacss.htm

    If its any use feel free to use it.

    Paul

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay guys... Thanks. I'll play around and see what I can find.
    Aaron Brazell
    Technosailor



  10. #10
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use a definition list and this is not even difficult...
    article and examples/tutorials here
    http://www.maxdesign.com.au/presenta...tion/index.cfm

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I did manage something similar with a list but I didn't think of using a DL.

    Anyway this is what I came up with. (Still too rigid for my liking.)

    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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .main ul {
     border:1px solid #000;
     line-height:20px;
     width:203px;
     list-style-type:none;
     margin:0;padding:0;
     background:#D1DCE9;
    }
    .main li {border:1px solid #000;}
    ul.sub {
     border:1px solid #000;
     position:relative;
     top:-23px;
     left:50px;
     background:#ffffcc;
     width:150px;
    }
    .sub li {
     list-style-type:none; 
     border:none;
     width:50px;
    }
    </style>
    </head>
    <body>
    <div class="main"> 
      <ul>
    	<li>Main 1</li>
    	<li> 
    	  <ul class="sub">
    		<li>sub 1</li>
    		<li>sub 2</li>
    		<li>sub 3</li>
    	  </ul>
    	</li>
    	<li>Main 2</li>
    	<li> 
    	  <ul class="sub">
    		<li>sub 1</li>
    		<li>sub 2</li>
    		<li>sub 3</li>
    	  </ul>
    	</li>
    	<li>Main 3</li>
    	<li> 
    	  <ul class="sub">
    		<li>sub 1</li>
    		<li>sub 2</li>
    		<li>sub 3</li>
    	  </ul>
    	</li>
      </ul>
    </div>
    </body>
    </html>
    Paul


Bookmarks

Posting Permissions

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