asked on

Help needed turning a nested list into multi-column/row box using CSS

Hi,

I am trying to create a CSS file for a dynamically generated page. I cannot change the contents of the HTML, only the CSS, although it seems the HTML is reasonably well tagged, so I can get at pretty much all the elements. An example of the HTML is in the code below.

Is it possible to turn that into a layout like the basic image attached using just CSS, bearing in mind there may be one or more 'items' in the <ol> list?

<div id="MainContainer">
	<ol id="MainList">
		<li id="Item_1">
			<div class="Item_Header">
				<ul>
					<li>
						
						<span>Item 1 Name:</span><a href="http://www.foo.com/item_1">Name</a></li>
					<li>
						<span>Item 1 Title</span>Title</li>
				</ul>
				<span>
					Control Buttons
				</span>
			</div>
			<div class="Description" id="Description_1">
				Long Text Description
			</div>
		</li>
	</ol>
</div>

Open in new window

LayoutExample.gif

Badotz

Using JavaScript and the DOM, you can completely rewrite the HTML and/or CSSS into anything you desire. It won't be simple, but it could be done. I'm not sure I would try it, but desparate times etc...

Badotz

CSSS should be CSS, of course. Tooo muchhh coffeeeeeee ;-)

pixuk

ASKER

Yes, I agree, I know CSS should make this possible - what I want to know is 'how' ;-)

Badotz

You cannot change the HTML elements themselves using CSS, only their display. Without adding DIVS to change the layout (or more correctly, create your desired layout), CSS is not the answer.

pixuk

ASKER

Badotz,

The code fragment already has DIV tags, plus class tags and it's possible to get to any individual element in there via the DOM.

I don't actually want to change the HTML, I just want to use CSS to display the HTML provided in the same basic layout as the image attachment.

Badotz

Do this. Take the unchangeable HTML and copy it to a new page. Change THAT page to look the way you want, using only CSS. When all of your style rules work, then apply them to the unchangeable page using JavaScript, or by creating an external CSS file and LINKing to it (which you may have to do using JavaScript.)

pixuk

ASKER

I already have access to the CSS file that is included on the page, so I what I'm trying to do is figure out how to write the CSS to get the layout I'm after, not how to include the CSS.

myderrick

Did you say you didnt want to edit the html?

Try these codes: Not the best giving the conditions...

MD

/***Without editing html***/
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
 
 
 
* { padding:0; margin:0}
 
#maincontainer { position:relative; width: 960px; overflow:auto; background-color:#3300FF; height:756px}
#MainList { float:left; width: 300px; background-color:#006699;}
.Item_Header { clear:left; width: 660px; background-color:#666666; margin-left: 300px;}
.Description { clear:left; width: 660px; background-color:#990000; margin-left: 300px;}
 
 
 
</style>
</head>
 
<body>
 
<div id="MainContainer">
        <ol id="MainList">
                <li id="Item_1">
                        <div class="Item_Header">
                                <ul>
                                        <li>
                                                
                                                <span>Item 1 Name:</span><a href="http://www.foo.com/item_1">Name</a></li>
                                        <li>
                                                <span>Item 1 Title</span>Title</li>
                                </ul>
                                <span>
                                        Control Buttons
                                </span>
                        </div>
                        <div class="Description" id="Description_1">
                                Long Text Description
                        </div>
                </li>
        </ol>
</div>
</body>
</html>
 
 
/***Edited list items**/
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
 
 
 
* { padding:0; margin:0}
 
#maincontainer { position:relative; width: 960px; overflow:auto; background-color:#3300FF; height:756px}
#MainList { float:left; width: 300px; background-color:#006699;}
.Item_Header { float:left;width: 660px; background-color:#666666; margin-left: 300px; height: 300px; margin-top: -40px;}
.Description { clear:left; width: 660px; background-color:#990000; margin-left: 300px;}
 
 
 
</style>
</head>
 
<body>
 
<div id="MainContainer">
        <ol id="MainList">
        <ul>
        
        <li>
                                                
                                                <span>Item 1 Name:</span><a href="http://www.foo.com/item_1">Name</a></li>
                                        <li>
                                                <span>Item 1 Title</span>Title</li>
        </ul>
                <li id="Item_1">
                        <div class="Item_Header">
                                
                                <span>
                                        Control Buttons
                                </span>
                        </div>
                        <div class="Description" id="Description_1">
                                Long Text Description
                        </div>
                </li>
        </ol>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

yessirnosir

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

yessirnosir

forgot to attached 2nd pic... with longer description
pixuk2.jpg