Grow your CSS skills. Land your dream job.

Vertical Center/Mouseover issue.

  • # March 6, 2013 at 12:09 am

    Hi all,

    I am having the WORST time trying to vertically center 2 items inside a box.

    Also is there a way where you can click anywhere inside the box and make it go to the next page without actually clicking the words itself?

    Here’s my link to the side. There are 3 teal tiny boxes on the bottom right underneath the 3 photo links.

    http://www.robertallenbaker.com/paralegalfoundation/

    Here’s my code…

    .three-squares-nav li {
    list-style: none outside none;
    float: left;
    width: 140px;
    height: 95px;
    margin-right: 20px;
    text-align: center;
    background-color: #4dbcc3;
    }
    .three-squares-nav li:hover {
    background-color: #9ecd4d;
    }
    .three-squares-nav a {
    text-decoration: none;
    color: #fff;
    }

    Any help would be greatly appreciated.

    # March 6, 2013 at 12:53 am

    To make the box clickable, you can do two things:

    css method

    .three-squares-nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    height: 100%;
    width: 100%;
    }

    js method

    $('li').click(function() { // Click on li element holding anchor tag
    var href = $('a').attr('href'); // Get the anchor tag's href (link)
    window.location.href = href; // Go there NOW!!!
    });

    Also, im a little unsure what you are talking about the boxes not lining up? They look good to me:
    Windows 7 / Chrome latest browser.

    Nevermind, you are referring to the text not the element. You could set the box-sizing and padding to fill your parent element.

    # March 6, 2013 at 7:38 am

    Here you go…http://codepen.io/anon/pen/pvbBq

    from…http://css-tricks.com/vertically-center-multi-lined-text/

    Note that this automatically makes the anchors 100% size of the LI and the whole box is clickable.

    # March 6, 2013 at 12:17 pm

    Thank you guys sooo very very much! You guys are awesome!

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

You must be logged in to reply to this topic.

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