Display a list of links

[solidariti]

I'm struggling to get my list of links inline with each other similar to below:

http://www.alvit.de/handbook/

My page looks like this currently: http://www.jamesapps.com/links/

Heres where I'm up to so far, I'm using wordpress, but everybody I've asked for help there doesn't want to know.


function ddmcl_generate() {

global $wpdb, $wp_version;

$ver = (float)$wp_version;

$tp = $wpdb->prefix;

$num_cols = get_option('ddmcl_num_cols');
$sep = get_option('ddmcl_sep');
$sep_header = get_option('ddmcl_sep_header');
$exclude = get_option('ddmcl_exclude');


$t_out = '<div id="linkage">' . "\n";


$exclude_sql = "";

if (trim($exclude) != "") {

$exclude_list = (array)explode(",", $exclude);

foreach ($exclude_list as $ex) {
$exclude_sql .= ' AND link_category != ' . trim($ex);
}

}





$link_list = (array)$wpdb->get_results("
SELECT link_url, link_name
FROM {$tp}links
WHERE link_visible = 'Y'
{$exclude_sql}
ORDER BY link_name
");


$num_links = count($link_list);
$links_per_col = ceil($num_links / $num_cols);


$last_char = '';

for ($col = 0; $col < $num_cols; $col++) {

$first_item = TRUE;

$start_link = $col * $links_per_col;
$end_link = $start_link + $links_per_col;
if ($end_link > $num_links) $end_link = $num_links;

$last_char = '';

$t_out .= "<div class=\"column\"><ul>\n";

for ($c = $start_link; $c < $end_link; $c++) {

if ($sep != 'no') {

if ((strtoupper($link_list[$c]->link_name[0]) != $last_char) && (!is_numeric($link_list[$c]->link_name[0]))) {

$last_char = strtoupper($link_list[$c]->link_name[0]);

if ($sep_header != "") {
if ($sep == 'header') {

$tmp_header = str_replace("%L", strtoupper($last_char), $sep_header);
if (!$first_item) {
$t_out .= "</ul>";
}
$t_out .= "<span class=\"head\">" . stripslashes($tmp_header) . "</span>";


}
} else {
if ($first_item) {
$first_item = FALSE;
} else {
$t_out .= '<p class="sep">&nbsp;</p>' . "\n";
}
}

}

}

$t_out .= '<li><a href="' . $link_list[$c]->link_url . '">' . $link_list[$c]->link_name . '</a></li>' . "\n";

if ($first_item) {
$first_item = FALSE;
}

}

$t_out .= "</ul>\n</div>";

}


$t_out .= "\n</div>\n\n" . '' . "\n\n";

return $t_out;

}



function ddmcl_process($content) {

if (strpos($content, "<!-- multicollinks -->") !== FALSE) {
$content = preg_replace('/<p>\s*<!--(.*)-->\s*<\/p>/i', "<!--$1-->", $content);
$content = str_replace("<!-- multicollinks -->", ddmcl_generate(), $content);
}

return $content;

}



function ddmcl_add_css() {

echo '<link rel="stylesheet" href="';
bloginfo('stylesheet_directory');
echo '/dd-multi-col-links.css" type="text/css" media="screen" />';

}




add_filter('the_content', 'ddmcl_process');
add_action('admin_menu', 'ddmcl_add_option_pages');
add_action('wp_head', 'ddmcl_add_css');

?>



Heres the CSS that I'm currently using:

.ddmcl {
width: 890px;
float: left;
padding-right: 20px;
}

.ddmcl ul {
margin: 10px 0 10px 0;
padding: 0;
list-style: none;
text-indent: 0;
}

.ddmcl li {
margin: 0 0 2px 0;
padding: 0;
}

.ddmcl p.sep {
font-size: 1.2em;
color: #808080;
font-weight: bold;
}

.ddmcl p.sep:hover {
cursor: pointer;
}

.column
{
background-color:#E9F8F8;
width:23%;
font: 0.85em/1.5em "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
color:#333;
float:left;
margin:5px 5px 5px 7px;
border: 1px solid #A5E1E0;
padding: 5px 5px 5px 0px;
min-width: 180px;
line-height: 15px;
}

.column ul,
.column-alt ul { padding-left: 0.9em; }
.column .head
{
font-weight:bold;
color:#35ACAB;
padding: 4px 5px 5px 5px;
background-color: #D1F0F0;
border-right: 1px solid #A5E1E0;
border-top: 1px solid #A5E1E0;
border-bottom: 1px solid #A5E1E0;
}


.column .head a, .column .head a:visited
{
color:#2B8383;
text-decoration:none;
font: 0.9em Verdana, Trebuchet MS, "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
font-weight: bold;
}

.column .head:hover {
background-color: #E5F5F5;
}

[scragar]

I used firebug to add this:
.column{
display: block;
float: left;
width: 23%;
max-width: 24%;
}
to your CSS and it looked OK (top bit of each column is off center, but it works.)

[solidariti]

I did that put it didnt work? Im using firefox as well and I tried using firebug but I couldnt replicate what you were explaining as the links still are in a single list.

I would like to try and get them to span the width of the page proabably about 3 or 4 categories wide.

[scragar]

works fine for me, wonder what your doing differently...

As I said though, first menu in all of the lists is off centre for some reason.