I'm trying to think of a case when you'd want to render a numbered menu in
this fashion. From a usability standpoint it seems rather confusing.
At any rate, if you made a nested repeat loop in your server side scripting
language to figure out how many rows & columns you need, you can easily
achieve this with, for example, a div for each column that has a width of,
say, 10px, and li elements with 9px width (with display block, they'll
automatically bump down and stack:
<div id="boxnav">
<div id="col1">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<div id="col2">
<ul>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
.
.
.
you just can't do it with a single ul li (yet). On a whim, I tried doing
this and it is a bit more tricky than it seems, but I got it to work. Just
put your links into the array, and you can change the value for $rows.
<!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=utf-8" />
<title>Vertically Stacked List Item Grid</title>
<style>
#col1, #col2, #col3{
width:20px;
float:left;
}
ul {
margin:0;
padding:0;
}
li {
list-style:none;
width:15px;
}
</style>
</head>
<body><?php
$links = array('1'=>'p01.php', '2'=>'p02.php', '3'=>'p03.php', '4'=>'p04.php',
'5'=>'p05.php','6'=>'p06.php','7'=>'p07.php' );
$rows = 3;
$currentrow = 0;
$totallinks = 0;
$currentcolumn = 0;
$linktext = array_keys( $links );
$linkhref = array_values( $links );
foreach( $links as $L ) {
$currentrow++;
if( $currentrow==1 ) {
$currentcolumn++;
echo "<div id=\"col". $currentcolumn ."\"><ul>\n\t";
echo "<li><a href=\"". $linkhref[$totallinks] ."\">".
$linktext[$totallinks] ."</a></li>\n\t";
}else{
if( $currentrow==$rows ){
echo "<li><a href=\"". $linkhref[$totallinks] ."\">".
$linktext[$totallinks] ."</a></li>\n\t";
echo "</ul></div>\n";
$currentrow = 0; //reset counter
}else{
echo "<li><a href=\"". $linkhref[$totallinks] ."\">".
$linktext[$totallinks] ."</a></li>\n\t";
}
}
$totallinks++;
if( $totallinks == count( $links ) ) {
echo "</ul></div>\n";
}
}
?>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
