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.
Related
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 2 years ago.
I am trying to make a div element sticky on my page. When I use position sticky (and yes, it is inside of a parent element), not only is it not sticky, but I can't position it's top value. The left and right work, but not top or bottom. As the user scrolls down the page I want the div to be visible in it's entirety nearly all the way down. Can I achieve this in CSS? Here is some code:
<main class="main-area">
<header class="header">
<div class="header__logo-area">
<img src="/src/assets/svg/logo.svg" alt="ImmediaDent logo">
</div>
<div class="header__green-plus">
<img src="/src/assets/svg/plus large.svg" alt="Large Green Plus" class="header--green-plus">
</div>
</header>
</main>
<div class="form">
<div class="form__form-section">
This is where the text goes.
</div>
</div>
<section class="next">
</section>
.form {
position: relative;
&__form-section {
position: sticky;
background-color:$colorFormGray;
bottom: 10rem;
top: 10rem;
left:45rem;
height: 40.9375rem + 18.3125rem;
width: 38.5964912%;
border-radius: 20px;
text-align: center;
}
Please let me know if any more code or information is needed. Thank you!
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
This question already has answers here:
CSS - how to overflow from div to full width of screen
(3 answers)
Closed 7 years ago.
I need to put a background image in the middle of a page like this below.
A way would be to close the div container and put it back after my image. But I don't think that's the best way, so here I come to find some help.
My HTML :
<div class="container">
<div class="job">
<h4>Disc Jockey</h4>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p>
Lorem ipsum...
</p>
</div>
</div>
</div>
</div>
And in my css :
.job{
margin-top: 75px;
background:url(../img/bg-about.jpg) no-repeat center top scroll;
background-size: 100% auto;
height: 357px;
width: 1920px;
}
Thanks in advance.
Try to add class .job to <div class='container job'></div> I think it must help you
This question already has answers here:
Problem with CSS Sticky Footer implementation
(5 answers)
Closed 8 years ago.
I know that there are tons of answer out there. I spent many many hours trying to figure out what it not working.
I want to have a sticky footer.
the html structure is like this
<body>
<div id=container>
<div id=header>
</div>
<div id=body>
<div id=left>
</div>
<div id=center>
</div>
<div id=right>
</div>
</div>
<div id=footer>
</div>
</div>
</body>
and a link with the css and the content link
Change your footer position from "absolute" to "fixed"
If you want to have the footer always be at the bottom of the screen/window you can add the following to your css
#footer {
position: fixed;
bottom: 0;
}
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 9 years ago.
According to w3schools.com I learnt that the element is a block level element (that is, the browser will display a line break before and after it).
Then how could 2 divs be placed next to each other?
Some code from w3schools:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © W3Schools.com
</div>
</div>
</body>
</html>
"By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not."
Two block level elements will generally start on new lines, but you can have them side by side by float property. In your code, you have this piece in the div style which is making them side by side.
float: left;
HTML:
<div class="sidebyside">I'm stuff!</div>
<div class="sidebyside">I'm other stuff!</div>
CSS:
.sidebyside {
float: left;
width: 50%;
}
Demo
A quick google for "side by side div" yielded this as the first result, and a bunch more too!
http://www.welovecss.com/showthread.php?t=465