Arrows

How to apply arrows adjacent to text.

Using a table

The borders, background colors etc can be removed if necessary with a css module or in your main css.

arrow_up.jpg Aenean sit amet erat sodales, tempor lacus id, pretium nibh. Proin ac convallis massa. Vivamus ut tellus sed ligula accumsan tempor. Integer varius convallis sem. Pellentesque a metus non arcu laoreet laoreet. Nam eget ligula placerat, egestas metus id, viverra massa. Vestibulum pellentesque nibh nibh, sit amet auctor massa bibendum vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus lacus nec odio mattis tempus.
arrow_down.jpg Aenean sit amet erat sodales, tempor lacus id, pretium nibh. Proin ac convallis massa. Vivamus ut tellus sed ligula accumsan tempor. Integer varius convallis sem. Pellentesque a metus non arcu laoreet laoreet. Nam eget ligula placerat, egestas metus id, viverra massa. Vestibulum pellentesque nibh nibh, sit amet auctor massa bibendum vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus lacus nec odio mattis tempus.

Using Divs

As the images are JPGs they show the white background color instead of being transparent which they could be with PNGs.

The width of the arrow div is just slightly wider than the width of the image. For the text yOu might want to make it a % width instead of px.

arrow_up.jpg

Aenean sit amet erat sodales, tempor lacus id, pretium nibh. Proin ac convallis massa. Vivamus ut tellus sed ligula accumsan tempor. Integer varius convallis sem. Pellentesque a metus non arcu laoreet laoreet. Nam eget ligula placerat, egestas metus id, viverra massa. Vestibulum pellentesque nibh nibh, sit amet auctor massa bibendum vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus lacus nec odio mattis tempus.

arrow_down.jpg

Aenean sit amet erat sodales, tempor lacus id, pretium nibh. Proin ac convallis massa. Vivamus ut tellus sed ligula accumsan tempor. Integer varius convallis sem. Pellentesque a metus non arcu laoreet laoreet. Nam eget ligula placerat, egestas metus id, viverra massa. Vestibulum pellentesque nibh nibh, sit amet auctor massa bibendum vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus lacus nec odio mattis tempus.

Syntax

++ Using a table

|| [[image http://community.wikidot.com/local--files/files/arrow_up.jpg]] || Aenean sit amet erat sodales, tempor lacus id, pretium nibh. Proin ac convallis massa. Vivamus ut tellus sed ligula accumsan tempor. Integer varius convallis sem. Pellentesque a metus non arcu laoreet laoreet. Nam eget ligula placerat, egestas metus id, viverra massa. Vestibulum pellentesque nibh nibh, sit amet auctor massa bibendum vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus lacus nec odio mattis tempus. ||

|| [[image http://community.wikidot.com/local--files/files/arrow_down.jpg]] || Aenean sit amet erat sodales, tempor lacus id, pretium nibh. Proin ac convallis massa. Vivamus ut tellus sed ligula accumsan tempor. Integer varius convallis sem. Pellentesque a metus non arcu laoreet laoreet. Nam eget ligula placerat, egestas metus id, viverra massa. Vestibulum pellentesque nibh nibh, sit amet auctor massa bibendum vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus lacus nec odio mattis tempus. ||

++ Using Divs

[[div style="width:100px; float:left;"]]
[[image http://community.wikidot.com/local--files/files/arrow_up.jpg]]
[[/div]]

[[div style="width:700px;"]]
Aenean sit amet erat sodales, tempor lacus id, pretium nibh. Proin ac convallis massa. Vivamus ut tellus sed ligula accumsan tempor. Integer varius convallis sem. Pellentesque a metus non arcu laoreet laoreet. Nam eget ligula placerat, egestas metus id, viverra massa. Vestibulum pellentesque nibh nibh, sit amet auctor massa bibendum vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus lacus nec odio mattis tempus.
[[/div]]

[[div style="width:100px; float:left;"]]
[[image http://community.wikidot.com/local--files/files/arrow_down.jpg]]
[[/div]]

[[div style="width:700px;"]]
Aenean sit amet erat sodales, tempor lacus id, pretium nibh. Proin ac convallis massa. Vivamus ut tellus sed ligula accumsan tempor. Integer varius convallis sem. Pellentesque a metus non arcu laoreet laoreet. Nam eget ligula placerat, egestas metus id, viverra massa. Vestibulum pellentesque nibh nibh, sit amet auctor massa bibendum vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus lacus nec odio mattis tempus.
[[/div]]

[[div style="clear:left;"]]
[[/div]]
Site Design, Syntax and Examples by Rob Elliott 2008-2016