Stylesheets - line-height in wrapped text

Author

line-height in wrapped text

Frostillicus

2004-08-19, 1:21 pm

I'm having difficulty creating a menu on the left of a web page where each
link appears to have a 4px padding around the edge but I'm trying to do this
as a pure unordered list. The "current web page" is just a line item without
a hyperlink and the stylesheet takes care of everything.

I thought I had everything fine and dandy after doing this: #menu li {
line-height: 22px; } as seen in this example:
http://marc.fearby.com/line-height.html but as soon as the text wraps to a
second line, the unsightly effect is a large gap between the two lines.

I then thought about using padding settings here and there but this just
didn't work. I tried #menu li a { padding-bottom: 4px; } which is fine for
list items that contain hyperlinks, but not for ordinary list items. As soon
as I try doing this for ordinary list items, they look fine at the expense
of those with hyperlinks. Example with inline style here:
http://marc.fearby.com/padding.html

I can't fix one up without ruining the other and I can't employ negative
margins which I used to get around this same problem for the margin-left (or
at least I haven't got it to work yet, unfortunately).

Is such a thing possible with just bare-bones lists and hyperlinks or am I
going to have to use divs for east list item and fine some way to make it
work with extra tags? I sure hope not...

Els

2004-08-19, 10:38 pm

Frostillicus wrote:

> I'm having difficulty creating a menu on the left of a web
> page where each link appears to have a 4px padding around
> the edge but I'm trying to do this as a pure unordered
> list. The "current web page" is just a line item without
> a hyperlink and the stylesheet takes care of everything.
>
> I thought I had everything fine and dandy after doing this:
> #menu li { line-height: 22px; } as seen in this example:
> http://marc.fearby.com/line-height.html but as soon as the
> text wraps to a second line, the unsightly effect is a
> large gap between the two lines.
>
> I then thought about using padding settings here and there
> but this just didn't work. I tried #menu li a {
> padding-bottom: 4px; } which is fine for list items that
> contain hyperlinks, but not for ordinary list items. As
> soon as I try doing this for ordinary list items, they look
> fine at the expense of those with hyperlinks. Example with
> inline style here: http://marc.fearby.com/padding.html
>
> I can't fix one up without ruining the other and I can't
> employ negative margins which I used to get around this
> same problem for the margin-left (or at least I haven't got
> it to work yet, unfortunately).
>
> Is such a thing possible with just bare-bones lists and
> hyperlinks or am I going to have to use divs for east list
> item and fine some way to make it work with extra tags? I
> sure hope not...

Only one extra tag and one extra styleblock to go with the tag
:-)

http://locusmeus.com/temp/frostillicus.html

Is that what you were looking for? I sort of got lost in all
the paddings and pixels in your story...

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els

2004-08-19, 10:38 pm

Els wrote:

> Frostillicus wrote:
>
[...][color=darkred]
>
> Only one extra tag and one extra styleblock to go with the
> tag
>:-)
>
> http://locusmeus.com/temp/frostillicus.html
>
> Is that what you were looking for? I sort of got lost in
> all the paddings and pixels in your story...

Oh, and btw, get rid of pt for font-size, use percentages, so IE
users can resize them too.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Stephen Poley

2004-08-19, 10:38 pm

On Thu, 19 Aug 2004 22:46:45 +1000, "Frostillicus"
<frosty@nilspamos.iinet.net.au> wrote:

>I'm having difficulty creating a menu on the left of a web page where each
>link appears to have a 4px padding around the edge but I'm trying to do this
>as a pure unordered list. The "current web page" is just a line item without
>a hyperlink and the stylesheet takes care of everything.
>
>I thought I had everything fine and dandy after doing this: #menu li {
>line-height: 22px; } as seen in this example:
>http://marc.fearby.com/line-height.html but as soon as the text wraps to a
>second line, the unsightly effect is a large gap between the two lines.

>I then thought about using padding settings here and there but this just
>didn't work. I tried #menu li a { padding-bottom: 4px; } which is fine for
>list items that contain hyperlinks, but not for ordinary list items. As soon
>as I try doing this for ordinary list items, they look fine at the expense
>of those with hyperlinks. Example with inline style here:
>http://marc.fearby.com/padding.html

