Whenever I add a border smaller than 5px to a parent div there is a bit of whitespace at the bottom and to the right of the content. As shown in the picture below.The white space is visible here
Code Here:
body {
background: khaki;
margin: 10px;
}
.nav>div {
text-align: center;
font-size: 2rem;
color: white;
}
.st-div {
background: cadetblue;
}
.nd-div {
background: crimson;
}
.rd-div {
background: cadetblue;
}
.nav {
border: solid 3px orange;
}
<body>
<div class="nav">
<div class="st-div">Home</div>
<div class="nd-div">About us</div>
<div class="rd-div">Log Out</div>
</div>
</body>
Related
Im having an issue where my background color for a child element is going past my parent elements borders. How could I remedy this?
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Edit: I should mention I tried adding the same border radius only to the top of banner but this then left a small gap of white space between the color and the border of the parent.
overflow:hidden will prevent the inner child elements from extending beyond the bounds of the parent.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
overflow:hidden;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Apart from using overflow: hidden, it's also possible to use contain: content, which tells other elements that the child elements inside that particular element will never affect other elements, and will also never be displayed outside the parent element.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
/* ADDED */
contain: content;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
I'm trying to get a feature on my page similar to https://www.youtube.com/
Specifically, the tab on the left that includes your playlists, subscriptions, and more.
I'm trying to attempt that but without the collapse feature.
Can anyone help me out? Thanks
YouTube uses a webkit scrollbar for that section.
Here it is with the same color schemes. Do note that webkit properties are not globally supported.
.container {
max-height: 200px;
width: 50%;
overflow: auto;
}
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-track {
background: transparent;
}
.container::-webkit-scrollbar-thumb {
background: transparent;
}
.content {
height: 800px;
}
.container-dark {
background: #212121;
}
.container-dark:hover::-webkit-scrollbar-thumb {
background: #4A4A4A;
}
.container-light {
background: #fff;
}
.container-light:hover::-webkit-scrollbar-thumb {
background: #cfcfcf;
}
<div class="container container-dark">
<div class="content">some content in dark mode</div>
</div>
<div class="container container-light">
<div class="content">some content in light mode</div>
</div>
YouTube only shows the scrollbar thumb when the container is being hovered, when it isn't being hovered, the scrollbar is transparent.
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
height: 56px;
border-radius: 8px;
border: 4px solid transparent;
background-clip: content-box;
background-color: #888;
}
*::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I have an issue when I change border width from 1px to 0px.
That changes the layout of divs. The divs should be stacked step by step in the influence of margin, but when I set the border width as 0px, the top margin becomes 0px.
This is my code.
div {
height: 300px;
width: 50%;
margin: 10px;
border: 1px solid red;
}
.red {
background-color: #ffcccc;
}
.green {
background-color: #ccffcc;
}
.blue {
background-color: #ccccff;
}
.purple {
background-color: #cccccc
}
<div class="red">
<div class="green">
<div class="blue">
<div class="purple"></div>
</div>
</div>
</div>
In the standard html content box model the width is only that of the content of the box. If you add padding and/or borders to it, these will be added to the box width (in your case, 50% + 1px + 1px).
You can change this behavior by choosing to use a different box model, the border box model : in this case the width you specify will always include padding and border.
You can do that like this:
<style>
div {
box-sizing: border-box;
height: 300px;
width: 50%;
margin: 10px;
border: 1px solid red;
}
.red { background-color: #ffcccc; }
.green { background-color: #ccffcc; }
.blue { background-color: #ccccff; }
.purple { background-color: #cccccc}
</style>
See here and here for more details.
You can try this
div {
height: 300px;
width: 50%;
padding: 1px;
margin:10px;
border:0px solid red;
}
.red {
background-color: #ffcccc;
}
.green {
background-color: #ccffcc;
}
.blue {
background-color: #ccccff;
}
.purple {
background-color: #cccccc;
}
<div class="red">
<div class="green">
<div class="blue">
<div class="purple"></div>
</div>
</div>
</div>
You can use this code
body {
margin: 0;
padding: 0;
}
div {
height: 300px;
width: 50%;
margin: 10px;
border: 0px solid red;
float: left;
}
.red {
background-color: #ffcccc;
}
.green {
background-color: #ccffcc;
}
.blue {
background-color: #ccccff;
}
.purple {
background-color: #cccccc;
}
<div class="red">
<div class="green">
<div class="blue">
<div class="purple"></div>
</div>
</div>
</div>
This should do it!
<style>
div {
height: 300px;
width: 50%;
margin: 10px;
box-shadow:inset 0px 0px 0px 1px red;
}
.red { background-color: #ffcccc; }
.green { background-color: #ccffcc; }
.blue { background-color: #ccccff; }
.purple { background-color: #cccccc}
</style>
<div class="red">
<div class="green">
<div class="blue">
<div class="purple"></div>
</div>
</div>
</div>
I'm working with bootstrap panel. PSD suggest that when I hover over a panel background color and content color will change. that's fine I can do that.
but how to extend hover-color in top and bottom? and content position should stay there!
<div class="row">
<div class="col-md-4">
<div class="panel">
</div>
</div>
</div>
.panel:hover{
background-color: #13BDFF;
}
Update
Just use outline CSS property which has excellent browser support (IE8+). Demo:
.panel:hover {
background-color: #13BDFF;
outline: 5px solid #13BDFF;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
Original answer (not recommended way)
You can use transparent borders (also padding can help you with this) and negative margin for this:
.panel:hover {
background-color: #13BDFF;
border: 5px solid transparent;
margin-left: -5px;
margin-top: -5px;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
https://jsfiddle.net/xkqvv92p/
Here's a version using padding on hover.
.rowArea {
height: 400px;
background-color: red;
display: flex;
align-items: center;
}
#container {
margin: auto;
width: 200px;
height: 300px;
background-color: white;
border-radius: 5px;
padding: 5px;
}
#container:hover {
padding: 30px 5px;
background-color: #13C3FF;
}
<div class="rowArea">
<div id="container">hi</div>
<div id="container">hi2</div>
</div>
Changing the border color and size might solve the issue.
please refer the sample fiddle :
.panel:hover{
background-color: #13BDFF;
border-color : #13BDFF;
border:10px solid #13BDFF;
}
https://jsfiddle.net/3wkjuzbk/1/
I was going to work with some JSON to fill in content as an exercise, but while putting together my initial HTML I ran into an issue simply trying to have a couple links on either side of the page. I have a main-container div, and inside I have the two links, and another div, which I was going to put the JSON content.
This question has nothing to do with the JSON content to be clear, I just got stuck on the css of trying to position the two tags right. I've got height: 100% for the html, body, main-container, and second div. The closest I've got is floating the two tags to the left and right, then using an overflow: auto on the main-container, but the problem is that when you shrink the page, the a tags overflow the descendant div, and also, regardless of the size, there is a weird bar at the bottom of the page, with a scrollbar.
Here is the jsfiddle:
https://jsfiddle.net/g8qeko98/
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkboxes from JSON</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
</body>
</html>
Here are my styles:
html, body {
height: 90%;
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100%;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 2%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
First of all, you don't need that height of 90% on html and body. I don't see any weird bars on bottom but my guess is you're referring to the result of setting that height.
Second, you just need to set your values a little more carefully to prevent items from overlapping.
html,
body {
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100vh;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 20px 5%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 60px 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
https://jsfiddle.net/eqpbkozr/