Gossamer Forum
Home : Products : Gossamer Links : Development, Plugins and Globals :

Please help with sidebars in luna.css

Quote Reply
Please help with sidebars in luna.css
Can somebody please help with luna.css to design a page where content section has the followings?

Content: 335px
Middle menu: 300px
Right menu: 125px

Basically what I need is to move the leftsidebar to left and position it after the rightsidebar (if this makes any sense...)

Thank you,

Armen

Last edited by:

AMIXIMA: Aug 9, 2005, 11:20 PM
Quote Reply
Re: [AMIXIMA] Please help with sidebars in luna.css In reply to
I'd recommend reading: Understanding the luna template set.

What you need to do is float the left and right sidebars right instead of the standard float: left, then setup the correct column sizes (don't forget there's left and right padding on the sidebars), and lastly use a negative right margin on the sidebars to move them into the correct position. Oh yes, don't forget to change the #ocwrapper border right width to fit the two sidebars in it.

Adrian
Quote Reply
Re: [brewt] Please help with sidebars in luna.css In reply to
Hi Adrian,

Thank you for your reply. I did all the changes you wrote in your email. Still having problems with the sidebars. Please see the code below and the url of the site that i want to change:
http://www.americanmediaguide.com/cgi-bin/page.cgi?g=;d=1

Could you please let me know what I am doing wrong?

Thanks again,

Armen

Code:
/*---------*\
|* content *|
\*---------*/
#ocwrapper {
border-left: 0px solid #ffffff;/* border is now 300+125=425px */
border-right: 425px solid #ffffff;
background: #ffffff;
}
#leftsidebar {/* margin-left is now set to 0 and margine-right set to -425px to move leftsidebar to the right*/
margin-left: 0px;
margine_right: -425px;/* padding is now 0px*/
padding: 0px;/* width is now 125px*/
width: 125px;/* float is now right*/
float: right;
position: relative;/* show the sidbar */
display: ;
}
#rightsidebar {
/* margin-left set to -300px*/
margin-right: -300px;
/* padding is now 0px*/
padding: 0px;
/* width set to 300px*/
width: 300px;
/* float set to right*/
float: right;
position: relative;
}
#contentwrapper {
width: 100%;
float: left;
position: relative;
}
#content {
/* margin is now 0px */
margin: 0px;
padding: 10px;
background: #ffffff;
}
Quote Reply
Re: [AMIXIMA] Please help with sidebars in luna.css In reply to
Try this:
Code:
#ocwrapper {
border-right-width: 425px;
}

#leftsidebar {
margin-right: -300px; /* move it into #ocwrapper's border */
padding: 10px 10px 10px 0px; /* change padding from being on the left to the right */
width: 290px; /* 300px total width - 10px right padding */
float: right;
display: block; /* show left sidebar */
}

#rightsidebar {
margin-right: -425px; /* move it completely to the right */
width: 115px; /* 125px total width - 10px right padding */
float: right;
}

Adrian