U.S. CitiesCity-Data Forum Index
Go Back   City-Data Forum > General Forums > Science and Technology > Internet
 [Register]
Please register to participate in our discussions with 2 million other members - it's free and quick! Some forums can only be seen by registered members. After you create your account, you'll be able to customize options and access all our 15,000 new posts/day with fewer ads.
View detailed profile (Advanced) or search
site with Google Custom Search

Search Forums  (Advanced)
 
Old 12-04-2008, 07:56 PM
 
189 posts, read 492,226 times
Reputation: 189

Advertisements

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
Reply With Quote Quick reply to this message

 
Old 12-04-2008, 09:23 PM
 
5,115 posts, read 4,719,309 times
Reputation: 4380
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>
Reply With Quote Quick reply to this message
 
Old 12-04-2008, 11:08 PM
 
189 posts, read 492,226 times
Reputation: 189
Awesome, thanks djmilf, I will give it a try, albeit I'm an amateur.
Reply With Quote Quick reply to this message
 
Old 12-05-2008, 12:00 PM
 
40,169 posts, read 41,782,366 times
Reputation: 16740
<!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>
Reply With Quote Quick reply to this message
 
Old 12-05-2008, 12:21 PM
 
28,607 posts, read 40,588,688 times
Reputation: 37262
In case anyone missed the embedded url in the previous (very nicely done) code:

World Wide Web Consortium - Web Standards
Reply With Quote Quick reply to this message
Please register to post and access all features of our very popular forum. It is free and quick. Over $68,000 in prizes has already been given out to active posters on our forum. Additional giveaways are planned.

Detailed information about all U.S. cities, counties, and zip codes on our site: City-data.com.


Reply
Please update this thread with any new information or opinions. This open thread is still read by thousands of people, so we encourage all additional points of view.

Quick Reply
Message:

Over $104,000 in prizes was already given out to active posters on our forum and additional giveaways are planned!

Go Back   City-Data Forum > General Forums > Science and Technology > Internet
Similar Threads
Follow City-Data.com founder on our Forum or

All times are GMT -6. The time now is 07:29 AM.

© 2005-2019, Advameg, Inc. · Please obey Forum Rules · Terms of Use and Privacy Policy · Bug Bounty

City-Data.com - Archive 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35 - Top