Help me with my page layout (how to, http) - Internet - - City-Data Forum

Greybear · 12-04-2008, 06:56 PM

I would like a page on my site to contain several of my favorite links.

I would to arrange these links in four columns, with a heading that describes the column of links below it.

I know how to write the HTML to add the links, but how do I arrange them in four vertical columns?

Any suggestions, or HTML/CSS code examples would be very appreciated.

Thanks

djmilf · 12-04-2008, 08:23 PM

Use an HTML table.

<table>

<col width='25%'>
<col width='25%'>
<col width='25%'>
<col width='25%'>

<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>

</tr>
<tr>
<td><a href=... >Link 1</a></td>
<td><a href=... >Link 2</a></td>
<td><a href=... >Link 3</a></td>
<td><a href=... >Link 4</a></td>

</tr>
<tr>
...repeat for a new row of links...

</tr>

</table>

Greybear · 12-04-2008, 10:08 PM

Awesome, thanks djmilf, I will give it a try, albeit I'm an amateur.

thecoalman · 12-05-2008, 11:00 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">

* {
margin: 0;
padding: 0;
}

.column {
width: 25%;
float: left;
background: #00FF00;
}
</style>
<title></title>
</head>
<body>

<ul class="column">
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
</ul>

<ul class="column">
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
</ul>

<ul class="column">
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
</ul>

<ul class="column">
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
<li><a href="http://www.example.com">TEXT</a></li>
</ul>

</body>
</html>

Tek_Freek · 12-05-2008, 11:21 AM

In case anyone missed the embedded url in the previous (very nicely done) code:

World Wide Web Consortium - Web Standards