I have a a list of elements, I am trying to display them, if one of the element is clicked, the font weigh changes to bold, and a decoration ( underline ) is added, the uderline thickness is 3px, so to do that I added a span in my link element, I set my link to relative and the span to absolute, and added my other stylings, like that : ( Please go to the header options )
<div class="header__top-bar">
<div class="header__logo-icons">
<img class="header__logo" src="assets/images/cdiscountvoyage-trimmy.png" alt="logo">
<div class="header__icons-container">
<a href="#">
<img src="assets/images/facebook.png" alt="facebook">
</a>
<a href="#">
<img src="assets/images/instagram.png" alt="facebook">
</a>
<a href="#">
<img src="assets/images/pinterest.png" alt="facebook">
</a>
</div>
</div>
<div class="header__options">
<a href="#">
<span style="display: inline-block;">Séjour</span>
<span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
</a>
<a href="#">
<span style="display: inline-block;">Séjour</span>
<span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
</a>
<a href="#">
<span style="display: inline-block;">Séjour</span>
<span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
</a>
</div>
</div>
Here is the styling ( what is needed I think ) :
.header__options {
display: flex;
width: 100%;
overflow-x: scroll;
margin-bottom: 5px;
}
.header__options a {
margin-right: 20px;
position: relative;
font-size: 14px;
text-decoration: none;
color: #ffffff;
font-family: Arial, sans-serif;
font-weight: bold;
}
.header__options a:last-child {
margin-right: 0;
}
Now, I am not implemting the js code to see the click event, I am not just seeing the underline ffect I added, so here is what I have :
But when I inspect my element, I see it is there, but not visible, it is like it has a negative z-index or whatever, the header background is hiding it, but I am not sure.
And this is the mockup, what I am trying to have :
Any help would be much appreciated.
When I ran this code, removing x-overflow: scroll; seemed to work, and I could see the underlines.
Also, consider using pseudo elements (::after, ::before) for these kinds of things. They will make your life easier and the code cleaner.
Also, if you aren't sure why you can't see an element, try moving it around. Change the z-index. Change it's position and display property. These are just easy ways to debug these kinds of errors.
Add padding-bottom to .header__options class. After this i think you can see the under lines.
.header__options {
display: flex;
width: 100%;
overflow-x: scroll;
margin-bottom: 5px;
background: darkblue;
padding-bottom: 10px; /* added pading bottom to get space in bottom */
}
.header__options a {
margin-right: 20px;
position: relative;
font-size: 14px;
text-decoration: none;
color: #ffffff;
font-family: Arial, sans-serif;
font-weight: bold;
}
.header__options a:last-child {
margin-right: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="header__options">
<a href="#">
<span style="display: inline-block;">Séjour</span>
<span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
</a>
<a href="#">
<span style="display: inline-block;">Séjour</span>
<span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
</a>
<a href="#">
<span style="display: inline-block;">Séjour</span>
<span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
</a>
</div>
</body>
</html>
Span tag is an inline element. You can't fix height and width for this. It always used to wrap the content with content's height and width.
So what you can do here is, add border-bottom style to your a tag. And remove your empty span.
border-bottom: 3px solid red;
Hope this will help you.
Related
I am having trouble evenly spacing my divs for Projects, Videos, Portfolios and Contact using margins. I wanted it to start even spacing from the right of the screen. But I didn't use pixel values for spacing because I wanted to avoid hardcoded numbers as much as possible. I also realize that the way I have designed the nav-bar isn't the most efficient.
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
.title-bar {
height: 14%;
width: 100%;
position: relative;
color: white;
font-size: 30px;
}
.title-icon {
position: absolute;
margin-left: 5%;
}
.title-links {
position: relative;
right: 0px;
top: 0px;
margin-right: 5%;
}
.title-1 {
position: absolute;
right: 0px;
margin-right: 45%;
}
.title-2 {
position: absolute;
right: 0px;
margin-right: 30%;
}
.title-3 {
position: absolute;
right: 0px;
margin-right: 15%;
}
.title-4 {
position: absolute;
right: 0px;
margin-right: 0;
}
.title-link {
color: white;
text-decoration: none;
}
.title-link:hover {
color: rgb(0, 63, 145);
text-decoration: none;
}
<div class="title-bar">
<div class="title-icon">
<h3>Rupak Y</h3>
</div>
<div class="title-links">
<div class="title-1">
<a class="title-link" href="#">
<h3>Projects</h3>
</a>
</div>
<div class="title-2">
<a class="title-link" href="#">
<h3>Videos</h3>
</a>
</div>
<div class="title-3">
<a class="title-link" href="#">
<h3>Portfolio</h3>
</a>
</div>
<div class="title-4">
<a class="title-link" href="#">
<h3>Contact</h3>
</a>
</div>
</div>
Don't ever use position: absolute for situations like this. This can be done a lot easier and with less CSS:
Use display: flex both on the container and the links div, add margin-left: auto to the links div to align it right and add some margins to the single links to create a distance between them (I used 3vw margin-left, a unit relative to the viewport width). Also, apply display: block to the a tags to make them behave as blocks, and use left and right padding on the container to create the offset of the texts at the left and right side.
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
.title-bar {
display: flex;
height: 14%;
color: white;
font-size: 18px;
padding: 0 3%;
}
.title-links {
margin-left: auto;
display: flex;
}
.title-link {
display: block;
margin-left: 3vw;
color: white;
text-decoration: none;
}
.title-link:hover {
color: rgb(0, 63, 145);
text-decoration: none;
}
<div class="title-bar">
<div class="title-icon">
<h3>Rupak Y</h3>
</div>
<div class="title-links">
<div class="title-1">
<a class="title-link" href="#">
<h3>Projects</h3>
</a>
</div>
<div class="title-2">
<a class="title-link" href="#">
<h3>Videos</h3>
</a>
</div>
<div class="title-3">
<a class="title-link" href="#">
<h3>Portfolio</h3>
</a>
</div>
<div class="title-4">
<a class="title-link" href="#">
<h3>Contact</h3>
</a>
</div>
</div>
Here is a solution using the table tag I adapted from the zer00ne's answer from the this question.
html,
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
table {
width: 100%;
table-layout: fixed;
}
th {
width: 20%
}
<html>
<head>
<title>Rupak Yeware - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/styles.css" />
</head>
<body>
<table class='table table-striped jambo_table'>
<th class='column-title' style="color:white">Rupak Y</th>
<th class='column-title' style="color:white">Projects</th>
<th class='column-title' style="color:white">Videos</th>
<th class='column-title' style="color:white">Portfolio</th>
<th class='column-title no-link last' style="color:white"><span class='nobr'>Contact</span></th>
</table>
</body>
</html>
Using a column for each of your headers and then evenly spacing them by 20% will allow you keep them all evenly spaced. If you ever add more headers, obviously you need to adjust the percentage they are spaced by.
Here is more information about the table tag:
https://www.w3schools.com/tags/tag_table.asp
I'm recreating the incila instagram page, I need to overlay the images of the <figure class = "slide"> element, because afterwards I will put an animation, but I can't overlay the images, I've tried everything, as I'm a beginner I couldn't.
How can I do this?
.slide{
position: relative;
z-index: 10;
margin-left: 151px !important;
margin-top: -521.5px !important;
}
*{
padding:0;
margin:0;
box-sizing: border-box;
text-decoration: none;
font-family: sans-serif;
font-size: 14px;
}
body{
background-color: #fafafa;
}
.content{
display: flex;
justify-content: center;
align-items: center;
}
.container-login{
background-color: rgb(255, 255, 255);
border:1px solid;
border-color: rgb(221, 221, 221);
padding: 20px;
display: flex;
align-items: center;
flex-direction: column;
font-size: 20px;
}
.img-perfil{
border-radius: 50%;
width: 100px;
height: 92px;
margin: 20px;
}
.not{
background-color: #0095fe;
color: #ffffff;
width: 279.08px;
height: 30px;
text-align: center;
padding: 8px;
margin-bottom: 30px;;
border-radius: 4px;
}
.container-trocar-conta{
display: flex;
flex-direction: row;
}
.change{
margin-left: 2px;
color:#0095fe;
font-weight: bold;
}
.slide{
position: relative;
z-index: 10;
margin-left: 151px !important;
margin-top: -521.5px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Instagram Inicial</title>
</head>
<body>
<div class="content">
<div class="container-img-cel">
<img class="cel"src="https://www.instagram.com/static/images/homepage/home-phones.png/43cc71bb1b43.png">
<figure class="slide">
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot4.jpg/842fe5699220.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot1.jpg/d6bf0c928b5a.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot2.jpg/6f03eb85463c.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot3.jpg/f0c687aa6ec2.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot5.jpg/0a2d3016f375.jpg"/>
</figure>
</div>
<div class="container-login">
<img class="img-logo" src="https://logodownload.org/wp-content/uploads/2017/04/instagram-logo-17.png">
<div class="img">
<img class="img-perfil" src="https://cdn.cmjornal.pt/images/2019-06/img_432x244$2019_06_25_12_54_40_863705.jpg">
</div>
Continuar como dog ?
<div class="container-trocar-conta">
<p>Não é dog ?</p>
<a class="change" href="#"> Trocar de conta</a>
</div>
</div>
</div>
</body>
</html>
You are changing the css of the whole frame with the .slide class, not the individual pictures.
You could give each picture a (second) unique class and and set each picture's position indivually. The overlapping can then be achieved by setting position: absolute; on each of the images altough this can bring some positioning problems.
So instead of using .slide, change the images like this
<figure class="slide">
<img class="foto_1" src="https://www.instagram.com/static/images/homepage/screenshot4.jpg/842fe5699220.jpg"/>
<img class="foto_2" src="https://www.instagram.com/static/images/homepage/screenshot1.jpg/d6bf0c928b5a.jpg"/>
<img class="foto_3" src="https://www.instagram.com/static/images/homepage/screenshot2.jpg/6f03eb85463c.jpg"/>
<img class="foto_4" src="https://www.instagram.com/static/images/homepage/screenshot3.jpg/f0c687aa6ec2.jpg"/>
<img class="foto_5" src="https://www.instagram.com/static/images/homepage/screenshot5.jpg/0a2d3016f375.jpg"/>
</figure>
And then create a seperate CSS entry for every image like this
.foto_1{
position: absolute;
left: 0px
}
.foto_2{
position: absolute;
left: -250px
}
Where the amount of left: -?px increases by the width of the image each foto.
I have an assignment where I have a list of items on a menu placed at the left of the screen. When a menu item is clicked on, they're supposed to move outside the menu by using CSS/HTML only.
I was able to accomplish that using a combination of the :target pseudo-class and the href tag. But then I realized I couldn't go back to the original menu, as a menu item is always targeted and kept outside the menu.
At first, I thought to click again in the targeted div would remove the pseudo-class but obviously, it did nothing.
I believe the best way to return the menu to its original formation is to un-target the current item without clicking on another.
Here is the HTML:
<a class="card" id="card1" href="#card1">
<div class="avatar"></div>
<div class="info">
<p>Leah Shapiro</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card2" href="#card2">
<div class="avatar"></div>
<div class="info">
<p>Rob Been</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card3" href="#card3">
<div class="avatar"></div>
<div class="info">
<p>Peter Hayes</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
And the CSS:
.list {
height: 100%;
width: 200px;
background: #dddddd;
float: left;
}
.list .card {
border: solid;
display: flex;
align-items: center;
justify-content: center;
height: 55px;
}
:target {
z-index: 1000;
background-color: red;
position: absolute;
left: 300px;
top: 200px;
}
https://codepen.io/maydanachi/pen/QXPYvy
I found many JS snippets I could use, but the requirements explicitly state that I use CSS/HTML only.
Just use :focus instead of :target
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
}
.screen {
height: 100%;
width: calc(100% - 200px);
background-color: tomato;
float: right;
}
.list {
height: 100%;
width: 200px;
background: #dddddd;
float: left;
}
.list .card {
border: solid;
display: flex;
align-items: center;
justify-content: center;
height: 55px;
}
.list a {
text-decoration: none;
}
:focus {
z-index: 1000;
background-color: red;
position: absolute;
left: 300px;
top: 200px;
}
.list .card:hover {
cursor: pointer;
background-color: rgba(143, 143, 143, 0.8);
}
.list .card:active {
background-color: teal;
}
.list .avatar {
height: 48px;
width: 48px;
border-radius: 50%;
background-color: #ccc;
user-select: none;
}
.list .info {
display: flex;
flex-direction: column;
align-items: flex-start;
user-select: none;
}
.list .info p {
margin: 0;
padding-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div class="list">
<a class="card" id="card1" href="#card1">
<div class="avatar"></div>
<div class="info">
<p>Leah Shapiro</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card2" href="#card2">
<div class="avatar"></div>
<div class="info">
<p>Rob Been</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card3" href="#card3">
<div class="avatar"></div>
<div class="info">
<p>Peter Hayes</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card4" href="#card4">
<div class="avatar"></div>
<div class="info">
<p>Dave Catching</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card5" href="#card5">
<div class="avatar"></div>
<div class="info">
<p>Josh Homme</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
</div>
<div class="screen"></div>
</body>
</html>
On my website my header is linked back to itself and works fine, but when I put my mouse over it, an unwanted underline shows up underneath it and I do not want that. I already set the header's text decoration to none so I am not sure how to fix this. My code is below.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
<style>
a{text-decoration: none}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
inspect anchor text decoration is located in a:hover , so add
a:hover{
text-decoration:none;
}
There might be a CSS for hover specifically. try: a:hover {text-decoration:none;}
This CSS is what's creating the underline, and it comes from bootstrap
a:focus, a:hover {
color: #014c8c;
text-decoration: underline;
}
You can overwrite it by adding this to your CSS
.Header a:hover, .Header a:focus {
text-decoration: none;
}
You need to put your CSS styles before the HTML. Best place is inside one single style block at the top of your HTML. Your style tag currently is below the link and that's why it's not applied.
You can remove the underline on hover by styling the :hover state specifically. However note that it's not ideal for accessibility.
There are few other issues with your HTML and CSS. It's best practice to avoid inline styles inside of the HTML tags. And you've linked to your home page with a file:// protocol, use http:// as its a webpage. If you're linking to the default home page then you can just do /Home.html too.
You're missing the closing </body></html> tags also.
I've fixed those below as well.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body { margin:0 }
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
.Header a:hover { text-decoration:none }
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
</body>
</html>
you can either use:
a:hover{
text-decoration:none;
}
or use an inline CSS to explicitly specify the text-decoration for that particular anchor element.
<a href="file:///C:/Noah's%20stuff/Home.html" style="text-decoration: none;"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
the snippet below uses the first suggestion as that would be better, however, the latter does work aswell.
snippet:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
a:hover{
text-decoration:none;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
To add to Ousmane's answer:
You want to change the CSS that affects links at a default status (if any of your CSS does that), from "name", to "name:link" (this will matter if and when more pseudo selectors are added to links styles).
Also, the order for the pseudo selectors is:
"LoVe For HAte".
So:
a:link, a:visited, a:focus, a:hover, a:active
The easy answer to this question was to change the hover attribute of the anchor tag. I am answering my own question so that when someone else looks at this question they will know that this is the correct answer that should work.
a:hover{
text-decoration:none;
}
In my case the container was a <a> element and all the children had their own underline.
I just set text-decoration: none; on the a container.
I am trying to align some divs so that there are 6 ontop of eachover, spreading across the whole height of the page, with text centered inside. An example is here:
http://gyazo.com/871760197e572bd35d79ac3be63d9869
Now nothing I have worked so far works, and it just extends the page. I have made a div (to easily change the text in all of these boxes) which surrounds them, and has a value of height: 100vh;. For some reason, there appear to be gaps in between the divs. I have stripped all the code down to have just the portfolio div, but it still has a gap above it.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
top: 0;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
color: black;
}
.navigation-bar {
float: left;
width: 350px;
font-size: 40px;
height: 100vh;
text-align: center;
}
.portfolio {
background-color: #909090;
height: 16%;
line-height: 16%;
}
.twitter {
background-color: #a0a0a0;
height: 16%;
}
.git-hub {
background-color: #909090;
height: 16%;
}
.email {
background-color: #a0a0a0;
height: 16%;
}
.linkedin {
background-color: #909090;
height: 16%;
}
.about-me {
background-color: #a0a0a0;
height: 16%;
}
</head>
<body>
<div class="navigation-bar">
<a href="#">
<div class="portfolio">
<h3>Portfolio</h3>
</div>
</a>
<a href="#">
<div class="twitter">
<h3>Twitter</h3>
</div>
</a>
<a href="#">
<div class="git-hub">
<h3>Github</h3>
</div>
</a>
<a href="#">
<div class="email">
<h3>Email</h3>
</div>
</a>
<a href="#">
<div class="linkedin">
<h3>LinkedIn</h3>
</div>
</a>
<a href="#">
<div class="about-me">
<h3>About Me</h3>
</div>
</a>
</div>
</body>
</html>
Thanks for any help, and I don't have a high enough reputation to post images so I would appreciate if someone could edit it!
Edit: Here is a fiddle: https://jsfiddle.net/TobiasYeomans/8ysLounf/
You need to remove the built-in margin from the heading.
JSfiddle demo
h3 {
margin: 0;
}
It's because of the h3 - browsers give it a default margin. So adding h3 {margin:0;} should do what you want.
*or .navigation-bar h3 {margin:0} if you don't want to mess up the rest of your layout.