#menu li { padding-bottom: 4px; } would work fine, except that you
seem to have confused things by specifying a background-color in "#menu
li a" instead of "#menu li". If you want a different background colour
in the cell corresponding to the current page you'll need a class on
that cell, but I suggest that a contrasting foreground colour would be
as good, if not better.

Actually it would probably look better with (a) padding all the way
around, and (b) padding in ems, so it is proportional to the text size.
Soemthing like #menu li { padding: 0.3em; }

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Frostillicus

2004-08-19, 10:38 pm

I guess I got carried away in trying to keep the HTML as bare-bones as
possible, and when I view the page without the stylesheet, I like having the
current page appear as just an ordinary list-item and no hyperlink, but as
els has suggested, I guess I just gotta put a class in there and use a
hyperlink to achieve what I want.

"Stephen Poley" <sbpoleySpicedHamTrap@xs4all.nl> wrote in message
news:fto9i0pm9v5rs6ta8ifm9gl29lst1uu66e@4ax.com...
> #menu li { padding-bottom: 4px; } would work fine, except that you
> seem to have confused things by specifying a background-color in "#menu
> li a" instead of "#menu li". If you want a different background colour
> in the cell corresponding to the current page you'll need a class on
> that cell, but I suggest that a contrasting foreground colour would be
> as good, if not better.
>
> Actually it would probably look better with (a) padding all the way
> around, and (b) padding in ems, so it is proportional to the text size.
> Soemthing like #menu li { padding: 0.3em; }
>
> --
> Stephen Poley
>
> http://www.xs4all.nl/~sbpoley/webmatters/

Els

2004-08-19, 10:38 pm

Frostillicus wrote:

> I guess I got carried away in trying to keep the HTML as
> bare-bones as possible, and when I view the page without
> the stylesheet, I like having the current page appear as
> just an ordinary list-item and no hyperlink, but as els has
> suggested, I guess I just gotta put a class in there and
> use a hyperlink to achieve what I want.

No, not a hyperlink, just an <a> element.

And you'll have to check my code to see how exactly it works,
but disabling the styles for my pages, leaves the current menu
item not underlined, as it's not a link.

It just helps to code all menu items the same way.
I did it myself with the menu on my own site, couldn't find
another method to get them divided all evenly.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Mr. Big - Green-tinted Sixties Mind

Frostillicus

2004-08-19, 10:38 pm

Thanks, Els. The only thing I had to do was specify a padding-top so that IE
didn't render the page with the text all scrunched up at the top. It looked
perfectly OK in Firefox, but, as usual, we have to cater for IE sadly.

Thanks for your help!

"Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:Xns954ABEB04232CEls@130.133.1.4...
> Els wrote:
> Oh, and btw, get rid of pt for font-size, use percentages, so IE
> users can resize them too.
>
> --
> Els
> http://locusmeus.com/
> Sonhos vem. Sonhos vão. O resto é imperfeito.
> - Renato Russo -

Brian

2004-08-21, 4:34 am

Els wrote:

> Frostillicus wrote:
>
[snip]

25 lines of quoted material (not including blank lines)...
[color=darkred]
> Only one extra tag and one extra styleblock to go with the tag
[snip]

5 lines of new material, one with only an emoticon. Not a very good s/n
radio, Els.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Els

2004-08-21, 4:34 am

Brian wrote:

> Not a very good s/n radio, Els.

Not a very good spelling, Brian ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Skid Row - 18 and Life (Live in Knoxville 91)

Brian

2004-08-21, 4:34 am

Els wrote:

> Brian wrote:
>
>
> Not a very good spelling, Brian ;-)

Touché.[1] It's the field I used to work in; I inquired about a radio
job this week, so it's fresh on my mind. Plus, s/n ratio is quite
related to radio equipment.

[1] You're still not off the hook for excessive quoting! :-p

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Els

2004-08-21, 4:34 am

Brian wrote:

> Els wrote:
>
>
> Touché.[1] It's the field I used to work in; I inquired
> about a radio job this week, so it's fresh on my mind.

Are you getting the job?

> Plus, s/n ratio is quite related to radio equipment.

Weak. Very weak argument. <g>

> [1] You're still not off the hook for excessive quoting!
> :-p

That's okay ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Brian

2004-08-23, 4:15 am

Els

2004-08-23, 4:15 am