photosynthesis | Navigation: The Sky Broke Apart & You Appeared

A fairly simple navigation table with a background image and nine links!

Art Credit: Celty / Refia

Short/Celty Version

Tall/Refia Version

<raw-code><center>
<div style="width:500px; height:300px; display:block; border-radius:20px; background-image:url('background image');">
<div style="width:150px; float:right; display:block;">
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-top-right-radius:20px; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url one">link one</a>
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url two">link two</a>
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url three">link three</a>
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url four">link four</a>
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url five">link five</a>
</div>
<span style="display:block; width:480px; padding-left:20px; background:rgba(0,0,0,0.4); color:#FFFFFF; font:italic 43px Georgia; text-align:left; height:50px; clear:both; letter-spacing:2px; text-shadow:-2px 2px #000000;">name</span>
<div style="width:150px; float:right; display:block;">
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-top:1px dotted #FFFFFF; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;">link six</a>
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url seven">link seven</a>
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url eight">link eight</a>
<a style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url nine">link nine</a>
<a href="http://photosynthesis.dreamwidth.org/" style="display:block; height:24px; width:150px; font:20px Georgia; text-align:center; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF; border-bottom-right-radius:20px;">code credit</a>
</div>
</div></center></raw-code>

<raw-code><center>
<div style="width:350px; height:450px; display:block; border-radius:20px; background-image:url('background image');">
<div style="width:150px; float:right; display:block;">
<a style="display:block; height:49px; width:150px; font:20px Georgia; line-height:50px; text-align:center; border-top-right-radius:20px; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url one">link one</a>
<a style="display:block; height:49px; width:150px; font:20px Georgia; line-height:50px; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url two">link two</a>
<a style="display:block; height:49px; width:150px; font:20px Georgia; line-height:50px; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url three">link three</a>
<a style="display:block; height:49px; width:150px; font:20px Georgia; line-height:50px; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url four">link four</a>
</div>
<span style="display:block; width:330px; padding-left:20px; background:rgba(0,0,0,0.4); color:#FFFFFF; font:italic 43px Georgia; text-align:left; height:50px; clear:both; letter-spacing:2px; text-shadow:-2px 2px #000000;">name</span>
<div style="width:150px; float:right; display:block;">
<a style="display:block; height:49px; width:150px; font:20px Georgia; line-height:50px; text-align:center; border-top:1px dotted #FFFFFF; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url five">link five</a>
<a style="display:block; height:49px; width:150px; font:20px Georgia; line-height:50px; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;">link six</a>
<a style="display:block; height:49px; width:150px; font:20px Georgia; line-height:50px; text-align:center; border-bottom:1px dotted #FFFFFF; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF;" href="url seven">link seven</a>
<a href="http://photosynthesis.dreamwidth.org/" style="display:block; height:49px; width:150px; font:20px Georgia; line-height:50px; text-align:center; text-decoration:none; background:rgba(0,0,0,0.7); color:#FFFFFF; border-bottom-right-radius:20px;">code credit</a>
</div>
</div></center></raw-code>

Stuff to replace:

background image	The URL of the image you want to use as the background. It should be 500x300 pixels exactly for the shorter version, and 350x450 pixels exactly for the taller one.
url one, url two, ... url nine	The URLs for each link, one through nine (or eight if you're using the taller version).
link one, link two ... link nine	The text for each link.
name	Whatever text you'd like in the center banner.
0,0,0,0.7	If you want a different background color for the links, replace those three zeroes with the RGB value of a color. The zeroes are the only thing that should be replaced; leave the commas, (lack of) spacing, and 0.7 intact. If you want to change the text color, too, find the bit that says color:#FFFFFF directly after that and change the #FFFFFF to a hex code of your choice.
0,0,0,0.4	Same as above, but if you want to change the background color for the bar in the middle. If you want to change the text color, too, find the bit that says color:#FFFFFF directly after that and change the #FFFFFF to a hex code of your choice.

Please leave the credit intact, and as always, give me a holler if you need any help with this code at all!

Navigation: The Sky Broke Apart & You Appeared

no subject

no subject