20 replies [Last post]
enave
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

At the bottom of a page, I have a list of references. Since this is a list, it seems to me that it should be an ol. Right? Well, each item in the list is a title (which will be a link to a spot inside the page) and a link to the original source. I'd like to have the original sources lined up in a column along side the titles.

In a word document, I'd do this with tab stops. The result would look something like this:
1. title link
2. title link

I'm having a heck of a time implementing this in css. Here's what I have so far:

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

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Title</title>

<style type="text/css">
duh {
	display: block;
}
.title {
	width: 500px;
	text-align: left;
	float: left;
}
.link {
	width: 500px;
	text-align: right;
	float: right;
}
</style>

</head>

<body>

<ol>
	<li>
		<span class="title">one</span>
		<span class="link"><a href="/">one link</a></span>
	</li>
	<li>
		<span class="title">two</span>
		<span class="link"><a href="/">one link</a></span>
	</li>
	<li>
		<span class="title">three</span>
		<span class="link"><a href="/">one link</a></span>
	</li>
</ol>

</body>
</html>

Thanks in advance for any help (someone on this site always has the right answer for me)

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Floating Inside LI

any chance of a diagram showing how you want the list to look?

If its a two column list, I would think to use a dl.

dl {width:200px}
dt {width:98px; float:left; clear:both;}
dd {width:98px; float:right; }

<dl>
  <dt>one</dt><dd><a href="#">first link</a></dd>
  <dt>two</dt><dd><a href="#">second link</a></dd>
  ...
  <dt>last</dt><dd><a href="#">last link</a></dd>
</dl>

If you use an ordered list (ol) you shouldn't need to number the items as the ol will do that for you,

<ol>
  <li><a href"#">first link</a></li>
  <li><a href"#">second link</a></li>
  ...
  <li><a href"#">last link</a></li>
</ol>

To get all the list to display on one line, either float all the elements left, or make them display:inline.

enave
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Floating Inside LI

Chris..S wrote:
any chance of a diagram showing how you want the list to look?

sure. Sorry that I didn't include this in my op. I tried to do it using spaces and didn't notice that it didn't look the way I intended. I should have previewed the post!

Quote:
If its a two column list, I would think to use a dl.

hmm. Here's what that looks like to me:

Quote:
If you use an ordered list (ol) you shouldn't need to number the items as the ol will do that for you,

Laughing out loud I didn't number them in my example code!

I do think that I should use an ordered list though, because that's what the data is: a list of references. They have an intrinsic order, so ol seems to be "right" way to do it.

I guess what I'm saying is that I think the html below is correct, and I just need the css to format it.

<ol>
	<li>
		<span class="title">title one</span>
		<span class="link"><a href="/">link one</a></span>
	</li>
	<li>
		<span class="title">title two</span>
		<span class="link"><a href="/">link two</a></span>
	</li>
	<li>
		<span class="title">title three</span>
		<span class="link"><a href="/">link three</a></span>
	</li>
</ol>

Thanks again for the help.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Floating Inside LI

Can't you do something simple with floats - as in float the 'title' left and the 'link' right?

Verschwindende wrote:
  • CSS doesn't make pies

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

Floating Inside LI

css

.title {
	width:200px;
	display:block;
	float:left
}
.space {
	margin-right:5px
}
ul {
	margin:0;
	padding:0;
	list-style-type:none
}
li {
	margin:0 0 0 15px;
	padding:0 0 0 15px
}

xhtml

<ul>
	<li><span class="title"><span class="space">1.</span> title one</span> <a href="/">link one</a></li>
	<li><span class="title"><span class="space">2.</span> title two</span> <a href="/">link two</a></li>
	<li><span class="title"><span class="space">3.</span> title three</span> <a href="/">link three</a></li>
</ul>

Hi

I gave it a shot, but unfortunatly I have had to text in the numbers of the list because internet explorer placed them between the title and link parts.

To get around that I just turned off the list-style-type, the problem then was that if you switch off the style sheet you get double numbers.

To get around that I had to change the Ordered List into an Un-ordered List. Which obviously leaves a litle dot.

Not ideal but it looks the same, and it seems simple-ish.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Floating Inside LI

bah, you need to zero the margins and padding for the dl list to work, just add

dl, dt, dd {margin:0; padding:0;}

the same structure will work for your ol list, in the CSS replace dt with title and dd with link. So ...

li {width:200px;}
.title {width:98px; float:left; clear:both;}
.link {width:98px; float:right; } 

margins and padding shouldn't be so critical here as the span by default won't have any. You may need to control them on the ol and li elements to ensure all browsers display the list appropriately.

enave
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Floating Inside LI

thepineapplehead wrote:
Can't you do something simple with floats - as in float the 'title' left and the 'link' right?

Using this css:

.title {
   text-align: left;
   float: left;
}
.link {
   text-align: right;
   float: right;
} 

results in this totally messed up output in firefox and IE:

pretty weird huh

.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Floating Inside LI

nope.

you missed out the clear:both on the .title. see my post above Wink

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Floating Inside LI

it may work out best to do your code like this

