I set a link on a <div> but all the elements of the <div>become also links.
Any clue how I could remove the formatting from the children?
The bottom <div> is on rollover mode.
div.hotel-preview {
border-style: solid;
padding: 0px 10px 10px 10px;
margin-bottom: 20px;
}
div.hotel-preview:hover {
background-color: aliceblue;
}
<a href="#Url.Action("Hotel", "Home", new { id = hotel.IdHotel})">
<div class="hotel-preview">
...
</div>
</a>
I'm assuming you want to remove the underlines for the hyperlinks, you can just add text-decoration: none; to your tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div.hotel-preview {
border-style: solid;
padding: 0px 10px 10px 10px;
margin-bottom:20px;
}
div.hotel-preview:hover {
background-color: aliceblue;
}
.href-wrapper {
text-decoration: none;
}
</style>
</head>
<body>
<a class="href-wrapper" href="/">
<div class="hotel-preview">
<h1>Matterhorn</h1>
<p>Lieu: Brig</p>
<h4>Contact</h4>
<p>+41279220001</p>
<p>info#matterhorn.ch</p>
</div>
</a>
</body>
</html>
Give text-decoration: none to <a>, like:
a {
text-decoration: none;
}
Have a look at the snippet below:
div.hotel-preview {
border-style: solid;
padding: 0px 10px 10px 10px;
margin-bottom: 20px;
}
div.hotel-preview:hover {
background-color: aliceblue;
}
a {
text-decoration: none;
}
<a href="#Url.Action("Hotel", "Home", new { id = hotel.IdHotel})">
<div class="hotel-preview">
...
</div>
</a>
Hope this helps!
Related
After adding some hyperlinks to an Image, it has the underline but I couldn't find a way to remove it. First I tried text-decoration: none; but I noticed it only works for text, so the image looks like
this image
The "Claro" image has that underline that I cannot remove.
Here is the code:
* {
background-color: #eeeeee;
}
#parte1 {
background-color: #da291c;
}
#parte2 {
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3 {
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo {
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung {
background-color: #da291c;
}
#parte2-samsung {
background-color: white;
margin: 10px 480px 10px 0px;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Caracteristicas Claro</title>
</head>
<body>
<center>
<div id="parte1" class="container">
<a href="https://tiendaclaro.pe" title="Tienda Claro">
<img src="https://placehold.jp/200x100.png" alt="Claro" height="50" id="logo" />
</a>
</div>
</center>
<div id="parte2" class="container">
Inicio
Samsung
</div>
<div id="parte3">Aqui iran el equipo y sus caracteristicas</div>
</body>
</html>
How do I manage to erase that underline of the image and make the other "Inicio" and "Samsung" options to looks like normal text, instead of that purple or blue color?
What you're referring to as underline is not actually underline.
You've added this line in your CSS
* {
background-color: #eeeeee;
}
that means every HTML tag will have this background. so your image and parent <a> will also have this background color and since the image has a bottom margin this which makes a gap in parent <a> and this gap is filled with the defined background color.
so what you're seeing is a filled background color, not an underline or border.
if you set background-color:#colorname; within body element selector like.
body {
background-color:#colorname;
}
That means set background colour #colorname; of your body.
But When you will use this css property into universal selector like.
* {
background-color:#colorname;
}
that means set background color #colorname of all element of the web page.
I hope it is helpful for you.
* {}
body{
background-color: #eeeeee;
}
#parte1 {
background-color: #da291c;
}
#parte2 {
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3 {
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo {
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung {
background-color: #da291c;
}
#parte2-samsung {
background-color: white;
margin: 10px 480px 10px 0px;
}
a {
text-decoration: none;
}
Try adding the background-color: #eeeeee; property to the body tag instead of *
body{
background-color: #eeeeee;
}
#parte1{
background-color: #da291c;
}
#parte2{
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3{
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo{
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung{
background-color: #da291c;
}
#parte2-samsung{
background-color: white;
margin: 10px 480px 10px 0px;
}
a{
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Caracteristicas Claro</title>
</head>
<body>
<center>
<div id="parte1" class="container">
<img src="icons/LogoClaro.png" alt="Claro" height="50" id="logo">
</div>
</center>
<div id="parte2" class="container">
Inicio
Samsung
</div>
<div id="parte3">
Aqui iran el equipo y sus caracteristicas
</div>
</body>
</html>
I'm new to css and html. I want to have a button that could change the color of the div box. I tried using pseudo classes, but it doesnt seem to be working. Here is the sample of the code. How can I make it so when you click the link, it changes the color of the div box.
* {
box-sizing: border-box;
font-family: "Arial", sans-serif;
}
p {
display: inline-block;
}
.link1 {
background-color: #002147;
border: 2px #002147;
color: #ffffff;
font-size: 1.17em;
text-decoration: none;
}
div {
width: 150px;
height: 200px;
border: 1px solid #000000;
font-size: 1.17em;
}
a.link1:visited .box1 {
background-color: #008080;
border: 2px #0e8080;
color: #ffd700;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>1 Button, 1 Box</title>
</head>
<body>
<p><a class="link1" href="#box1">First Link</a></p>
<div class="box1">Div 1 here</div>
</body>
</html>
Use same id as href, and in css use :target on the id, example:
* {
box-sizing: border-box;
font-family: "Arial", sans-serif;
}
p {
display: inline-block;
}
.link1 {
background-color: #002147;
border: 2px #002147;
color: #ffffff;
font-size: 1.17em;
text-decoration: none;
}
div {
width: 150px;
height: 200px;
border: 1px solid #000000;
font-size: 1.17em;
}
#box1:target {
background-color: #008080;
border: 2px #0e8080;
color: #ffd700;
}
<p><a class="link1" href="#box1">First Link</a></p>
<div id="box1">Div 1 here</div>
With JS. Assign a eventListner to your link. Then create a function which add add a class with a background-color. You can also set style attribute with javascript.
Like that:
function change() {
const div = document.querySelector('.box1');
div.classList.toggle('red-bg');
}
* {
box-sizing: border-box;
font-family: "Arial", sans-serif;
}
p {
display: inline-block;
}
.link1 {
background-color: #002147;
border: 2px #002147;
color: #ffffff;
font-size: 1.17em;
text-decoration: none;
}
div {
width: 150px;
height: 200px;
border: 1px solid #000000;
font-size: 1.17em;
}
a.link1:visited .box1 {
background-color: #008080;
border: 2px #0e8080;
color: #ffd700;
}
a.link1 {
cursor: pointer;
}
.red-bg {
background-color: red;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>1 Button, 1 Box</title>
</head>
<body>
<p><a class="link1" onclick="change()">First Link</a></p>
<div class="box1">Div 1 here</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(dis.style.display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.
You're not returning a value because the style attribute does not contain any value in this instance. If for example we move the display: block to the element as a style attribute like style="display: block" then it would return the value as you expect. See example provided, but the behavior is expected.
Hope this helps, cheers!
PS - a div is a block element by default, no need to define it in the css unless you're overriding the default for whatever reason.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0];
console.log(dis);
alert(dis.style.display);
}
</script>
</head>
<body>
<div class="navbar" style="display: block">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
Looks like you want to get the CSS computedStyle. You can use getComputedStyle to return an object containing the values of all CSS properties of said element.
getComputedStyle(dis, "display").display
Will return the display rule set in your elements css. As Chris W explained in the prior answer if you use el.style.display, it is looking for the inline style rule for display.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(getComputedStyle(dis, "display").display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
I have a vertical menu div and a paragraph div each in a separate line but I want them glued beside each other.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
I just want the innertext (class="container-men") to be animatedly changed by clicking on each (class="vertical-men")
and also I'd be really grateful if you could give me the Javascript codes for that purpose. thanks a lot!!
There are multiple ways to achieve what you try. CSS-Grid, Flexbox, Float... However the modern techniques are to use either flexbox or css-grid.
Using a CSS-Grid:
You use the container main and change it into a grid layout by applying display: grid;. Then you add a 2 column layout with grid-template-columns: min-content auto;. That way The navbar will consume as much space as declared and the content all remaining space.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
width: auto;
}
main {
margin-top: 25px;
padding: 0 10px;
display: grid;
grid-template-columns: min-content auto;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
Using Flexbox:
In this case you use display: flex; on the container (<main>). Then you can use flex-direction: row; to align the 2 elements next to each other. To span the content the remaining width, you can use flex-grow: 1; on the content element.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
flex-grow: 1;
}
main {
margin-top: 25px;
padding: 0 10px;
display: flex;
flex-direction: row;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
When moving my div container from float:center; to float:left;
Ideally i'd like for the button to touch the bottom of the div "self"
It adds extra space below my contact button.
Any suggestions?
I've tried playing with margin, padding,overflow:hidden; etc inside the div container .self in the CSS file but with no luck.
body{
/*background-color: rgb(17, 17, 17);*/
background-color: ghostwhite;
}
.self {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
height:auto;
margin: auto;
text-align: center;
font-family: sans-serif;
background-color: ghostwhite;
float:left;
}
.title {
color: black;
font-family: sans-serif;
font-size: 18px;
}
ul.school {
list-style:none;
list-style-position: inside;
padding-left:0;
margin-left:0;
}
.degrees{
color: black;
font-family: sans-serif;
font-size: 14px;
}
button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Steven Amerman">
<meta name="pragma" content="no-cache">
<link rel="stylesheet" type = "text/css" href="..\css\index.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Steven Amerman</title>
</head>
<body>
<div class="self">
<img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
<h1>Steven Amerman</h1>
<p class="title">Software Developer</p>
<ul class="school">
<li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
</ul>
<p class="degrees">B.S. in Computer Science</p>
<i class="fa fa-linkedin-square"></i>
<p><button>Contact</button></p>
</div>
</body>
</html>
extra space
no space
The issue is on the p tag's margin containing the contact button. You should change its margin to 0, for instance:
.self p:last-child{
margin-bottom: 0px;
}
Just remove the <p></p> tags around the button at the bottom.
body {
/*background-color: rgb(17, 17, 17);*/
background-color: ghostwhite;
}
.self {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
height: auto;
margin: auto;
text-align: center;
font-family: sans-serif;
background-color: ghostwhite;
float: left;
}
.title {
color: black;
font-family: sans-serif;
font-size: 18px;
}
ul.school {
list-style: none;
list-style-position: inside;
padding-left: 0;
margin-left: 0;
}
.degrees {
color: black;
font-family: sans-serif;
font-size: 14px;
}
button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Steven Amerman">
<meta name="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="..\css\index.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Steven Amerman</title>
</head>
<body>
<div class="self">
<img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
<h1>Steven Amerman</h1>
<p class="title">Software Developer</p>
<ul class="school">
<li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
</ul>
<p class="degrees">B.S. in Computer Science</p>
<i class="fa fa-linkedin-square"></i>
<button>Contact</button>
</div>
</body>
</html>