0
<a> creates white line, how to remove it?
I am trying to make a site on which I can show people my music. In the box you see the album cover and when you hover it you will see the title and a link to listen. The image I use is a perfect square, but a white line appears under the picture. Can anyone help me? How do I get rid of this white line? The link to my site: http://test.jimvanijcken.nl/redesign/
6 Answers
+ 3
use the following syntax āāā
a {
text-decoration: none;
}
and, cool site ! :)
+ 2
Can you throw this code here, I'll try to figure it out! :)
+ 1
I added it to the css, but it still doesn't work
0
The CSS:
button {
display: inline-block;
padding: 25px 25px 25px 25px;
width: 15%;
min-width: 200px;
cursor: pointer;
text-align: center;
text-decoration: none;
border: 3px solid #ccc;
color: black;
}
button:hover {
background-color: #555;
color: white;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear; /* IE10 is actually unprefixed */
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
input {
padding: 20px 20px 20px 20px;
display: inline-block;
width: 30%;
min-width: 400px;
border: 3px solid #ccc;
color: black;
font-family: 'Noto Sans', sans-serif;
font-size: 15px;
}
input:focus {
border: 3px solid #555;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear; /* IE10 is actually unprefixed */
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a {
text-decoration: none;
}
.box {
width: 25%;
float: left;
position: relative;
}
.back img {
width: 100%;
height: 100%;
}
.box a {
padding: 0px 0px 0px 0px;
text-decoration: none;
}
.hover {
opacity: 0;
color: white;
position: absolute;
width: 100%;
height: 100%;
float: left;
bottom: 0px;
padding: 30px 0px 30px 30px;
box-sizing: border-box;
text-align: left;
background-color: #555;
}
.box:hover .hover {
opacity: 1;
}
.listen {
bottom: 20px;
}
0
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Jim van IJcken</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/text.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Noto+Sans" rel="stylesheet">
</head>
<body>
<?php include 'header.php'; ?>
<article class="welcome">
<h1 style="margin-bottom: 50px;" >WELCOME</h1>
<h4>welcome on Jim's site</h4>
</article>
<?php include 'connect.php'; ?>
<article class="music">
<section>
<div class="box">
<div class="back">
<a href="#">
<img src="http://www.jimvanijcken.nl/img/music/secret_sounds.png">
</a>
</div>
<div class="hover">
<h4>Title</h4>
<h4 class="listen"><a href="">Listen</a></h4>
</div>
</div>
</section>
<section class="music_more">
<h3 style="margin-bottom: 30px;">Want to hear more?</h3>
<button type="button"><h4>Click Here</h4></button>
</section>
</article>
<article class="about">
<h2 style="margin-bottom: 50px;">About Me</h2>
<h4>Hi, I am Jim.<br><br>
I am a music producer<br>
and I design and code websites.<br><br>
On this site you can listen to all my music.<br>
You can also view the sites that I made.
</h4>
</article>
<article class="contact">
<div class="form_container">
<h2 style="margin-bottom: 50px;">Contact</h2>
<form id="form">
<h4><label for="name">Name:</label></h4><br>
<input name="name" type="text" placeholder="Name" /><br><br>
<h4><label for="email">Email:</label></h4><br>
<input name="email" type="text" placeholder="Email
0
I solved it, I had to chang display to block
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help me please š„ŗš„ŗ
0 Votes
Javascript
0 Votes
PHP
1 Votes
Help
1 Votes
Help me Debug!!!
1 Votes
Raspberry Pi 5 Server
1 Votes