|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
July 25th, 2004, 05:37 PM
|
||||
|
||||
|
Indenting second line?
I have a left-hand side nagivation TD containing plain-text links. The TD is a fixed width and I want to be able to indent automatically the second line of text in a link should the text for the text for the link exceed the fixed width of the TD. Anyone know how to achieve this effect?
An example of what I might want it to look like... Code:
Link one Link two A longer link three Link four
__________________
Reinventing the wheel again
|
|
#2
July 25th, 2004, 06:10 PM
|
||||
|
||||
|
Combine margin and text-indent. Remember that text-indent applies to block elements only.
Code:
a {
display: block;
margin-left: 2em;
text-indent: -2em;
}
cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#3
July 25th, 2004, 09:30 PM
|
||||
|
||||
An excellent and sneaky way of doing it... very cool... but I'm having a problem.
I'm applying a hover style to the link and it seems to highlight only the text that is beyond the 2em margin-left point on hover.  Any other alternative or way to fix that? I tried different display properties to no avail...Thanks in advance...
|
|
#4
July 25th, 2004, 11:16 PM
|
||||
|
||||
|
I noticed the same thing. The background color is limited to the part beyond the margin. My 'cure' was to change the text-decoration and/or other properties that applied to the text itself. Were IE not so braindead, you could apply the :hover class to the td element. You could use javascript and the onmouseover event handler. Oh well
 cheers, gary
|
|
#6
July 26th, 2004, 12:29 AM
|
||||
|
||||
|
hmm... ok, padding-left works better than margin-left, and it works fine in firefox (as does pretty much everything) but the first few characters of each link disappear in IE (surprise, IE hates me)... here's what i've got...
Code:
a:link.navigationLinkLeft,
a:visited.navigationLinkLeft,
a:active.navigationLinkLeft
{
color: #5a1e5f;
text-decoration: none;
display: block;
padding-left: 1em;
text-indent: -1em;
}
a:hover.navigationLinkLeft
{
background-color: #5a1e5f;
color: #4EA77C;
display: block;
padding-left: 1em;
text-indent: -1em;
}
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Indenting second line? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
