I am learning HTML. I have this problem if I add a div inside the hyperlink, the color of this block is cut off.
This is what’s is supposed to look like:
But at mine, this looks like this (for example for the second on the right blue div):
If I hover the mouse to the place where the blue color is missing, I can click on it and I can go on to another.
Why is there such a problem?
body {
background-color: #303030;
color: #ffffff;
font-family: "Lato", sans-serif;
font-size: 20px;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}
.rectangle {
width: 960px;
margin: 20px;
display: flex;
clear: both;
text-align: center;
}
.square {
display: flex;
flex-direction: row;
width: 50%;
margin-bottom: 40px
}
#logo {
font-family: "Josefin Sans", sans-serif;
font-size: 70px;
width: 600px;
text-align: left
}
#zegar {
font-family: "Josefin Sans", sans-serif;
font-size: 70px;
text-align: left
}
#square1 {
display: grid;
grid-template-columns: 250px 250px;
grid-template-rows: 162px 162px 172px;
}
.tile1 {
margin: 10px;
background-color: #3095d3;
text-align: center
}
.tile1:hover {
background-color: #2084c2;
}
.tile2:hover {
background-color: #555555;
}
.tile3:hover {
background-color: #82b637;
}
.tile2 {
margin: 10px;
background-color: #666666;
text-align: center
}
.tile3 {
margin: 10px;
background-color: #93c748;
text-align: center
}
.tile4 {
margin: 10px;
background-color: #ee5a32;
grid-column: span 2;
text-align: center;
font-size: 26px;
padding: 30px;
line-height: 150%;
}
#square2 {
display: grid;
grid-template: 324px 172px / repeat(4, 120px);
}
.tile5 {
margin: 10px;
grid-column: span 4;
background-color: #666666;
text-align: center;
text-align: justify;
padding: 30px
}
.yt:hover {
background-color: #c83237;
}
.fb:hover {
background-color: #3557a2;
}
.gplus:hover {
background-color: #c84222;
}
.tw:hover {
background-color: #2084c2;
}
.yt {
margin: 10px;
background-color: #d94348;
}
.fb {
margin: 10px;
background-color: #4668b3;
}
.gplus {
margin: 10px;
background-color: #d95333;
}
.tw {
margin: 10px;
background-color: #3095d3;
}
a.tilelink {
color: #ffffff;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
<div id="container">
<div class="rectangle">
<div id="logo">Jan Kowalski</div>
<div id="zegar">12:00:00</div>
</div>
<div class="square">
<div id="square1">
<div class="tile1">
<a href="kimjestem.html" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
</div>
<a href="oferta.html">
<div class="tile1">
<i class="icon-laptop"></i><br />Co oferuję?
</div>
</a>
<div class="tile2">
<i class="icon-graduation-cap"></i><br />CV
</div>
<div class="tile3">
<i class="icon-mail"></i><br />Kontakt ze mną
</div>
<div class="tile4">
<i>Talk me cheap. Show me the code!</i><br /> - Linus Torvalds, twórca Linuxa
</div>
</div>
<div id="square2">
<div class="tile5">
Tytuł podstrony<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dictum odio non interdum. Pellentesque volutpat ultrices porttitor. Donec hendrerit lectus interdum, tristique mi a, feugiat dui. Fusce leo mi, mattis
ornare efficitur sit amet, dapibus et odio. Mauris id facilisis neque, ut accumsan libero. Donec sed nunc quam.
</div>
<div class="yt">
<i class="icon-youtube"></i>
</div>
<div class="fb">
<i class="icon-facebook"></i>
</div>
<div class="gplus">
<i class="icon-gplus"></i>
</div>
<div class="tw">
<i class="icon-twitter"></i>
</div>
</div>
</div>
<div class="rectangle"> 2015 © Jan Kowalski - portfolio. Programista webowy zaprasza do współpracy.
<i class="icon-mail-alt"></i>[email protected]
</div>
</div>
2
Answers
The issue is, that a div’s default height is
auto
and will be calculated to fit-content. I see no need to use a div in the first place and not use the anchor as a container.If you ant to sue the div, you can make use of Flexbox. You set the anchor as column.flexbox by adding
display; flex; flex-direction: column
. This allows you to useflex-grow: 1
on the div to let it take all remaining space.First, You have not written proper HTML for the
div
which contains the "Co oferuję?". I have added the anchor tag inside thediv
from outside thediv
. Also, you have missed the.tilelink
class to add in the anchor tag. This will display thediv
block the same as others. I have addeda.tilelink:hover { color: blue; }
CSS to show blue color when hovering into the specific div.