CODEWITHSUNDEEP
htmlcss
SwampYeti
SwampYeti

Reputation: 387

Apply Hyperlink to a CSS Created DIV

I need to figure out a way to have the Yellow Box <div id="bottom"> and the Text <div id="basket">SHOP NOW</div>link to google.com for example.

I have tried adding <div id="bottom"><a href="www.google.com" class="fill-div"></a> </div> but nothing is working. It appears to skew the entire section when I add this syntax.

I have searched all over the place looking for an answer, I have read through almost all related StackOverflow articles and still can't figure out the correct way to do this.

Here is a link https://jsfiddle.net/sixpac/8p4m7oc2/8/ to my code.

Can someone point me in the right direction with this? Is this possible to complete without JavaScript? Thank you!

Upvotes: 0

Views: 53

Answers (3)

alebruck
alebruck

Reputation: 434

You are looking for something like this https://jsfiddle.net/8p4m7oc2/13/

<div id="bottom">
    <a href="google.com" id="basket">SHOP NOW</a>
    <div id="price"><a href="google.com">$70.00</a></div>
</div>

Upvotes: 2

coderLMN
coderLMN

Reputation: 3076

Simply change the basket div to <a>:

<a id="basket" href="http://www.google.com">SHOP NOW</a>

Upvotes: 1

Oliver Chalk
Oliver Chalk

Reputation: 177

You can wrap the div element in an anchor element to have it link to your chosen url / file.

i.e.

<a href="www.google.com" class="fill-div">
<div id="bottom">
</div>
</a>

This should be the code:

https://jsfiddle.net/RreTH/

Edit:

This will make the whole div element link to google for linking just the text the <a href="example"></a> should be enough to link only the text.

Upvotes: 1

Related Questions