dooge dooge - 1 year ago 73
CSS Question

Div loses all styling when wrapped in <a> tag

I have a project where I want to change some circle elements into hyperlinks by wrapping them in an

<a href>
. The problem is, I lose the styling that I had previously applied after I wrap the html div in the
<a>
tag. I am having trouble finding a solution after adding the
<a>
tag in the css.

Here is a Codepen I have created of a draft project. Try wrapping a .circle div in an tag:

CodePen

In case CodePen is down



.wrapper {
width: 100%;
}
.wrapper .first {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
max-width: 1222px;
}
.wrapper .first .circle {
width: 100px;
height: 100px;
overflow: hidden;
text-align: center;
margin-right: 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #FF9E9D;
border-radius: 50%;
border-style: solid;
border-color: #FF9E9D;
transition: all 0.4s ease-in-out;
}

<div class="wrapper">
<div class="first">
<div class="circle">
<h5>MD</h5>
</div>
</div>
</div>





Thanks, any help is greatly appreciated.

Answer Source

since you want the entire div to be a link why not give the a tag a class of that style. For example

<a class="first" href="your link"></a>
Note that ".first" can be any of the classes you want your link to be or you want your user to click on to go to that link

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download