Does anyone know how to remove the thin gap to the left of the scrollbar that is letting the background through (showing green on this example)?
.menu {
min-width: 195px;
max-height: 200px;
overflow: auto;
position: fixed;
background-color: #F9F9F9;
border: solid 1pt yellow;
}
.button {
border: solid 1px white;
min-width: 200px;
}
body {
background-color: green;
}
<div id="x" class="menu" style="top: 100px; left: 100px;">
<div class="button">a</div>
<div class="button">b</div>
<div class="button">c</div>
<div class="button">d</div>
<div class="button">e</div>
<div class="button">f</div>
<div class="button">g</div>
<div class="button">h</div>
<div class="button">i</div>
<div class="button">j</div>
<div class="button">k</div>
<div class="button">l</div>
<div class="button">m</div>
<div class="button">n</div>
<div class="button">o</div>
<div class="button">p</div>
A running example of this can be found on https://jsfiddle.net/Abeeee/f9jtsrw0/29/
It seems like a bug to me but I replaced:
border: solid 1pt yellow;
from your .menu with:
border: solid 1px yellow;
The pt seems to make rounding errors occur.
I've added border-right: 0pt; to the menu css which removes the right border.
.menu {
width: 200px;
height: 195px;
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
background-color: #F9F9F9;
border: solid 1pt yellow;
border-right: 0pt;
}
.button {
border: solid 1px white;
width: 200px;
}
body {
background-color: green;
}
.background {
background-color: white;
z-index: -1;
}
<div id="x" class="menu" style="top: 100px; left: 100px;">
<div class="background">
<div class="button">a</div>
<div class="button">b</div>
<div class="button">c</div>
<div class="button">d</div>
<div class="button">e</div>
<div class="button">f</div>
<div class="button">g</div>
<div class="button">h</div>
<div class="button">i</div>
<div class="button">j</div>
<div class="button">k</div>
<div class="button">l</div>
<div class="button">m</div>
<div class="button">n</div>
<div class="button">o</div>
<div class="button">p</div>
</div>
</div>
Related
Want to create a slider containing 3 image containers and need all of them in the same row. All image containers are same size, but the size of slider is around 2.5 images, so the third one should overflow instead of going to new row. Example:
How it should look
What i have for now
html
<div class="image-slide-wrapper">
<div class="images-section">
<div class="image-slide">
<div class="slide-img">
</div>
</div>
<div class="image-slide">
<div class="slide-img">
</div>
</div>
<div class="image-slide">
<div class="slide-img">
</div>
</div>
</div>
</div>
scss
.image-slide-wrapper {
float: left;
height: 55%;
width: 100%;
.images-section {
float: left;
height: 85%;
width: 100%;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
}
.image-slide {
float: left;
height: 100%;
width: 100px;
margin-right: 0.25rem;
.slide-img {
float: left;
height: 100%;
width: 100%;
border-radius: 0.35rem;
background-color: #e9e9e9;
in the text slider is images-section class and image container is image-slide class. Forgot to mention that I have to go with float to make consistent with the rest of the code.
<div style="overflow: hidden; width: 250px;">
<div style="width: max-content">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
</div>
</div>
You could remove float from the thumb elements and use display: flex and flex-flow: row nowrap on the container
.container {
height: 100px;
width: 250px;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
display: flex;
flex-flow: row nowrap;
}
.image-slide {
height: calc(100% - .25rem);
flex: 1 0 100px;
margin-right: 0.25rem;
border: 1px #ccc solid;
}
<div class="container">
<div class="image-slide"></div>
<div class="image-slide"></div>
<div class="image-slide"></div>
<div class="image-slide"></div>
</div>
This works. You can add display:flex; and flex-wrap:nowrap; to .image-slide-wrapper class.
.main {
float: left;
height: 85%;
width: 100%;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
display:flex;
flex-wrap:nowrap;
}
.slider {
float: left;
height: 100%;
width: 300px;
margin-right: 0.25rem;
display: block;
}
<div class="main">
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
</div>
.second{
width: 150px;
height: 150px;
border: 2px solid red;
}
.first{
position:fixed ;
top: 0;
}
<div class="container">
<div class="first">
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li></div>
<div class="second"></div>
</div>
How to avoid the positioning of "second" over "first" container? I want to position both containers side by sie (first->left;second->right). With position fixed i want to apply the sticky property.
You can use CSS flex-box to build what you want ;)
.container {
display: flex;
}
.first {
width: 150px;
height: 150px;
border: 2px solid blue;
}
.second {
width: 150px;
height: 150px;
border: 2px solid red;
}
<div class="container">
<div class="first">
<ul>
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li>
</ul>
</div>
<div class="second"></div>
</div>
Make use of
display: inline-block;
I don't know what you want to do with position: fixed but you can achieve your goal of side by side div using the following code.
.second{
width: 150px;
height: 150px;
border: 2px solid red;
float:left
}
.first{
width:150px;
height:150px;
border: 2px solid blue;
top: 0;
float:left
}
<div class="container">
<div class="first">
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li></div>
<div class="second"></div>
</div>
Building on the answer from masoudmanson if you want the red box to align right, you can do the following;
.container {
display: flex;
flex-wrap:no-wrap;
}
.first {
flex-grow:1;
border: 2px solid blue;
}
.second {
width: 150px;
height: 150px;
border: 2px solid red;
}
<div class="container">
<div class="first">
<ul>
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li>
</ul>
</div>
<div class="second"></div>
</div>
I have placed one <div> over another one with position absolute and with 10px padding to the left margin (this is because I want to show a shadow).
The problem is that the content of the base <div> is showed on the left of the header <div>, how to avoid this? If I use border-left instead of padding-left the shadow is not showed.
#container {
background-color: green;
display: flex;
}
.item {
background-color: white;
border: 1px solid black;
flex-grow: 0;
}
.bigContent{
height: 1000px;
width: 1000px;
}
.scroll{
overflow: auto;
height: 300px;
width: 500px;
}
.header{
height: 280px;
width: 200px;
position: absolute;
z-index: 1;
padding-left:10px;
overflow:hidden;
display: inline;
border: solid 1px;
}
.headerContent{
background: lightgrey;
height: 280px;
width: 200px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
<div id="container">
<div id="header" class="header">
<div class="headerContent">
<div class="shadow">
<table width="500px">
<tr><td>Header</td></tr>
</table>
</div>
</div>
</div>
<div class="item scroll">
<div class="bigContent">
<table width="500px">
<tr><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td></tr>
</table>
</div>
</div>
</div>
The problem is that the content of the base <div> is showed on the
left of the header <div>, how to avoid this?
You have correctly added padding-left on the header div to allow for the shadow, and the header div is indeed on top of the content. However, the header div has a transparent background by default.
So in order to hide the content below - you could simply add a white background to the header div.
.header {
...
background-color: white;
}
#container {
background-color: green;
display: flex;
}
.item {
background-color: white;
border: 1px solid black;
flex-grow: 0;
}
.bigContent{
height: 1000px;
width: 1000px;
}
.scroll{
overflow: auto;
height: 300px;
width: 500px;
}
.header{
height: 280px;
width: 200px;
position: absolute;
z-index: 1;
padding-left:10px;
overflow:hidden;
display: inline;
border: solid 1px;
background-color: white;
}
.headerContent{
background: lightgrey;
height: 280px;
width: 200px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
<div id="container">
<div id="header" class="header">
<div class="headerContent">
<div class="shadow">
<table width="500px">
<tr><td>Header</td></tr>
</table>
</div>
</div>
</div>
<div class="item scroll">
<div class="bigContent">
<table width="500px">
<tr><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td></tr>
</table>
</div>
</div>
</div>
How do I add a square onto a border between a div and an image? The square will be position on the left or the right depending on the position of the text (if the text is aligned right, the square will be bottom left; if the text is aligned left, the square will be top right).
.item {
flex: 1;
background: #8d0700;
margin-left: 5px;
margin-right: 5px;
padding: 0px;
width: 250px;
border: 5px solid #000;
}
.image img {
width: auto;
height: 450px;
outline: 2px solid rgba(218, 236, 255, 0.6);
outline-offset: -6px;
}
.name {
height: 100px;
text-overflow: wrap;
background-color: #8d0700;
color: #fff;
}
.bottomborder {
border-bottom: 5px solid #000;
}
.topborder {
border-top: 5px solid #000;
}
.name .left {
padding-left: 10px;
}
.name .right {
float: right;
margin-right: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-container w3-row-padding indexcontainer">
<div class="items">
<div class="w3-col l3 item">
<div class="name bottomborder">
<h3 class="right">Die Casting and Machining</h3>
</div>
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
<div class="w3-col l3 item">
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
<div class="name topborder">
<h3 class="left">Plastic Injection Products</h3>
</div>
</div>
</div>
</div>
You can achieve this using pseudoelements.
You can adjust the position as you need. I've used calc() here to take into account the width of the border.
.item {
flex: 1;
background: #8d0700;
margin-left: 5px;
margin-right: 5px;
padding: 0px;
width: 250px;
border: 5px solid #000;
}
.image img {
width: auto;
height: 450px;
outline: 2px solid rgba(218, 236, 255, 0.6);
outline-offset: -6px;
}
.name {
height: 100px;
text-overflow: wrap;
background-color: #8d0700;
color: #fff;
}
.bottomborder:after,
.topborder:before {
content: '';
width: 3em;
height: 3em;
background: black;
transform: rotate(45deg);
position: absolute;
}
.bottomborder {
border-bottom: 5px solid #000;
position: relative;
}
.bottomborder:after {
left: 3em;
bottom: calc(-1.5em - 3px);
}
.topborder {
border-top: 5px solid #000;
position: relative;
}
.topborder:before {
right: 3em;
top: calc(-1.5em - 3px);
}
.name .left {
padding-left: 10px;
}
.name .right {
float: right;
margin-right: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-container w3-row-padding indexcontainer">
<div class="items">
<div class="w3-col l3 item">
<div class="name bottomborder">
<h3 class="right">Die Casting and Machining</h3>
</div>
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
<div class="w3-col l3 item">
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
<div class="name topborder">
<h3 class="left">Plastic Injection Products</h3>
</div>
</div>
</div>
</div>
I would like the content in the second column to have 10px of space above it. But when I add "padding-top: 10px;" the content of both columns comes down 10px. Can anyone suggest a solution?
CSS:
#div1 { display: table;}
#div1-1 { display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
#div1-2 { display: table-cell;
width: 200px;
border: 1px solid #aaa;
padding-top: 10px;
}
HTML:
<div id="div1">
<div id="div1-1">Apples</div>
<div id="div1-2">Oranges</div>
</div>
If you add float:left; to #div1-1, the first column will remain as it is.
My solution is to try to add a box in each cell
#myDiv {
display: table;
}
#div1 { display: table-row;}
#div1-1{
display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
#div1-2 {
display: table-cell;
width: 200px;
border: 1px solid #aaa;
}
.space{
height:10px;
width:100%;
display:block;
}
.content{
width:100%;
}
<div id="myDiv">
<div id="div1">
<div id="div1-1">
<div class="content">Apples</div>
<div class="space"> </div>
</div>
<div id="div1-2">
<div class="space"> </div>
<div class="content">Oranges</div>
</div>
</div>
</div>