• Locked
2 replies [Last post]
Mon, 2010-01-25 20:33
biotech
biotech's picture
User offline. Last seen 2 years 9 weeks ago. Offline
newbie
Timezone: GMT-7
Joined: 2008-10-20
Posts: 10
Points: 3

Hello people,
Trying to design some what of a different menu using list. What I am really missing from table world is ability to span cells Smile.
Goal is make a menu of fixed number of items in a shape of pyramid (fixed layout).
eg.
Link1----Link2----Link3
----Link4-----Link5
---------Link6

Here is my attempt but I have a feeling that this will have to be done with a class per LI.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title></title>
<style>
#menu ul {
  width:100%;
  display:inline;
  list-style-type:none;
}
#menu li {
  width: 25%;
  float:left;
  border: 1px solid #39B0D8;
  margin: 4px;
}
.left{
  text-align:left;
}
.right{
  text-align:right;
}
.center {
  text-align:center;
}
</style>
</head>
<body>
<ul id="menu">
  <li class="left"><a href="#">Column 1</a></li>
  <li class="center"><a href="#">Column 2</a></li>
  <li class="right"><a href="#">Column 3</a></li>
  <li class="right"><a href="#">Column 4 - row 2</a></li>
  <li class="center"><a href="#">Column 5 - row 2</a></li>
  <li class="center"><a href="#">Column 6 - row 3</a></li>
</ul>
</body>
</html>

Any ideas? Perhaps using lists is a wrong move?
Thanks so much!

Top
Tags:
Mon, 2010-01-25 21:30
#1
tmharsh
tmharsh's picture
User offline. Last seen 2 years 12 weeks ago. Offline
rank Regular
Regular
Timezone: GMT-5
Joined: 2009-06-22
Posts: 27
Points: 26

Here's something I threw

Here's something I threw together quick...

<style type="text/css">
	* {maring:0; padding:0;}
	ul {border:1px solid #000; list-style:none; float:left;}
	ul li {border:1px solid #000; float:left;}
	.second, .third {clear:left;}
	.second {margin-left: 20px;}
	.third {margin-left: 40px;}
</style>

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li class="second"><a href="#">Link 4</a></li>
	<li><a href="#">Link 5</a></li>
	<li class="third"><a href="#">Link 6</a></li>
</ul>

I didn't come up with a way to do it without having to set some margins. So you'll just have to plan out the size of everything and adjust the margins accordingly. But this could work as a starting point. I put borders on just to show how things were laid out.

Top
Tue, 2010-01-26 00:02
#2
biotech
biotech's picture
User offline. Last seen 2 years 9 weeks ago. Offline
newbie
Timezone: GMT-7
Joined: 2008-10-20
Posts: 10
Points: 3

Thank you tmharsh, for

Thank you tmharsh,
for confirming it as well as your sample!
I figured it will just have to be working based on set margin values but though to check if there are 'better' methods.
Thanks again!

Top
  • Locked