[SOLVED] Problem with page menu when headline removed from page/post layout

GrahamW · #1 Feb 24, 2013, 06:13 PM

I've removed the kicker, headline and byline from the page layout with "display:none".

The intention is to have images at the top of the body so that they abut against the %bar2 which is beneath the %page-center menu.

Initially this showed a white space between the bar and the image. On Larry's advice elsewhere, I addressed this by adding this CSS insert...

#middle .page { margin-top: -28px; }

On pages where there's a static image this is fine.

However, the home page has a slideshow, and on this one the space to the left of the page menu is somehow being compromised. I've taken a picture to try to illustrate what I mean

Have you any idea why this is happening and what I can do to prevent it?

Many thanks
Graham

Jam · #2 Feb 24, 2013, 06:27 PM

Code:

#middle .page { margin-top: -28px; }

applies to .page only. If your home page is not using that page template (not likely) than it wont use that CSS.

If you want it to, then you have to apply it to the page template your home page is using also.

- my guess.

URL + code inspector would sort it.

juggledad · #3 Feb 24, 2013, 08:58 PM

Quote:

#middle .page { margin-top: -28px; }

this actually will apply the top margin to any element that has a class of 'page' that is a subelement of an element with the ID of middle, so it doesn't mater what the <body> has on it.

this will apply when you are on any 'page' page since the div for the page has a class of 'page'

(note: if you look at the source you will see that the div will also show a 'post-nn' and an ID of 'post-nn' - remember a page is just a special post which is why it aslo gets the class of 'page'...ok that was probably more that most of you wanted to know.

)

what is the url?

GrahamW · #4 Feb 25, 2013, 06:02 AM

Hello Juggledad and Jam

Thanks for the input so far.

The URL is http://www.catalystsatwork.com

I have a feeling that this is a problem associated with the interplay between the theme and the platform. I'm using Vista on my laptop and it makes this odd little "hole" beside the menu, but I just looked at it on an Android tablet and the images overlay the bottom half of the menu across the whole width.

Cheers
Graham

juggledad · #5 Feb 25, 2013, 07:58 AM

the 'margin-top: -28px' is causing the slide show image to overlap the menu. My guess is that it is overlaying a background, but not areas that have elements in it..

try using 'margin-top: -17px'

lmilesw · #6 Feb 25, 2013, 09:21 AM

I think in my original post I mentioned that the code would only work if all the pages had an image. To fix this issue you could add the following to compensate for the slideshow.

HTML Code:

body.home .slideshow {
    margin-top: 12px;
}

You would leave the other at -28px

GrahamW · #7 Feb 25, 2013, 03:24 PM

Geniuses!

I wish there was a manual somewhere that I could look these kinds of things up in - then I'd stop bothering you.

It wasn't until I wrote the post to you that I realised that the slideshow was acting differently from a straightforward image. It didn't occur to me that the -28px would be affected.

Please help me understand this a little... where does the variable .slideshow come from? Does that work for any shortcode that is in square parentheses?

While this has fixed the problem in Windows, the one with Android persists...

In this case, the slideshow overlays the %bar2 and the bottom of the %page-center. Images still have the problem I mentioned at the outset of the little window to the left of the menu.

Cheers
Graham

lmilesw · #8 Feb 25, 2013, 04:19 PM

I use the Firebug extension for Firefox to determine selectors such as .slideshow and then play with the settings virtually. A manual isn't going to be of much help as plugins and thems all use different selectors for different purposes. Sometimes there are two plugins that use the same selector and so they conflict.

Android throws in another wrinkle. I don't have a way to virtually test for android.

GrahamW · #9 Mar 21, 2013, 08:51 PM

Really sorry to resurrect an old thread, but...

I'd got this in place and had focused on a different aspect of the site. Now that I have checked it again, I can see that the original solution for pages with images on them has worked fine, but the code for the page with the slideshow present doesn't seem to be doing so.

I've tried changing the 12px setting but it doesn't appear to be doing anything after all.

Any ideas would be hugely appreciated.

Many thanks
Graham

lmilesw · #10 Mar 22, 2013, 08:28 AM

It looks like the slideshow plugin was changed and so the selector has changed as well. The code to move that slideshow down should now be

HTML Code:

body.home .ngg-slideshow {
    margin-top: 28px;
}

This is why knowing how to use Firebug is important.

GrahamW · #11 Mar 22, 2013, 12:30 PM

Oh dear! How embarrassing. Thanks very much, Larry. All sorted.

Many thanks
Graham