PDA

View Full Version : line-spacing question

eliboone
07-21-2008, 09:30 AM
I was reading about the line-spacing markup in html and was wondering what the best method is for decreasing space between two text elements.

For example if I had 2 text links such as

somelink1
somelink2

how do I decrease the white space that is between these 2 links?

Thanks, Eli
coothead
07-21-2008, 10:03 AM
Hi there eliboone,

this example should give you a feel for line:height. :agree:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
#normal_li {
line-height:normal;
background-color:#fee;
}
#morespaced_li {
line-height:1.5;
background-color:#eef;
}
#lessspaced_li {
line-height:0.8;
background-color:#efe;
}
</style>

</head>
<body>

<ul id="normal_li">
<li><a href="#">somelink 1</a></li>
<li><a href="#">somelink 2</a></li>
<li><a href="#">somelink 3</a></li>
<li><a href="#">somelink 4</a></li>
</ul>

<ul id="morespaced_li">
<li><a href="#">somelink 1</a></li>
<li><a href="#">somelink 2</a></li>
<li><a href="#">somelink 3</a></li>
<li><a href="#">somelink 4</a></li>
</ul>

<ul id="lessspaced_li">
<li><a href="#">somelink 1</a></li>
<li><a href="#">somelink 2</a></li>
<li><a href="#">somelink 3</a></li>
<li><a href="#">somelink 4</a></li>
</ul>

</body>
</html>

Further reading:-
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height
eliboone
07-24-2008, 04:22 PM
Hi coothead and thanks for the reply.
I used line-height:1; to lessen the line space and it works unless I put a value less than 1. when I tried line-height:0.8; or less it didn't shrink the distance between the elements. On this page http://www.rabbitstop.com/mm5/merchant.mvc?Screen=CTGY&Store_Code=rs&Category_Code=3MarshallHabitats there is still a lot of space between the black text links in the left-cat tree.
althalus
07-24-2008, 04:34 PM
Replace<div class="tiny">•<a href="/mm5/merchant.mvc?Screen=CTGY&Store_Code=rs&Category_Code=2RabbitDiets">Diets</a></div>
<div class="tiny">•<a href="/mm5/merchant.mvc?Screen=CTGY&Store_Code=rs&Category_Code=2RabbitHays">Hays</a></div>
<div class="tiny">•<a href="/mm5/merchant.mvc?Screen=CTGY&Store_Code=rs&Category_Code=2RabbitTreats">Treats</a></div>
with<div class="tiny">•<a href="/mm5/merchant.mvc?Screen=CTGY&Store_Code=rs&Category_Code=2RabbitDiets">Diets</a><br />
•<a href="/mm5/merchant.mvc?Screen=CTGY&Store_Code=rs&Category_Code=2RabbitHays">Hays</a><br />
•<a href="/mm5/merchant.mvc?Screen=CTGY&Store_Code=rs&Category_Code=2RabbitTreats">Treats</a></div>and see if that works for ya. :-]
eliboone
07-25-2008, 09:07 AM
Hi althalus,

Thanks for the code. It is working, but it is only working on the links that are so long that they have to be listed on two lines. For example check out the 'salt/mineral treats' link about 1/3 of the way down the page. http://www.rabbitstop.com/mm5/merchant.mvc?Screen=CTGY&Store_Code=rs&Category_Code=RabbitFood

I just don't know of any other solution for this code that would make the space shrink between each link.
Pegasus
07-25-2008, 09:13 AM
Don't you have to have a measurement when you use CSS? .8em or something like that? Or 80%?
coothead
07-25-2008, 09:49 AM
Hi there Peg,
Don't you have to have a measurement when you use CSS?
This is the w3.org information on this...

number
The computed value of the property is this number multiplied by the element's font size.
Negative values are illegal.
However, the number, not the computed value, is inherited.
Pegasus
07-25-2008, 11:33 AM
Okay. I stand corrected. Thank you.
eliboone
07-25-2008, 02:21 PM
I guess having each text link seperated by a <br /> tag makes the line-height pretty worthless for my links. (except for the links that wrap to a second line) I wrapped each set of black links in the div tag but it isn't removing space between the links. It is still only working on the links that wrap to a second line, such as 'Salt/Mineral Treats'.
coothead
07-25-2008, 03:43 PM
Hi there eliboone,

If you look at the code that I gave you, you will see that the semantic method for aligning links vertically is to use the ul element.
Why have you not applied that method. :confused:
If you had done so, this thread would have long since been marked [resolved]. :agree:
eliboone
07-28-2008, 09:47 AM
Hi Coothead,

I used the <ul> but the links are not over to the far left like I want. I added this to my css and it moved them a little bit from the center, but not far enough

ul {
padding-left: 0px;
text-align: left;
}

You can see that the first set of black text links in the cat tree are not as close to the left of the page as the links below it. Is there anything else I can try?
http://www.rabbitstop.com/custservicecenter.shtml

Thank you,
althalus
07-28-2008, 10:04 AM
Add a margin-left: 0; as well, should do the trick.
JoeyD
07-28-2008, 11:23 AM
What the heck is this >>• character? How does it come to be? It's actually very important for me to know, i think, cuz i've got a client gives me InDesign files with that thingy in it, and it doesn't translate to UTF-8.
Pegasus
07-28-2008, 11:29 AM
The bullet character? You can change that by changing the list-style-type: If you want it removed, then it's list-style-type: none; as part of the description for the <li>.
JoeyD
07-28-2008, 11:42 AM
No, it's in his code:

•<a href="/mm5/merch...etc.
Pegasus
07-28-2008, 11:45 AM
He's not using a list for that part of the menu. I believe that's a replacement for the bullet. That's what it looks like to me, anyway.
JoeyD
07-28-2008, 12:51 PM
He's not using a list for that part of the menu. I believe that's a replacement for the bullet.
Well yeah, that's why Coothead is grumping again, and i'm completely understand the entire thread, and HTML lists and everything,

i want to know what that character *is*, what's it made of, how's it come to be inside his code, how did he, as you say, "use it for a replacement" dangit i'm just not saying something right and you can't search Google for "•"

...when client gives me InDesign document with that doohickey innit and i export to XHTML and put it on a web page served as UTF-8 it don't work...
Pegasus
07-28-2008, 01:14 PM
On my computer, it's option+8 to create that. I think the HTML code for it is &middot; & middot;
JoeyD
07-28-2008, 01:21 PM
AHA! It is an interpunct (http://en.wikipedia.org/wiki/Interpunct)! I should have guessed.

Thanks.
Pegasus
07-28-2008, 02:02 PM
Interpunct? Sounds like it should be some fancy web punctuation, not dating that far back. Hmmmm...