Jump to content
lutz

How To Start The Sidebar On The Top Of The Page?

Recommended Posts

lutz    1
lutz

Hello!

I have to place a sidebar to my page, which starts at the very top. But everything I tried lets the sidebar begin below the header ("branding") section. I have some ads in my secondary sidebar and those have to start now BESIDE the header, not BELOW it.

The site is www.mobiwatch.de

 

Could somebody tell me how to make the content in that secondary sidebar starting at the very top of the page, please?

 

Thanks in advance!!!

Share this post


Link to post
Share on other sites
catrina    103
catrina

A sidebar can't begin at the top unless you resize the header (so that there's space for the sidebar to sit) and use custom CSS to move the sidebar up. Please see these instructions on how you can use custom CSS to make these adjustments: http://support.pagelines.me/docs/customization/custom-css/

 

Also use this as a reference for the CSS attributes you need: http://w3schools.com/css/default.asp


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
lutz    1
lutz

Dear Catrina,

 

thanks for the quick response! I already resized the header ;))
Do you have a piece of css code for me I could use to lift the sidebar up? I'm no pogrammer and don't have a clue from all that stuff!

The links you provided showed some general topics only ...

I really hope you can help me with that!!!

Share this post


Link to post
Share on other sites
lutz    1
lutz

@Catrina,

 

in the meantime I found this piece of code: .home #sidebar-wrap{margin-top:-250px;}

That lifts up the sidebar as high as I want to - so far, so good.

 

New problem: This code moves BOTH sidebars up, but I need to move the second (the outerone on the right) one only.

That's why I currently use a minor value (-50px) because othewise the inner sidebar would cut through the header.

So what I need right now is to know, how to make that css code work for the second sidebar (right) only and ignore the first sidebar (left).

 

Can you tell me how to do that?

Share this post


Link to post
Share on other sites
catrina    103
catrina

You can actually specify only one sidebar by using selector #sidebar2 (or something of that sort). When you look in Firebug, the class it has is #sidebar2.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
lutz    1
lutz

Dear Catrina,

 

great, works, thanks a lot!

Unfortunately this concerns the home page only. When I click on a post, on this page the sidebar starts below the header section still.

Is there a command that adresses ALL pages, not the home page only?

I already tried things like just ".#sidebar2{margin-top:-359px;}" or ".page #sidebar2{margin-top:-359px;}" but those didn't do anything.

 

I hope there is a way to change that globally?

 

Thanks again in anticipation!!!

  • Like 1

Share this post


Link to post
Share on other sites
photofusionusa    1
photofusionusa

I'm was trying to do a similar routine in controlling a tertiary bar but for only one specific page (page ID 22). Through reading the posts I have summed up that I needed to add the page ID before the css. Frustrating because the post just assume you know what the hell your doing. After lots of trials and errors it goes like this.

The Page ID apparently is in the form of a class (the names with periods). It can be found in the HTML code on the top header line.


In the HTML file the ID will most likely be found at the top header and listed somewhere after a list of other names predeeded by style="xvxvxv  vxvv xvvvxv vxvxvx page-id-22 nsnsnns nsnsnns nn nssn blabla"

So now I have my page ID, .page-id-22 jsut place the page id in front of th ecode you have been using


SO here is my code I used for my tertiary bar:

.page-id-22 .section-sb_tertiary {
position:fixed;
top:330px;

}

dont use any commas between the names, this will keep them to affect the only to the tree structure below.

Hope that helps,
Cheers

  • Like 1

Share this post


Link to post
Share on other sites
lutz    1
lutz

Dear photofusionusa,

 

thanks for that. But to be honest: I don't understand it ;))

Because I don't know what you mean with "page-id": I have the blog roll (or home page with all of it's subpages with older posts), I have the post page with each single post, and I have the categories and tags pages with their special posts. Real "pages" I do not use, so I haven't any page-id to try your code on. You know what I mean?

 

