List with arrows in CSS |
List with arrows in CSS |
anunda |
Dec 29 2011, 11:17 AM
Post
#1
|
Group: Members Posts: 2 Joined: 29-December 11 Member No.: 16,157 |
I am extremely new to HTML. I have figured out most of what I am trying to do from w3schools, but i can not figure out how to use arrow in an HTML list from a CSS.
I tried images but I did not like to look. is there a better way to accomplish arrow in a list with out images? I am specifically trying to map out cisco commands and use arrow to show the command flow. for example MLS QoS -> aggregate-policer ______|->map->cos-dscp ____________|->dscp-cos Any ideas would help, also help with aligning the text properly. I was thinking about using the same words just hiding them to keep the spacing? Thank you Rob |
pandy |
Dec 29 2011, 12:18 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You can use an image of an arrow, either as an inline image or (better) as a positioned background image. Turn the default list bullets off.
Or you can insert an arrow character with content and :before . Older browsers won't display this. http://www.w3.org/TR/CSS2/generate.html#before-after-content I actually haven't tried the latter option with lists, but I don't see why it wouldn't work. |
Christian J |
Dec 29 2011, 02:06 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,649 Joined: 10-August 06 Member No.: 7 |
If the arrow image is part of the content, I suggest using inline images (the IMG element with proper ALT text), or ASCII art.
But if it's just for decoration, a CSS background-image could work (with varying amounts of left padding on the LI element for different arrow lengths). You can also use CSS "list-style-image", but unlike a background image you can't position it. |
pandy |
Dec 29 2011, 02:16 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Padding would work with an inline image, but not with a background. It needs to be positioned.
I didn't notice there were arrows in context too, not only used as bullet. You are right, an arrow symbol alternatively an inline image would be best then. A background is easier but not suitable for this. Unless doubled up with a hidden arrow character, but I think those tricks get a little fuzzy. |
Christian J |
Dec 29 2011, 04:39 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,649 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Dec 29 2011, 05:48 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Oh! OK.
|
anunda |
Dec 30 2011, 02:37 AM
Post
#7
|
Group: Members Posts: 2 Joined: 29-December 11 Member No.: 16,157 |
Thanks for the advice. I will try and see what I come up with.
Rob |
Lo-Fi Version | Time is now: 16th April 2024 - 07:33 PM |