Suggestions for making a link page with pictures

tjcusick · Jun 6, 2008

I have converted most of my website pages using CSS and I would like to thank everyone for all their encouragement, (yeah that is the word i will use here)...

But now i come to a page that i have struggled with for some time and went back to a tried and true method and everyone on this board hates... i used a table... *hangs head in shame*

How do i create a Link page where there are pictures and text involved and have it line up nicely when not all the pictures are exactly the same?
here is the link

http://susquehannacachecorps.bravehost.com/links_page.html

The problem i had was that some of the words would line up next to the picture and then some of the others woudl line all goofy like... there was no cosistancy... does anyone have a css that they use for a links page or any other suggestions?

Thanks for the help

Tom C

traingamer · Jun 6, 2008

One way is with floats:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head>
    <title>Test Link floats</title>
     <style type="text/css">
body {
	font-family: Arial, sans-serif;
	font-size: small;
	}
.quicklink {
  	float: left;
  	width: 85%;
  	padding: 10px 0;
  	background: url(img/bg.gif) no-repeat top left;
  	}
.quicklink  img {
  	float: left;
  	margin: 0 8px 0 0;
  	padding: 4px;
  	border: 1px solid #D9E0E6;
  	border-bottom-color: #C8CDD2;
  	border-right-color: #C8CDD2;
  	background: #fff;
  	}

    </style>
</head>
<body>
<div class="quicklink">
<a href="[URL unfurl="true"]http://www.logicweave.com/cachestats.html">[/URL]
<img src="images/lwlogo.jpg" width="209" height="61" alt="" /></a>
<p><a href="[URL unfurl="true"]http://www.logicweave.com/cachestats.html">CacheStats[/URL] - 
Geocaching Statistics...</a>  Like geocaching? Check out CacheStats, 
a program that reports geocache statistics. Track your find rate, 
your milestones, your FTF caches, and more!</p>
</div>
<div class="quicklink">
<a href="[URL unfurl="true"]http://www.gsak.net/"><img[/URL] src="images/gsak1.JPG" width="128" 
height="128" alt="" /></a>
<p><a href="[URL unfurl="true"]http://www.gsak.net/">GSAK[/URL] (Geocaching Swiss Army Knife)</a> (GPX/LOC)
 - GSAK is the all in one Geocaching and blah, blah.</p>
</div>
</body>
</html>

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

tjcusick · Jun 6, 2008

Yeah that sort of works alright but i still have to manipulate it by putting extra breaks between link items.

I guess it will work for now...

Thanks

traingamer · Jun 6, 2008

Instead of extra breaks, you may want to simply adjust the padding and margins. One of the major points of css is to simplify the markup and separate content from presentation.

This css was originally for another purpose - I simply made some quick changes for a demo. You can (and should) change it to suit your needs.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Suggestions for making a link page with pictures

tjcusick

Programmer

traingamer

Programmer

tjcusick

Programmer

traingamer

Programmer

Similar threads

Part and Inventory Search

Sponsor