A better code for this

**jbert** · 08-05-2007, 01:51 PM

Code:

<h2 class="title">Helpful Links and Articles</h2>
				<ul class="list">
					<li><a href="http://www.webaperture.com">Webaperture</a>&nbsp;<a href="http://www.webaperture.com">Webaperture</a></li>
					<li><a href="http://www.dpreview.com">DP Review</a></li>
					<li><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox2 Technique</a></li>
					<li><a href="images/hdr.pdf">HDR Technique</a></li>
					<li><a href="images/batch.pdf">Photoshop Actions</a></li>
					<li><a href="http://randsco.com/index.php/2006/04/10/photo_caption_zoom_version_3">Photozoom Technique</a></li>
					<li><a href="http://www.flock.com/">Flock Browser</a></li>
									</ul>

I can make all other lines do the same and that is what I want. A double row on links. I can separate the links with a non-breaking space but that may not
let the right side of links line up straight.

Is there a better way to do this.

thanks-----Jim

**Twey** · 08-05-2007, 02:20 PM

If I understand you correctly,

Code:

<ul class="list-column">
  <li><a href="http://www.webaperture.com">Webaperture</a></li>
  <li><a href="http://www.dpreview.com">DP Review</a></li>
  <li><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox2 Technique</a></li>
  <li><a href="images/hdr.pdf">HDR Technique</a></li>
  <li><a href="images/batch.pdf">Photoshop Actions</a></li>
  <li><a href="http://randsco.com/index.php/2006/04/10/photo_caption_zoom_version_3">Photozoom Technique</a></li>
  <li><a href="http://www.flock.com/">Flock Browser</a></li>
</ul>
<ul class="list-column">
  <li><a href="http://www.webaperture.com">Webaperture</a></li>
</ul>

Code:

ul.list-column {
  width: 15em;
  float: left;
}

**jbert** · 08-05-2007, 04:51 PM

Hi Twey I put the code in but I still get the 1 line item in the second list-column under all the ones in the first? Suggestions

All my css is in external. My head section has some Javascript so I put the ul.list-column above the Javascripts here

Code:

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Jim Bertucci Photography</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />

<style>

ul.list-column {
  width: 15em;
  float: left;
}
</style>


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

**Twey** · 08-05-2007, 06:09 PM

Most flexibly you can do:

Code:

ul.list-column {
  width: 40&#37;;
  float: left;
}

... but this isn't always practical.

**jbert** · 08-05-2007, 06:26 PM

I got it to work leaving out the second class statement.. the uneven columns and spacing must be a browser thingy as I.E displays even and other do not. Ok for now, I will play with it more. You got me in the right direction.

Thanks

Jim

**jbert** · 08-05-2007, 09:30 PM

All is working great. Here's the final code----thanks

Code:

<h2 class="title">Helpful Links and Articles</h2>
								<ul class="list-column">
  <li><a href="http://www.webaperture.com">Webaperture</a></li>
  <li><a href="http://www.dpreview.com">DP Review</a></li>
  <li><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox2 Technique</a></li>
  <li><a href="images/hdr.pdf">HDR Technique</a></li>
  
</ul>
<ul>
  <li><a href="images/batch.pdf">Photoshop Actions</a></li>
  <li><a href="http://randsco.com/index.php/2006/04/10/photo_caption_zoom_version_3">Photozoom Technique</a></li>
  <li><a href="http://www.flock.com/">Flock Browser</a></li>
  
</ul>

Thread: A better code for this

Thread Tools

Search Thread

A better code for this

Bookmarks

Bookmarks

Posting Permissions