Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertical Center/Mouseover issue.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #43181
    robertallen
    Participant

    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.

    #127143
    JohnMotylJr
    Participant

    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.

    #127165
    Paulie_D
    Member

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

    from…https://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.

    #127212
    robertallen
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.