- This topic is empty.
-
AuthorPosts
-
May 22, 2013 at 2:05 am #44956robertallenParticipant
Hi all,
I am having problems with getting my CSS buttons to mouseover through the whole entire background color rather than just the text itself.
You can find it at http://www.esiroundtable.org (the 4 blue buttons on the right).
I’ve tried display:table and display:table-cell but to no avail.
Hope you guys can help me.
Here’s the CSS code…
#custom_post_widget-4, #custom_post_widget-6 {
background-color: #00529c;
font-family: MyriadProBold;
font-size: 210%;
margin-top: 10px;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
text-transform: uppercase;
border-radius: 20px;
}
#custom_post_widget-4 a, #custom_post_widget-6 a {
text-decoration: none;
color: #fff;
}
Any help would be greatly appreciated!
Thank you,
RobertMay 22, 2013 at 2:10 am #135957Paulie_DMemberI’m not seeing a `:hover` state in there.
May 22, 2013 at 2:12 am #135956robertallenParticipantOh I guess I’m missing that. Hmm…what would I put in there besides a background color change (which I would love to do after I figure this out?)
I’m thinking my whole code is completely messed up but I’m not sure where to start.
May 22, 2013 at 2:15 am #135958Paulie_DMember>Hmm…what would I put in there besides a background color change
Whatever you want to change…it’s entirely up to you.
May 22, 2013 at 2:16 am #135959robertallenParticipantIs there something other than that I need? I tried display:table-cell and display:table and it got funky when you mouseover it.
May 22, 2013 at 2:22 am #135960Paulie_DMember> I tried display:table-cell and display:table
What are you trying to do? In general those aren’t properties I would associate with a hover.
May 22, 2013 at 2:23 am #135961robertallenParticipantWhen you mouseover the text you can click on it and go to another page, but I am wondering if you can mouseover anywhere in that button, not just the text to go to the page the button is associated with.
Rather than create an image, I was thinking CSS.
May 22, 2013 at 2:31 am #135962Paulie_DMemberSo you need the link to be as big as the button?
Firstly try adding `display:block` to the `a` element.
Because of the odd way some of the buttons are structured (list item with a p with multiple links inside) you may need to adjust some of the CSS properties &/or restructure the HTML.
May 22, 2013 at 2:33 am #135963robertallenParticipantExactly. I’ll try that.
I figured the p was probably what was doing it. Unfortunately I am using WordPress and they keep insisting on adding that in the widget block :(
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.