hover on link change background image [duplicate] - html

This question already has answers here:
CSS div height 100% not working
(3 answers)
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 4 years ago.
I am trying to hover on a link to change the image in div using Adjacent Sibling Selector, but it does not show anything when I hover on the link.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div>
<a class="a" href="/template-1978944/editor"> ANATOMY NOW
</a>
<div class="bg"> </div>
</div>
</body>
</html>
CSS:
.bg{
height:100%;
}
.a:hover + .bg {
background-image: url('https://preview.ibb.co/gce5me/anatomy_Now.png');
}

You can also use height:100vh;if you need to fill the background of the viewport

Related

How to target and style a div outside another div with CSS [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I have a div which I want to target to change the background colour.
This div lives in one container (main) and the target div lives within another (footer)
So I want to use the div promo to target footer-inner like so:
Demo: https://jsfiddle.net/yeLpnu36/
<main>
<div class="promo">
<p>
stuff here
</p>
</div>
</main>
<footer class="my-footer">
<div class="footer-inner">
<p>
change background of this div from promo
</p>
</div>
</footer>
I have tried things like:
.promo > .footer-inner,
.promo + .footer-inner,
.promo ~ .footer-inner {
background: yellow !important;
}
But with no success.
Any ideas how I can change the background colour of footer-inner using promo?
Thanks

How to set margin-top proeprly in WordPress? [duplicate]

This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 5 years ago.
I am making the footer of my WP custom theme. I have footer div(inside which I place components). I also have a logo div(where my logo is). I need distance from 12px between the begening of the footer div till the logo div.
I am using this:
<div class="footer">
<div class="footerlogo">
<img id="pic" src="<?php bloginfo('template_url') ?>/img/footer_logo.png">
</div> .......
.footerlogo{ margin-top:30px;}
It doesnt show any differance. WHat is the proper way of doing that?
enter image description here
You could use padding on the footer div, for example:
.footer {
padding-top: 12px;
}
This would add space between both the .footer and .footerlogo div elements.
https://jsfiddle.net/ss7Lp2nd/

There is a small space below the img [duplicate]

This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Image inside div has extra space below the image
(10 answers)
Closed 5 years ago.
There is always a 6 pixels space below the image. I am using materialize instead of bootstrap.
<div class="container">
<div class="row">
<div class="no-padding">
<img src="https://i1.wp.com/testing.datahub.io/static/img/logo-cube03.png" />
</div>
</div>
body {
background-color: #2c3e50;
}
Also link to JSFiddle
My code is very simple, even I clean all of the other things.
When I inspect on div class="no-padding" it shows 486 pixels and when I inspect on the img it shows 480 pixels.
I want to remove the 6 pixels space.
Adding display: block; to the image is one fix.
See also : What is the gap or extra space below image?

HTML automatically adding padding? [duplicate]

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
My problem with this HTML script is that I'm always get a padding-bottom in each div. Can anybody see why?
* {
margin: 0px;
padding: 0px;
}
body {
width="1920px";
height="1080px";
}
<!doctype html>
<html>
<body>
<div>
<img src="images/header.jpg">
</div>
<div>
<img src="images/stuecke.jpg">
</div>
<div>
<img src="images/termine.jpg">
</div>
<div>
<img src="images/team.jpg">
</div>
<div>
<img src="images/wo.jpg">
</div>
</body>
</html>
<img> is an inline element, so it gets spacing from the line-height.
Make them display: block to prevent that.

How to middle vertical line that division? [duplicate]

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 7 years ago.
I have this page:
http://invata.dac-proiect.ro/invat/index2.html
I want my div .container-home to be align vertically to the center.
CODE HTML:
<div class="container-home" style="width: 900px;height: 696px;background: url(DECUPATE/TEST/images/ppp.jpg);margin: 0 auto;background-size: contain;">
<div class="margine">
<div class="sus">
<div class="btn"></div>
<div class="btn2"></div>
</div>
<div class="jos">
<div class="btn3"></div>
<div class="btn4"></div>
</div>
</div>
</div>
How do I do this?
I found these examples but we did not implement them.
http://www.vanseodesign.com/css/vertical-centering/
Thanks in advance!
EDIT:
I add:
body{display table;}
.container-home{display:table-cell;vertical-align;middle;}
but not working.
You need to use some savvy positioning in your CSS. Add the following to your container-home class in the CSS:
.container-home {
/* existing code */
position:relative;
top:50%;
transform:translateY(-50%);
}
The entire body of the page should be vertically and horizontally centered now.