- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
To make the box clickable, you can do two things:
.three-squares-nav a {
text-decoration: none;
color: #fff;
display: block;
height: 100%;
width: 100%;
}
$('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.
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.
Thank you guys sooo very very much! You guys are awesome!