complicated list

[lord22]

Hi,

I'm trying to create this list:



The green lines and the blue rectangles are actually images.

I actually don't have any idea how to start creating such a thing.

Any help will be appreciated!

[simcomedia]

Hmmm, well, you could do it using a simple method of creating a background that would be the aqua box and the images sticking out the side, then make your text links from 3 separate UL lists placed inside of 3 separate div's. The background would be the master div and have the background. Kinda like this:

#menucontainer {
background-image: url('menubackground.jpg');
background-repeat: no-repeat;
width: 175px;
height: 500px;
float: left;
padding: 5px;
}

/* then the menus */

#menu1{
width: 130px;
margin: 25px 0 0 10px;
overflow: auto; // so the height is determined by the number of links
float: left;
}
#menu3{
width: 130px;
margin: 25px 0 0 10px;
overflow: auto; // so the height is determined by the number of links
float: left;
}
#menu3{
width: 130px;
margin: 25px 0 0 10px;
overflow: auto; // so the height is determined by the number of links
float: left;
}

Then in the HTML it would be something like this:

<div id="menucontainer">
<div id="menu1">
<ul>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
</ul>
</div>

<div id="menu3">
<ul>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
</ul>
</div>

<div id="menu3">
<ul>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
<li>A Link</li>
</ul>
</div>

</div>