Navigation: The Sky Broke Apart & You Appeared

[prospitian]

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!

Comments

[dearboss]

Hello! I just wanted to say that I love this navigation. I altered the short one to only hold 8 links instead of 10 on this account though. But this code looks so lovely.

[azuhi]

Hey there! This looks really awesome, I took the Celty one and modified it a little so that it would only have room for six links, as that's all I needed.

Check it out!

[ryuugazakirei]

Same MUN, used that modified version on this blog as well :3

[spideyguy]

Hi dear! I've been trying to get the short version to work but for some reason I can't get a background image to appear, it just remains white?

[prospitian]

Hi!! Sorry about the delay, but could I get a pastebin of the code as you're using it so I can pick at it and see what's up?

[spideyguy]

Oh it's quite alright dear, thank you for getting back to me + making these wonderful layouts!

<center><raw-code><center> <div style="width:500px; height:300px; display:block; border-radius:20px; https://s-media-cache-ak0.pinimg.com/736x/23/24/f5/2324f53429b998a1c612972b15337421.jpg('http://66.media.tumblr.com/cd9f5387b5a6763fbf819c23c5811594/tumblr_mxg01wbYCa1s4ecoko2_500.gif');"> <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="http://spideyguy.dreamwidth.org/799.html">CONTACT POST</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="http://spideyguy.dreamwidth.org/1328.html">THREADS</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="http://newyorknative.dreamwidth.org/profile">MUSEBOX</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="http://spideyguy.dreamwidth.org/1199.html">VISUALOSITIES</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="http://spideyguy.dreamwidth.org/2118.html">HEADCANONS</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;">Peter Parker</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;" href="http://spideyguy.dreamwidth.org/3215.html">PLAYLIST</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="http://spideyguy.dreamwidth.org/1973.html">PLOTS</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="http://spideyguy.dreamwidth.org/2753.html">THE CALLING</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="http://spideyguy.dreamwidth.org/profile">PROFILE</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;">CREDIT</a> </div> </div></center></raw-code>

This was the picture I was trying to use for the background.

[prospitian]

aaaaaa thank you so much, you're so sweet!! ♥♥♥ I'm really glad you like the code!

It looks like a little piece of the code got snipped out accidentally!
<center><raw-code><center> <div style="width:500px; height:300px; display:block; border-radius:20px; background-image:url('http://66.media.tumblr.com/cd9f5387b5a6763fbf819c23c5811594/tumblr_mxg01wbYCa1s4ecoko2_500.gif');"> <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="http://spideyguy.dreamwidth.org/799.html">CONTACT POST</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="http://spideyguy.dreamwidth.org/1328.html">THREADS</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="http://newyorknative.dreamwidth.org/profile">MUSEBOX</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="http://spideyguy.dreamwidth.org/1199.html">VISUALOSITIES</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="http://spideyguy.dreamwidth.org/2118.html">HEADCANONS</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;">Peter Parker</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;" href="http://spideyguy.dreamwidth.org/3215.html">PLAYLIST</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="http://spideyguy.dreamwidth.org/1973.html">PLOTS</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="http://spideyguy.dreamwidth.org/2753.html">THE CALLING</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="http://spideyguy.dreamwidth.org/profile">PROFILE</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;">CREDIT</a> </div> </div></center></raw-code>
This should work!

[spideyguy]

I love it, it looks great with his journal style. Thank you love!

[michrure]

Hello! Love this set up.

I'm trying to get TWO of them to sit next to each other, but the second one always goes below. Do you know what I might be doing wrong?

[socloverit]

well this sure is the wrong account but it's the one I'm logged into right now, so

Thank you!! The easiest way to put them side by side would be to make a table and put the code in each cell, like so:

<table><tr><td>CODE ONE HERE</td> <td width="50px"></td> <td>CODE TWO HERE</td></tr></table>

You can change that 50 to another number or just remove that cell entirely, I just find that DW doesn't make enough space between cells so I like to manually add a buffer.

[michrure]

Oh my gosh you are fantastic that worked perfectly. Thank you so much!

[socloverit]

No problem!! I'm super glad you like the code!!! ♡♡

[asscan]

I also snagged and used for a nav for this guy's journal, slight modifications. Thanks!

[bundangos]

Altered for colours, I love this and you

[vowlyball]

This was so easy to use and awesome. Thank you for sharing!