The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> List with arrows in CSS
anunda
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 29 2011, 12:18 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 29 2011, 02:06 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
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.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 29 2011, 02:16 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 29 2011, 04:39 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 29 2011, 08:16 PM) *

Padding would work with an inline image, but not with a background. It needs to be positioned.

I meant you need to provide space (padding) in the LI so that the text doesn't cover the background image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 29 2011, 05:48 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh! OK.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
anunda
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 10:21 AM