Question from a CSS newb

[jhs]

Hi!

I'm having a general CSS question. I hope someone could give me some hints on this:)

Take a look at my page. I you scroll down a little bit (till the background gets white) you will see that I have made som grey boxes with text and images in. This is the CSS I used:

.greybox {
    background-color: #f5f5f5;
    border: 4px solid #f5f5f5;
    margin-bottom:20px;
    display: block;
    padding: 25px;
}

.greybox:hover, a:hover {
	border: 4px solid #ecebeb;
        margin-bottom:20px;
	background-color: #ecebeb;
}

I would really like to make the boxes clickable...almost like a button. With the hover effect I have already made.
Any tips?

This is the html I have used in the text-widget:

<div class="one-half first greybox"><h2>Armbåndsur</h2>
<img src="http://sutterud2.eksaktlidenskap.no/wp-content/uploads/2014/11/dummy-produktbilde.jpg">
Qhjkjh kjh kjh kjh kjh kjh khøhjlkjh jfgdfghdhgfd hgfdhgfd hgfdhgfd hgfd hgfd ghfd hgfd hgfdhfdhgfd hgfd hgfd hgfd ghfd g</div>

[tuAtlas]

Hi jhs,

If I understand your question correctly all you would need to do would be to wrap your div with an tag like so:

<a href="http://wwwYOURTARGETLINK.com">
<div class="one-half first greybox">
<h2>Armbåndsur</h2>
<p><img src="http://sutterud2.eksaktlidenskap.no/wp-content/uploads/2014/11/dummy-produktbilde.jpg"><br>
Qhjkjh kjh kjh kjh kjh kjh khøhjlkjh jfgdfghdhgfd hgfdhgfd hgfdhgfd hgfd hgfd ghfd hgfd hgfdhfdhgfd hgfd hgfd hgfd ghfd g</p></div>
</a>

Obviously you need to change
http://wwwYOUR-TARGET-DESTINATION.com
(YOUR-TARGET-DESTINATION) for the correct target you want to link to.

Hopefully I understood your question and this is what you were looking for.

---

http://www.tuatlas.com/
http://sitios.negociosensanjuan.com/

[jhs]

Hi tu-atlas, thank you so much for your reply:)

This is how my html looks like now:

<a href="http://my.studiopress.com/themes/parallax/"><div class="one-half first greybox"><h2>Armbåndsur</h2>
<img src="http://sutterud2.eksaktlidenskap.no/wp-content/uploads/2014/11/dummy-produktbilde.jpg">
Qhjkjh kjh kjh kjh kjh kjh khøhjlkjh jfgdfghdhgfd hgfdhgfd hgfdhgfd hgfd hgfd ghfd hgfd hgfdhfdhgfd hgfd hgfd hgfd ghfd g</div></a>

But it still won't be a link.
By the way, I had to remove the a:hover from my css. It affected the links in my menu (in the header).

Hmm, what could be wrong?

[tuAtlas]

Hi again jhs,

I checked the link you provided and it works fine.

I inspected your

<div class"one-half first greybox">

but on the browser inspection the tag:
<a>
does not show up. Neither do they when inspecting the source code.

The only thing that I can suggest is to see if this css rule is afecting your <a> tags:

button[disabled], html input[disabled] {
    cursor: default;
}

Because you also have this on lines 44, 45 and 46 of source code:

<p><a class="button" href="http://sutterud2.eksaktlidenskap.no/?page_id=73">her finner du oss</a> </p>
<p><!--a class="button" href="">butikken</a><br />
<a class="button" href="">verksted</a---> </p>

The css orders "disabled" to the selector "button" and your <a> tags have a class called "button"
This rule could be disabling this tag.

Check that.

---

http://www.tuatlas.com/
http://sitios.negociosensanjuan.com/

[Author]

Posts