This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 2 years ago.
I have two div elements and I want to remove the space between them, which is filled with the background color at the moment. This is what it looks like. I want to remove the space between the green section and where the background image ends for the first div element. Here is the HTML for the page:
<body style="background-color: #c5ffff">
<div class="main-search hero-image">
Log Out
<div class="welcome-text">
<div class="title">Welcome to Ripple.</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam commodi doloremque esse itaque iusto, labore laborum maxime odio, quidem quos, repellat rerum? Ab, asperiores aspernatur assumenda atque distinctio dolor dolore eveniet facilis, id illo ipsa ipsam minus nemo nobis porro quam quia quibusdam quis ratione rerum soluta suscipit temporibus vel vitae voluptate. Accusamus dignissimos ea esse expedita itaque mollitia nobis, numquam odio, quaerat qui vel voluptatibus?</div>
<button class="search_button" >Search for a location</button>
<button class="search_button">Search for a song</button>
</div>
</div>
<div class="main-left">
<div class="title">Collections Near Me</div>
<div>
</div>
</body>
And the CSS:
.main-left {
vertical-align: top;
margin-top: 0;
margin-left: 0;
position: relative;
background-color: #85dcba;
text-align: left;
width: 100%;
float: top;
left: 50%;
transform: translate(-50%);
}
.main-search {
vertical-align: top;
background-color: #d2fdff;
text-align: left;
margin: 0;
padding-top: 2em;
position: relative;
top: 0;
width: 100%;
left: 50%;
transform: translate(-50%);
}
.hero-image {
background-image: url("main_background.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.title {
color: black;
font-family: Roboto, sans-serif;
font-size: 3em;
margin-top: 0.5em;
margin-left: 10px;
margin-bottom: 0.5em;
}
.content {
color: black;
font-family: Roboto, sans-serif;
font-size: 1em;
margin: 1em;
}
.welcome-text {
top: 5%;
left: 5%;
max-width: 35%;
}
There is a gap because div is block element, if you want to remove the gap between div use display: inline-block to remove it.
body > div { display: inline-block; }
This will display an element as an inline-level block container. Please refer to CSS Display
You could try setting the margin values of the elements manually. I see you've set the padding- Which refers to the internal distance of contents to edge, but not the margin- which refers to the distance between seperate elements.
Also, nice looking design so far!
Display flex has a nifty way of removing undesirable whitespace from the html
So place flex on the wrapper of these elements, in this case the body tag
css
body {
display: flex;
flex-direction: column;
}
Set margin-top of the .title to zero and for space between the .main-search and .title, give padding-bottom to .main-search as well. Below is how it will look like:
body{
background-color: #c5ffff;
}
.main-left{
vertical-align: top;
margin-top: 0;
margin-left: 0;
position: relative;
background-color: #85dcba;
text-align: left;
width: 100%;
float: top;
left: 50%;
transform: translate(-50%);
}
.main-search{
vertical-align: top;
background-color: #d2fdff;
text-align: left;
margin: 0;
padding: 2em 0;
position: relative;
top: 0;
width: 100%;
left: 50%;
transform: translate(-50%);
}
.hero-image{
background-image: url("https://picsum.photos/500/500");
background-size: cover;
background-repeat: no-repeat;
}
.title{
color: black;
font-family: Roboto, sans-serif;
font-size: 3em;
margin-top: 0;
margin-left: 10px;
margin-bottom: 0.5em;
}
.content{
color: black;
font-family: Roboto, sans-serif;
font-size: 1em;
margin: 1em;
}
.welcome-text{
top: 5%;
left: 5%;
max-width: 35%;
}
<div class="main-search hero-image">
Log Out
<div class="welcome-text">
<div class="title">Welcome to Ripple.</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam commodi doloremque esse itaque iusto, labore laborum maxime odio, quidem quos, repellat rerum? Ab, asperiores aspernatur assumenda atque distinctio dolor dolore eveniet facilis, id illo ipsa ipsam minus nemo nobis porro quam quia quibusdam quis ratione rerum soluta suscipit temporibus vel vitae voluptate. Accusamus dignissimos ea esse expedita itaque mollitia nobis, numquam odio, quaerat qui vel voluptatibus?</div>
<button class="search_button" >Search for a location</button>
<button class="search_button">Search for a song</button>
</div>
</div>
<div class="main-left">
<div class="title">Collections Near Me</div>
<div>
remove margin-top:0.5em; on your title class.
.title {
color: black;
font-family: Roboto, sans-serif;
font-size: 3em;
margin-top: 0.5em; <-- REMOVE
margin-left: 10px;
margin-bottom: 0.5em;
Related
I have to build a card with text (that's not the problem) the problem is that the text on the card has to disappear on hover because a different text should appear on hover.
I made a simplified version of my code, so you don't have to look at that mess XD.
Thank you very much, if you could help<3
* {
padding: 0;
margin: 0;
}
/* #45B8AC card color */
body {
background-color: #D65076;
}
.card {
width: 500px;
height: 300px;
position: absolute;
color: white;
left: 25%;
top: 25%;
background: #FF6F61;
transition: ease-in-out 0.6s;
}
.card-h1 {
font-size: 30px;
position: absolute;
left: 50px;
top: 50px;
}
.card-text {
font size: 17px;
position: absolute;
left: 50px;
top: 150px;
line-height: 1.5;
}
.card:hover+.hide {
background: black;
}
.hide {
display: none;
}
<body>
<div class="card">
<div class="card-h1">
BergWerk
</div>
<div class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident <br> modi labore esse aliquam rem, voluptatem porro veritatis assumenda <br> inventore neque quas dolore maiores deleniti officia dignissimos autem <br> eum nihil aliquid minima
debitis corporis id quam! Error debitis nulla <br> explicabo repellendus quo consequatur vel hic illo, voluptates reprehe <br>
</div>
<div class="hide">
<h1>Hello WORLD</h1>
</div>
</div>
</body>
I think this would be a simple way to implement what you want. I'm covering the main text with the text you want to appear on hover, making it invisible, and then making it visible again only on hover.
body{
background-color: #D65076;
}
.parent, .cover{
height: 100px;
width: 100px;
background-color: #FF6F61;
}
.parent{
position: relative;
}
.cover{
opacity: 0;
position: absolute;
top: 0;
}
.cover:hover{
opacity: 100;
}
<div class="parent">
Some text would go in here
<div class="cover">
The hover text would go here
</div>
</div>
I used jQuery, Hope this helps!
$('.card-text').hover(function() {
$('.hide').css("display", "block");
$('.card-text').css("display", "none");
})
$('.hide').hover(function() {
$('.card-text').css("display", "block");
$('.hide').css("display", "none");
})
* {
padding: 0;
margin: 0;
}
/* #45B8AC card color */
body {
background-color: #D65076;
}
.card {
width: 500px;
height: 300px;
position: absolute;
color: white;
left: 25%;
top: 25%;
background: #FF6F61;
transition: ease-in-out 0.6s;
}
.card-h1 {
font-size: 30px;
position: absolute;
left: 50px;
top: 50px;
}
.card-text {
font size: 17px;
position: absolute;
left: 50px;
top: 150px;
line-height: 1.5;
}
.card:hover+.hide {
background: black;
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<div class="card">
<div class="card-h1">
BergWerk
</div>
<div class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident <br> modi labore esse aliquam rem, voluptatem porro veritatis assumenda <br> inventore neque quas dolore maiores deleniti officia dignissimos autem <br> eum nihil aliquid minima
debitis corporis id quam! Error debitis nulla <br> explicabo repellendus quo consequatur vel hic illo, voluptates reprehe <br>
</div>
<div class="hide">
<h1>Hello WORLD</h1>
</div>
</div>
</body>
This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
CSS hover border makes elements adjust slightly
(14 answers)
Closed 4 years ago.
I'm new and building one of my first pages. I'm working on the nav for my site. I have it mostly how I want it but when I hover over a link there is a small space to the leftover hover box. its a small space between the border and the hover box. Please help.
So the stack overflow won't let me post the question without talking a little bit more so I am going to ramble a bit. About random things. Talk nonsense until it allows me to post the damn question. I don't know how much detail I need when it won't let me post just a codepen link. It seems much easier to do that.
* {
box-sizing: border-box;
}
#bar {
text-align: center;
min-width: 100%;
height: 70px;
position: relative top;
vertical-align: top;
background-color: #24284C;
}
#wrapper {
background-color: #3B3F64;
}
nav {
width: 100%;
letter-spacing: 0.1em;
}
nav a {
text-decoration: none;
display: block;
padding: 25px;
border-right: #3B3F64 1px solid;
color: black;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
}
nav a:link {
color: #ffffff;
}
nav a:visted {
color: purple;
}
nav a:focus {
color: gray;
}
nav a:hover {
background-color: #4b4f75;
border-bottom: gray 2px solid;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #090C26;
}
header {
width: 100%;
padding: 0%;
margin: 0%;
font-size: 250%;
height: 100px;
}
main {
margin: auto;
width: 80%;
padding: 10px;
overflow: auto;
}
h1 {
text-align: center;
}
footer {
background-color: #24284c;
font-size: small;
font: italic;
text-align: center;
}
<div id="wrapper">
<header>
<h1 id="big">Angry Nerd Cafe</h1>
</header>
<div id="bar">
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Location</li>
<li>Calendar</li>
<li>Order</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>About us</h1>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</main>
<footer>
Copyright © 2018 <a href="mailto:joshuamwolfe#gmail.com">
joshuamwolfe#gmail.com </a>
</footer>
</div>
inline-block elements won't be flush against each other when there are spaces between the HTML elements in the document. There are a few sort-of hacks to fix that, but instead I'd recommend employing flexbox here.
Change this:
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
}
...to this:
nav ul {
display: flex;
justify-content: center;
list-style-type: none;
}
Demo below:
* {
box-sizing: border-box;
}
#bar {
text-align: center;
min-width: 100%;
height: 70px;
position: relative top;
vertical-align: top;
background-color: #24284C;
}
#wrapper {
background-color: #3B3F64;
}
nav {
width: 100%;
letter-spacing: 0.1em;
}
nav a {
text-decoration: none;
display: block;
padding: 25px;
border-right: #3B3F64 1px solid;
color: black;
}
nav ul {
display: flex;
justify-content: center;
list-style-type: none;
}
nav a:link {
color: #ffffff;
}
nav a:visted {
color: purple;
}
nav a:focus {
color: gray;
}
nav a:hover {
background-color: #4b4f75;
border-bottom: gray 2px solid;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #090C26;
}
header {
width: 100%;
padding: 0%;
margin: 0%;
font-size: 250%;
height: 100px;
}
main {
margin: auto;
width: 80%;
padding: 10px;
overflow: auto;
}
h1 {
text-align: center;
}
footer {
background-color: #24284c;
font-size: small;
font: italic;
text-align: center;
}
<div id="wrapper">
<header>
<h1 id="big">Angry Nerd Cafe</h1>
</header>
<div id="bar">
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Location</li>
<li>Calendar</li>
<li>Order</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>About us</h1>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</main>
<footer>
Copyright © 2018 <a href="mailto:joshuamwolfe#gmail.com">
joshuamwolfe#gmail.com </a>
</footer>
</div>
I have some problem with creating inside border of image. Tried to do it with border, outline and box-shadow but didn't get the result.
HTML:
<div class="item">
<img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
<button>Some action</button>
</div>
CSS:
div.item:hover {
//some code
img {
border-bottom: 5px solid #8cc34b;
margin-bottom: -5px;
}
}
My fiddle: JSFiddle
Here I got the outside border but I want to get inside border of image.
Thanks for help.
Wrap your img in div, and on hover use :after pseudo-element:
div.item {
min-height: 300px;
overflow: auto;
width: 300px;
background-color: white;
border: 2px solid #8cc34b;
border-radius: 5px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.item img {
width: 100%;
display: block;
}
div.item p {
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
div.item button {
height: 35px;
width: 120px;
margin: 0 auto;
margin-bottom: 20px;
}
div.item .img-container {
position: relative;
}
div.item:hover h3 {
color: #8cc34b;
}
div.item:hover .img-container:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 5px;
width: 100%;
background-color: #8cc34b;
}
<div class="item">
<div class="img-container">
<img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
</div>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
<button>Some action</button>
</div>
I also added display: block on img, because inline img creates extra whitespace below.
Another answer:
To create a color bar like in the image you liked to, I wrapped your image in a DIV with class x and added the following CSS (including a pseudo element):
img {
width: 100%;
}
.x {
display: block;
position: relative;
}
.x:before {
content: '';
position: absolute;
z-index: -1;
bottom: 7px;
left: 0;
right: 0;
height: 5px;
background-color: #8cc34b;
}
Instead of a hover rule for the image, I just make the x DIV visible by changing its z-index:
div.item:hover {
h3 {
color: #8cc34b;
}
.x:before {
z-index: 1;
}
}
Adjust the bottom setting as desired to move it up or down:
https://jsfiddle.net/9wLx9p0f/5/
We can simply do this with outline-offset property:
outline: 1px solid #fff;
outline-offset: -10px;
Try this in the div you wants, if it works for you.
When I resize browsers window, my div gets down to bottom and a big space comes in top. I want that my div should remain in center of page even if resize the size of window lesser than size of div. In my school they haven't teach about this but I want to align this div in center of page
<!DOCTYPE html>
<html>
<head>
<title>CSS centering Done Right.</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body, .m {
height: 100%;
width: 100%;
}
.m {
opacity:1;
font-size: 0;
overflow: auto;
text-align: center;
/*styling>>*/
background-color: #8F1C10;
}
.m::before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.m>div {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 300px;
padding: 14px;
vertical-align: middle;
/*styling*/
color:white;
background-color: #140A08;
outline:none;
}
</style>
</head>
<body>
<title>CSS centering Done Right.</title>
<div class="m">
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, enim, possimus, voluptates, quia voluptatibus voluptas eum quaerat iure aperiam asperiores debitis fuga itaque quibusdam a ad odio assumenda iusto voluptatem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, ex quia consequatur quae quasi amet veniam est quas error quos perferendis ducimus non similique in soluta magnam dolore molestias veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, doloremque iste magni in eveniet ipsa odio mollitia eligendi magnam placeat aliquam hic reprehenderit reiciendis itaque assumenda ratione delectus. Alias, quis.</div>
</div>
</body>
</html>
margin: auto; is what you need. Try this:
<style>
* {
margin: 0;
padding: 0;
}
/*html, body, .m {
height: 100%;
width: 100%;
}*/
.m {
opacity:1;
font-size: 0;
overflow: auto;
text-align: center;
margin: auto;
/*styling>>*/
background-color: #8F1C10;
}
.m::before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.m>div {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 300px;
padding: 14px;
vertical-align: middle;
/*styling*/
color:white;
background-color: #140A08;
outline:none;
}
</style>
I'm trying to add a black line after a header tag in HTML using css :after pseudo class. Here is the code:
.container {
max-width: 700px;
margin: 0 auto;
padding: 10px;
letter-spacing: 0.07em;
line-height: 1.5em;
font-size: 130%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1:after {
display: inline-block;
content: "";
height: 2px;
background: black;
width: 200px;
margin-left: 5px;
margin-top: 8px;
}
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
<p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>
Codepen: http://codepen.io/angelangelesiii/pen/YXwPJb
I want that long black line to span the entire width left by the header itself.
Note: I don't want to try spanning the line to 100% then putting the header in front of it with a white background. It's an illusion but not the answer I'm trying to find. And as much as possible, no JS solutions I'm keeping this as simple as it can be.
Use position: absolute; and width:100% will give you desired output.
Check following.
.container {
max-width: 700px;
margin: 0 auto;
padding: 10px;
letter-spacing: 0.07em;
line-height: 1.5em;
font-size: 130%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1::after {
background: none repeat scroll 0 0 black;
content: "";
display: inline-block;
height: 2px;
margin-left: 5px;
margin-top: 8px;
position: absolute;
top: 0.5em;
width: 100%;
}
h1 {
overflow: hidden;
position: relative;
}
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia accusamus aperiam magni perspiciatis dignissimos, reiciendis dolor temporibus esse dolores quasi, reprehenderit necessitatibus culpa quas nesciunt quaerat porro! Ab, laborum.</p>
<p>Dolorem eligendi cumque deserunt illo quas aut pariatur inventore, optio provident maxime consectetur, soluta sed, aperiam illum beatae. Quidem beatae aliquid, impedit sit in accusamus rem necessitatibus, velit fugiat! Cupiditate.</p>
</div>
Hope it helps.
Nevermind I have answered my question (once again)
.container {
max-width: 700px;
margin: 0 auto;
padding: 10px;
letter-spacing: 0.07em;
line-height: 1.5em;
font-size: 130%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
display: -webkit-flex;
display: flex;
width: 100%;
}
h1:after {
-webkit-flex: 3;
-flex: 3;
display: inline-block;
content: "";
height: 2px;
background: black;
margin: auto 0 auto 5px;
}
I have used flexbox to solve this. I know that flexbox have some issues but this works for me so it's good.
I tried to solve it using tables display properties
h1 {
display: table;
white-space: nowrap;
}
h1:after {
display:table-cell;
content: "";
width: 100%;
border-bottom: 2px solid black;
}