• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

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
0
pixuk
Asked:
pixuk
  • 4
  • 3
  • 2
  • +1
1 Solution
 
BadotzCommented:
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...
0
 
BadotzCommented:
CSSS should be CSS, of course. Tooo muchhh coffeeeeeee ;-)
0
 
pixukAuthor Commented:
Yes, I agree, I know CSS should make this possible - what I want to know is 'how' ;-)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
BadotzCommented:
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.
0
 
pixukAuthor Commented:
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.
0
 
BadotzCommented:
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.)
0
 
pixukAuthor Commented:
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.
0
 
myderrickCommented:
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

0
 
yessirnosirCommented:
first off, it probably goes without saying, but I'll say it anyway, the right way to do this is to go back to whatever code generates the HTML, and change it to a more logical structure.  Those unnamed spans especially cause a lot of grief -- you need a class name on everything to really be in control.

But that said, for the sake of solving the puzzle, attached code I think gets the various pieces in the right spot by brute force...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>pixuk CSS Positioning Example</title>
</head>
<style>
ol, ul, li {margin:0;padding:0;}
#MainContainer {float:left;overflow:hidden;}
#MainList {position:relative;list-style:none;overflow:hidden;}
#MainList li {clear:both;}
#MainList li .Item_Header ul {float:left;list-style:none;}
#MainList li .Description {float:left;width:400px;margin-bottom:5px;}
#MainList li .Item_Header span {float:left;width:400px;text-align:right;}
#MainList li .Item_Header ul li {width:250px;}
#MainList li .Item_Header ul li span {display:inline;margin-left:0;text-align:left;width:150px;}
 
/* following colors are just to help identify which styles are applying to which element */
#MainContainer {background:blue;}
#MainList {background:orange;}
#MainList li {background:gray;}
#MainList li .Item_Header ul {background:aqua;}
#MainList li .Description {color:brown;background:tan;}
#MainList li .Item_Header span {color:red;background:pink;}
#MainList li .Item_Header ul li {color:gray;background:yellow;}
#MainList li .Item_Header ul li span {color:green;background:lime;}
</style>
<body>
<div id="MainContainer">
  <ol id="MainList">
    <li id="Item_1">
      <div class="Item_Header">
        <ul>
          <li> <span>Item 1 Name:</span><a href="#">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>
    <li id="Item_2">
      <div class="Item_Header">
        <ul>
          <li> <span>Item 2 Name:</span><a href="#">Name</a></li>
          <li> <span>Item 2 Title</span>Title</li>
        </ul>
        <span> Control Buttons </span> </div>
      <div class="Description" id="Description_2"> Long Text Description </div>
    </li>
  </ol>
</div>
</body>
</html>

Open in new window

pixuk.jpg
0
 
yessirnosirCommented:
forgot to attached 2nd pic... with longer description
pixuk2.jpg
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now