Log in

View Full Version : A better code for this


jbert
08-05-2007, 01:51 PM
<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,
<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>
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


<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:
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



<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>