ol {width:300px; margin:0; padding:0;}
ol li {clear: right;}
.link {float:right; width:150px;}
.title {}

the link span will need to appear before the title span within each li element. By not floating the title span you will avoid the title appearing over the top of the ol numbering.

If you my earlier code you are probably going to have to play around with margins and paddings to ensure the numbering appears in the correct place.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

Floating Inside LI

Bodged in opera.

enave
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Floating Inside LI

Chris..S wrote:
it may work out best to do your code like this

ol {width:300px; margin:0; padding:0;}
ol li {clear: right;}
.link {float:right; width:150px;}
.title {}

A lot of people have thrown out ideas and I've tried them all. I don't think any of them worked exactly. Here's what I get with yours Chris:

And this other idea:

li {width:200px;}
.title {width:98px; float:left; clear:both;}
.link {width:98px; float:right; } 

sort of works in IE, but check it out: it doesn't increment the numbers! It goes, 1. 1. 1. instead of 1. 2. 3. That's hilarious! I bet you couldn't do that on purpose if someone asked for it! lol.

Anyway, it doesn't work in firefox.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Floating Inside LI

Hi there

Just an idea - but why don't you do away with the "real" UL and do a fake one (i.e. 1, 2, 3 at the start of each line) and work the floating thing as per the "Splitting the Difference" ALA article at the bottom of this page: http://www.alistapart.com/articles/practicalcss/

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

Floating Inside LI

Just checked mine in explorer opera and firefox and they all look exactly the same.

Other than having the numbers writen in it's perfect.

[Edit]

I took out 'ish' on perfect.

enave
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Floating Inside LI

Chris..S wrote:
the link span will need to appear before the title span within each li element.

bingo! This works:

<style type="text/css">
.link {
   float: right;
	 width:20%
} 
</style>

<ol>
	<li>
		<span class="link"><a href="/">link one</a></span>
		<span class="title">title one</span>
	</li>
	<li>
		<span class="link"><a href="/">link two</a></span>
		<span class="title">title two</span>
	</li>
	<li>
		<span class="link"><a href="/">link three</a></span>
		<span class="title">title three</span>
	</li>
</ol>

however, take a look at this thread to see why I didn't do that to begin with.

http://www.csscreator.com/css-forum/ftopic9604.html

If nobody has a better idea, I guess I'll go with this one.

Quote:
Just an idea - but why don't you do away with the "real" UL and do a fake one (i.e. 1, 2, 3 at the start of each line)

well, the only good answer that I have for that is, I was trying to do html and css the way you're supposed to do it. That is, since I had an ordered list, theoretically the html should be an ordered list and I should be able to make that look any way I want it to using only css. When you change the html in order to facilitate a particular look, you're technically violating the principle of the thing.

enave
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Floating Inside LI

Joseph Sprint wrote:
Just checked mine in explorer opera and firefox and they all look exactly the same.

yes, yours does work, but see my reply above. I was just being a stickler here. Since my data was an ordered list, I was trying to use an ol.

thanks for the help though.
.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

Floating Inside LI

The one you have just decided on doesn't work in opera.

I'm bored now anyway. :roll:

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Floating Inside LI

voila!

ol, ol li {margin:0; padding:0; margin-left:2em; padding-left:2em;}

ol#titlelinks li {width:200px;}
ol#titlelinks li:after {content:'.'; display:block; clear:both; height:0; line-height:0; visibility:hidden;}
* html ol#titlelinks li {height:1px;} /* holly hack, may need hiding from IE/Mac */
.title {width:45%; float:left; }
.link {}

<ol id='titlelinks'>
   <li><span class="title">title one</span><a href="/">link one</a></li>
   <li><span class="title">title two</span><a href="/">link two</a></li>
   <li><span class="title">title three</span><a href="/">link three</a></li>
</ol>

enave
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Floating Inside LI

Chris, does that work for you in IE?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Floating Inside LI

for some reason, IE doesn't increment the ol numbers. you may want to do a search on IE bugs to see if its known and if there is a solution.

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 11 min 51 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Floating Inside LI

If you apply the Holly Hack on li or otherwise cause it to have hasLayout, list markers are screwed up. Use the hack on <a> instead. No guarantees, but it does the job on uls.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Floating Inside LI

Thanks for the tip.

It doesn't need the holly hack, but without hasLayout IE moves the list numbers so they appear just to the left of the first unfloated text in the li element - which will place them under the float:left text.

I fixed that by feeding IE margin-left and padding-left values to compensate - these equate to the width of the floated element. To work the values for all three will probably need to be in px. When I tried % everything became messed up.

Anyways, here are the new styles. Page link above has been updated any now works in IE6. I suspect you will need to check IE/Mac to decide whether the IE6 margins/padding need to be hidden from it.

ol, ol li {margin:0; padding:0; margin-left:2em; padding-left:2em;}

ol#titlelinks {width:200px;}
ol#titlelinks li {margin-left:0; padding-left:0;}
* html #titlelinks li {margin-left:-70px; padding-left:70px;}
ol#titlelinks li:after {content:'.'; display:block; clear:both; height:0; line-height:0; visibility:hidden;}
.title { width:70px; float:left; }
.link {}