Grow your CSS skills. Land your dream job.

links not responding from floats and fixed positions…

  • # December 4, 2012 at 4:38 pm

    Hello,
    I am developing a site and have styles set up so that on only the home page the site’s logo, navigation, and footer content all have fixed positions so they remain in the corners of the browser, the rest of the screen is a full page slideshow.

    Here’s the link to the home page:
    http://testing.neoclassics.org/

    The issue I’m having is on the home page, the logo in the top left corner doesn’t recognize “hover” over most of the image. Also, the social media icon menu, which is the menu with circular icons in the top right, doesn’t recognize “hover” on the first 3 icons and part of the 4th.

    I think it has something to do with floats, fixed positions, and their containing elements clearing them, but nothing I try seems to work. It all works fine on the other pages, so I’m sure that it’s isolated to the styles that I’ve attached to just the home page using a “body.menu-home”. I tried applying the clearfix class to the containing elements as described by this site, but either it didn’t work or I applied it incorrectly or to the wrong container.

    Any advice??

    # December 4, 2012 at 4:49 pm

    To start with the logo link and image don’t need to be in a p tag try deleting that.

    The same holds true of our menu text…is there a reason it’s in a span?

    It’s certainly capable to detecting a hover because the cursor changes when you hover over it.

    Since it’s an image what are you expecting to happen when it does hover.

    I have to say that using fixed positioning to get a block into place seems odd. Surely whatever CMS you are using will let you put it in the right place.

    Perhaps you have your structure / grid system confused.

    # December 4, 2012 at 5:41 pm

    Some more information: the site is built in Joomla using the blank Gantry Rocket Theme template.

    Using the wysiwyg editor, it by default puts a

    around images and text. I’ve removed the

    using the html editor but it still is giving me the same issue. Only now it seems that it recognizes “hover” above the image in a thin strip on the top right side of the header logo/image.

    Out of curiosity, regarding your comment that using fixed positions isn’t necessary to accomplish this, can you recommend another way if you know it?

    Without the position:fixed on those elements on the home page they appear, by default, within the body wrapper, which has a default width that I’d like to keep for all the other pages of the site. It’s only the home page that I want to clear as much of the middle of the browser/page so the image slideshow is front and center.

    # December 5, 2012 at 6:23 am

    Sorry, I’m not familiar with Joomla but it sounds to me as though you need a different page template for the home page.

    Have you set the image to display:block…that might trick it.

    # December 5, 2012 at 3:38 pm

    There’s actually a few (or 6) invisible divs covering the link. They are in a div with the class “.rt-container”

    It looks like they’re empty – so you should be able to just eliminate them from your markup. That or position that link and z-index it above them. (I think the first solution is better though.)

    # December 5, 2012 at 4:14 pm

    @tbwiii – z-index did the trick! That never even crossed my mind since there was no other element or content in any of the containing divs.

    Unfortunately joomla generates those divs and while there probably is a way to around it happening, I certainly haven’t found it yet.

    # December 5, 2012 at 9:53 pm

    That’s too bad, but I’m glad the other thing worked though!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".