Clicky header image (or top nav of some sort) and bottom next/previous links?

Jan 01, 2011 21:17

Username of journal: genlisae
Layout Style: Quite Lickable
Basic, Paid or Plus:Paid
Problem you are having: Exactly as the title says. Nothing really huge and I will find a work around if these are not possible.

Read more... )

s2, header image, help!!

Leave a comment

Comments 4

It's all about positions - Try this anarano January 2 2011, 15:07:55 UTC
Next/Previous

Put this in your CSS:

#pagecontainer {position:relative}
#recentnav {position:absolute; bottom:50px}

The position declaration in #pagecontainer provides a basing orientation point for #recentnav. So #recentnav "knows" its place is at the bottom of #pagecontainer.

Clicky header image

That one was tricky, but this should work:

First you have to create a new link in your Links Sidebar: http://genlisae.livejournal.com/?skip=0Don't forget the skip part, it's important or all your livejournal links will disappear (sort of). Afterwards put this line in your CSS ( ... )

Reply

Re: It's all about positions - Try this genlisae January 2 2011, 16:50:00 UTC
Awesome! Thank you! Both worked.

One quick question for clarification so I know how this works if you don't mind.

The position declaration in #pagecontainer provides a basing orientation point for #recentnav. So #recentnav "knows" its place is at the bottom of #pagecontainer.

It is now at the bottom of the sidebar. Which works wonderfully for me actually, and I hadn't thought of having it there. Now that I see it there it makes more sense than at the bottom centre of the page where I had envisioned it, but isn't #pagecontainer separate from the sidebar or am I misunderstanding?

Reply

Re: It's all about positions - Try this anarano January 2 2011, 19:22:37 UTC
Great it worked :)

#pagecontainer includes the sidbar (called #paraphernalia in your layout) as well as the content (#main).

I just provided the really indispensable information to put the prev/next to the bottom; so every other style information is inherited. You can complement/change the code e.g. like this and see how it works:

#pagecontainer {position:relative; background:pink; margin-bottom:200px}
#recentnav {position:absolute; bottom:-100px; background:green; left:0; width:100%; text-align:center}
#recentnav h2 {text-align:center}

More questions? Just ask :)

Reply

Re: It's all about positions - Try this genlisae January 2 2011, 21:13:42 UTC
Oh! Got it, thank you. Also managed to tweak a few other things with that explanation. :D

Very helpful. MUCH appreciated.

Reply


Leave a comment

Up