For me the code ".home #sidebar2{margin-top:-359px;}" works great ... but on the home page (=blog roll) only.

If I would know the correct command for ALL pages that would fix my problem completely. But everything I tried out like "".all #sidebar2{margin-top:-359px;}" dind't work ...

Share this post


Link to post
Share on other sites
photofusionusa    1
photofusionusa

Hmm, with the little I know, I agree, the Page ID will not work since the blog is dynamic within the page.  You will definetly need help from the wizards, sorry I could not help.

~ John

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Unfortunately, we are unable to provide you the custom CSS needed to achieve your layout. If you're not comfortable with custom CSS or code. I recommend you contact one of our Pros (http://www.pagelines.com/pros/) for assistance or check out our CSS Customization section in our Doc Center to give you a good headstart on CSS changes you can make, http://support.pagelines.me/docs/customization/custom-css/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

@Danny

Who said I'm not comfortable with CSS code?

I'm indeed very comfortable with that and actually asked for the correct command that would influence ALL pages but no the home page alone.

Would you please be so kind to provide the command I need for that?

 

Thanks in advance!!!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi Lutz,

 

The info that Photofusion provided was correct. Just leave out the .page-id-22 bit and start off with the .section-sb_tertiary

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
lutz    1
lutz

@Rob
@Photofusion

 

alright, that's great - and is really working an ALL pages.

I already screamed "hallelujah" ... and then I realized what the code "position:fixed" means ;))

That's something I cannot do: the sidebars have to scroll up and down with the page!

 

I tried it without that "fixed" code, but that didn't work anymore.

Is there a command like "position:relative" (tried this one, didn't work) or something that makes the command work but lets the sidebards scroll down with the page?

Share this post


Link to post
Share on other sites
lutz    1
lutz

@Catrina,

@Rob
@Photofusion

 

YES!!! Great! Thanks a lot to all of you!!!

This is working, wonderful!

 

There is still a little minor issue, if you could solve that, too, it would be perfect ;))

I also want to push up the primary sidebar a little, too because it's starting quite low for some reason which looks very uneven.

So I tried

 

.section-sb_primary {
 position:absolute;
 top:300px;}

 

But this isn't working together with the ".section-sb_secondary" command: when I use both, the layout crashes totally, displaying one sidebar very large and the other on top of that. No way!

 

As you can see above I tried these commands earlier:

.home #sidebar1{margin-top:-45px;}

.home #sidebar2{margin-top:-359px;}

 

That works perfectly well for both sidebars, but unfortunately on the home page only.

 

So I would need to know

a) how to make "section-sb_primary" and "section-sb_secondary" work together

or

B) how to make the "home #sidebar2{margin-top:-359px;}" command work on all the other pages, too, and not on the home page only.

 

Thanks again to all of you, you already helped me really a lot!!!

Share this post


Link to post
Share on other sites
lutz    1
lutz

I just discovered another problem: When you watch the site on a mobile device, the "section-sb_primary" method causes the sidebar to appear on top of the content area. So this is a way I cannot go. When I use the "home #sidebar2" method the mobile layout is alright. So that's the way I have to go ...

Sorry, Rob + Photofusion

So, does anyone have an idea how to make this "home #sidebar2" command make work an all the other pages, too?

Please?

Share this post


Link to post
Share on other sites
lutz    1
lutz

Hi everybody!

 

This issue is still unsolved: I would need the commands to make the ".home #sidebar2{margin-top:-359px;}" code work on all the other pages, too. Is there no one who can help me with that? Please!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Lutz,

 

Try the following,

 

#site #sidebar2 { margin-top:-359px; } 

If this doesn't work, I recommend you contact one of our pros for further assistance.

 

http://www.pagelines.com/pros/

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

@Danny

 

Wonderful! Great! That's it what I've been looking for!

Thanks a lot, you made my day. And week. And month!!!

Thanks a lot!!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×