Navigation & Sidebar, have them together Options

[maza]

I'm using generator and wanted to move the usericon and navigation to the left side - as if it were in a sidebar. I managed to move the navigation and icons to the side using the shadow id.

But I would like the journal name, website, user info, & calender text/links to show up under the icon. I can't seem to figure that out. If I change the meta id then everything including the "mood" squishes together where you can't read it. How do I fix this?

Also, is there any way to make the icon and naviagtion static? Say, if I inserted them into a sidebar? And how would I do that?

[tokyo-rose]

Can you please post a link to your LJ, and/or a screenshot of it?

[maza]

That's the part with issue. I moved the icon & navigation over, but I want that extra detail under the icon. Ideally, I would like all that static and not move when the page is scrolled. Can it be done?

[libertie]

It can, yes, but I think it'd be best if I could take a look at your code and come up with something appropriate for your layout specifically rather than giving you something generic that may not work when you plug it in. Can you either post your code or PM it to me?

[maza]

Thanks so much! I'll PM it to you now.

[libertie]

No problem - I responded to you, but let me just say again that I might need a day or so before I'm really able to sit down and look at it. I'll get back with you ASAP though. :)

[libertie]

This is what I've changed in the code to make the navigation and sidebar appear "inline" and also not scroll. Keep in mind that Internet Explorer 6 and below do not support position: fixed; and because I don't have a Windows computer I don't have a way to test this code in IE 6 (I think what might happen is that everything will be positioned normally, but it will scroll rather than remaining fixed). This should work in Firefox, IE7, and Safari, however:

CODE

#sidebar{
position: absolute;
top: 260px;
left: 234px;
width: 134px;
height: 202px;
height: auto;
visibility: transparent;
background :#FCE1EA;
color: #B73371;
padding: 5px;
border: 1px solid #B73371;
position: fixed;
}
.shadowed {
    height: 30px;
    position: fixed;
}

Replace your current sidebar code with that. Let me know if I can help with anything else, how that works, etc.

[maza]

Thanks for helping out!

It doesn't seem to work on my browsers though. I have the latest IE & Firefox, along with Opera. On Firefox & Opera, the sidebar does stay fixed but the icon and navigation scroll. On IE everything scrolls. Really bizzare.

[maza]

I decided to use the sidebar to display other info. I'm leaving the navigation unchanged this time.

My problem now is with browsers. The code, same as in the post by libertie only without the .shadow part, shows up different depending on browser.

On Opera, the sidebar shows up where it's been positioned to. Firefox messes up text alignemnet and size of sidebar. IE will have the sidebar show up under the navigation & ontop of the entries.

Why is it doing this?