Navigation: maybe i'm meant for the sea

[prospitian]

Title Subtitle an optional blurb; it can be as long as you want because the box will scroll if you take up too much space, or you can remove it entirely

page one page two page three dummy link dummy link

Title Subtitle eeee


























ugh

◀

Title Subtitle nnnn

◀

look, ma, no title!




















~~~

◀

Title Subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed elementum elit, et elementum nunc. Maecenas vehicula lectus nisi, nec aliquam erat aliquet ac. Mauris vehicula nisi ac est imperdiet varius. Sed faucibus quam vel elementum fringilla. Morbi egestas lobortis tempor. Aenean felis mauris, scelerisque et nisl in, vehicula fringilla tortor. Praesent feugiat ornare dui ac consequat. Nulla sed pellentesque odio. Vestibulum convallis malesuada ex, id aliquam mi ultricies nec. Nam id tincidunt mauris. Phasellus tempor quam quis augue accumsan, ut mollis leo molestie. Etiam sed mollis mi, ut dapibus ligula.

here's what it looks like without a title! those roses are by ~sayonararolling on tumblr.

A Significantly Longer Title and also a subtitle that goes on for basically ever too here's what it looks like if the first one scrolls! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed elementum elit, et elementum nunc. Maecenas vehicula lectus nisi, nec aliquam erat aliquet ac. Mauris vehicula nisi ac est imperdiet varius. Sed faucibus quam vel elementum fringilla. Morbi egestas lobortis tempor. Aenean felis mauris, scelerisque et nisl in, vehicula fringilla tortor. Praesent feugiat ornare dui ac consequat. Nulla sed pellentesque odio. Vestibulum convallis malesuada ex, id aliquam mi ultricies nec. Nam id tincidunt mauris. Phasellus tempor quam quis augue accumsan, ut mollis leo molestie. Etiam sed mollis mi, ut dapibus ligula. Phasellus sodales, nunc vitae posuere mollis, dui erat convallis turpis, id vestibulum elit eros sit amet sem. Integer vitae ornare erat. Aenean aliquet nisl at diam commodo, sit amet mattis libero consectetur. Pellentesque at tortor vitae turpis condimentum scelerisque. Phasellus sed laoreet elit. In pulvinar, risus quis volutpat aliquam, velit nunc hendrerit quam, vestibulum aliquam eros nisi sed ligula. Donec bibendum semper nulla, eget pretium nisi tristique non. Quisque at orci a ligula aliquam viverra. Aenean et massa dui.

code by photosynthesis

A set of navigational/info tables with the option for "pages" within each box; it makes more sense if you click the links in the first one. Each box will autoscroll if enough content is put in it.



This code has a lot of pieces to it, but there's very little you have to actually mess with unless you want to; it's very clearly labeled within the code where each piece goes, so don't be scared!

Start Here
<raw-code><center> <! -- ADD EACH BOX BELOW THIS LINE --> <! -- DON'T PUT ANYTHING BELOW THIS LINE --> <span style="width:100%; display:block; text-align:right; font:11px Tahoma; color:#000000;">code by <a style="color:#000000;" href="http://photosynthesis.dreamwidth.org/">photosynthesis</a></span></center></raw-code>

For Each Box
<div style="display:inline-block; text-align:center; width:450px; height:250px; background-color:#FFFFFF; border:1px solid #E0E0E0; line-height:1.2em; margin-right:10px; margin-bottom:20px;"><div style="width:150px; height:250px; background-image:url('SIDE IMAGE URL'); display:inline-block; float:left;"></div><div style="width:300px; height:250px; overflow:hidden; display:block; float:left;"> <div style="width:290px; height:245px; padding:5px; padding-top:0px; display:block; overflow:auto;"> <span style="font:italic 24px Palatino Linotype, Palatino, Cambria, Times; display:block; margin-top:5px; color:#000000;"><a name="INDEX PAGE NAME"></a>TITLE</span> <span style="font:20px Palatino, Cambria, Times; display:block; color:#000000;">SUBTITLE</span> <span style="display:block; font:11px Tahoma; margin-top:10px; color:#000000;">BLURB</span> <!-- IF YOU WANT LINKS AS SEEN IN THE SAMPLE, PUT THEM DIRECTLY BELOW THIS LINE --> </div> <!-- PUT EXTRA PAGES DIRECTLY BELOW THIS LINE --> <!-- NOTHING GOES BELOW THIS LINE --> </div></div>

