Jump to content

How to style this?


Muiter
 Share

Recommended Posts

I have no idea how to style this. My goal is to get an simple structure with folders (can contain an subfolder) and products.How can I make an nice view with lines from the products to the folder or subfolder that holds them?knipselgk.jpgGenerated html:

<tr>					<td width="50" class="dblclick" id="2_folder|naam|1|256">folder 1</td><td></td>								<td>__3x Plaat 200 201.5 12|2200</td>								<tr/>								<td></td><td></td>								<td>__5x Ring 400.0 100 15|1900</td>								<tr/>								<td></td><tr/>							<td></td></tr><tr>					<td width="50" class="dblclick" id="2_folder|naam|2|256">folder 2</td><td>|__<span class="dblclick" id="2_folder|naam|7|256">subfolder 2</span></td><td>__5x Flens </td>								<tr/>								<td></td>								<td></td><td>__2x test a </td>								<tr/>								<td></td>								<td></td><tr/>							<td></td><td>|__<span class="dblclick" id="2_folder|naam|9|256">subfolder 2aa</span></td><tr/>							<td></td><tr/>							<td></td></tr><tr>					<td width="50" class="dblclick" id="2_folder|naam|3|256">folder 3</td><td></td>								<td>__5x Flens </td>								<tr/>								<td></td><td></td>								<td>__2x test a </td>								<tr/>								<td></td><tr/>							<td></td></tr>

Link to comment
Share on other sites

You could try using lists and css. I think that would be the easiest way.folders.png

<style type='text/css'>	ul	{		margin: 3px 0px 3px 10px;		font-weight: 700;		font-size: 14px;	}	ul li	{		margin-left: 5px;		list-style-type: none;		font-weight: 500;		font-size: 12px;		cursor: pointer;	}	ul li:hover	{		background-color: #eee;	}</style><ul>	Folder	<li>item.htm</li>	<li>item.php</li>	<li>image.png</li>	<ul>		Sub Folder		<li>item.js</li>	</ul>	<ul>		Sub Folder		<ul>			Sub sub folder			<li>item.css</li>			<li>item.php</li>		</ul>	</ul></ul>

Link to comment
Share on other sites

Good tip MrFish, did not think of that.I have made an quick sample code to see if it will suit my needs. Any ideas how to get rit of the blank lines?knipselb.jpg

<table width="100%"><tr>	<ul>		<li class="folder">Milk</li>					<ul>						<li class="product">Milk</li>						<li class="product">Toilet Paper</li>						<li class="product">Cereal</li>						<li class="product">Bread</li>					</ul>		<li class="folder">Toilet Paper</li>		<li class="folder">Cereal</li>			<ul>				<li class="subfolder">Milk</li>				<li class="subfolder">Toilet Paper</li>					<ul>						<li class="product">Milk</li>						<li class="product">Toilet Paper</li>						<li class="product">Cereal</li>						<li class="product">Bread</li>					</ul>				<li class="subfolder">Cereal</li>				<li class="subfolder">Bread</li>			</ul>		<li class="folder">Bread</li>	</ul></tr></table>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...