for a box of links as seen in the sample, start here
<div style="width:250px; display:block; margin-left:20px; margin-top:10px; text-align:center;"> <!-- THE LINKS THEMSELVES GO DIRECTLY BELOW THIS LINE --> </div>


Links Codes

Regular URLs	Extra Pages
<a href="LINK URL" style="display:inline-block; padding:3px; color:#000000; text-decoration:none; font:italic 12px Tahoma; margin:10px 10px 10px 0px;">LINK TEXT</a>	<a href="#PAGE NAME" style="display:inline-block; padding:3px; color:#000000; text-decoration:none; font:italic 12px Tahoma; margin:10px 10px 10px 0px;">LINK TEXT</a>

Extra Pages Within Boxes
<div style="width:290px; height:245px; min-height:100%; padding:5px; display:block; overflow:auto;"> <span style="font:italic 24px Palatino Linotype, Palatino, Cambria, Times; display:block; padding-top:5px;"><a name="PAGE NAME"></a>TITLE</span> <span style="font:20px Palatino, Cambria, Times; display:block;">SUBTITLE</span> <span style="display:block; font:11px Tahoma; margin-top:10px;">BLURB</span> <!-- IF YOU WANT LINKS AS SEEN IN THE SAMPLE, PUT THEM DIRECTLY BELOW THIS LINE --> </div> <a href="#INDEX PAGE NAME" style="text-decoration:none; color:#000000; display:block; width:100%; text-align:left; position:relative; margin-top:-15px; margin-bottom:15px;">◀</a> <!-- END OF PAGE -->

After using the codes above to construct one box, you just want to start from the top and add the new one directly below the previous one!

This code is spacing-friendly, meaning you can add as many line breaks between things as you need to keep yourself organized. That said, if you want line breaks within your text, you'll have to use <br /> tags.

Replacements
TITLE - Appears on each page. If you choose to remove the title on a separate page, whether or not you remove the subtitle too, you have to make the following replacement:

find this	replace with this
<span style="font:italic 24px Palatino Linotype, Palatino, Cambria, Times; display:block; padding-top:5px;"><a name="PAGE NAME"></a>TITLE</span>	<a name="PAGE NAME" style="padding-top:5px; display:block;"></a>

SUBTITLE - Appears on each page.
BLURB - Appears on each page.
LINK URL - Appears if you use the links codes provided.
LINK TEXT - Appears if you use the links codes provided.
SIDE IMAGE URL - Should be 150x250px.

PAGE NAME - The "name" of each page. Appears in the page code itself, and in the link to the page. Doesn't actually appear anywhere; this is for your organizational reference and the code's. Please note that every single page name has to be completely unique. Two boxes can't share the same page name. These are case sensitive and you can have spaces in them.
PAGE TEXT - What you want the link to the page to actually say.
INDEX PAGE NAME - This is the page name for that box's "index", i.e. the page it's on when you first go to the post, and what the back button will bring you to. If you intend to use pages, please change this to something unique for each box.

#FFFFFF - Background color.
#E0E0E0 - Border color.
#000000 - All text, links, and titles.


This code has a lot of room to be customized and prettied up, so go ahead and make any alterations you'd like, so long as my credit stays intact! As always, if you need help with anything at all, please go ahead and ask.

Comments

[kunizuka]

Wow, this is exactly what I needed. Thanks so much for sharing!

[hasitsthorns]

Hello! I really love this code and want to use it for an info guide of sorts, but I did have one question.

Is there a way to change the side image with the different pages? So, if I clicked from the index to 'page one' the side image would change? To explain maybe I want mean better, I want to do a navigation of sorts for different characters and would like each page to have an image of the different characters on the side for their page. Thanks!

[presomnia]

this isn't the right account but it's the one i'm logged into so here i am, it's me, i swear

i'm glad you like the code!! unfortunately setting it up to have different side images for each page would require some pretty significant overhauling of the code. it's not impossible and i could do it for you on commission if you really wanted to but it would be enough of a pain that i probably am not going to do it myself otherwise... sorry about that! if you wanted to give it a go yourself and run into any roadblocks i'd be happy to help try to explain how some of it works and how to get around that at least

[hasitsthorns]

Hello!! I figured that might be the case, but that it couldn't hurt to ask.

As it is, I had a friend help me get something like this started (using your base code, which I will credit when it's all done!) but now we're having the issue of when I got to the 'Fear' page, if I click Hope after it still displays Fear's despite showing the right page url in my browser. It's very strange.