I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
Related
I have an image and i want to put 2 circles on top of it, instead of the eyes.
body {
background-color: lightgrey;
color: #fff;
padding: 0;
margin: 0;
}
main {
display: grid;
place-items: center;
position: relative;
}
#container {
min-height: 100vw;
min-width: 100vw;
background: none;
aspect-ratio: 1 / 1;
}
.eye-container {
position: relative;
border-radius: 50%;
background-color: red;
width: 12vw;
height: 12vw;
}
.eye-container.left {
top: -84%;
left: 36%;
}
.eye-container.right {
top: -96%;
left: 51%;
}
.eye {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 3vw;
height: 3vw;
border-radius: 50%;
background-color: #000;
}
img {
max-width: 100%;
min-width: 100%;
}
<main>
<div id="container">
<img id="sponge" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="eye-container left">
<div class="eye"></div>
</div>
<div class="eye-container right">
<div class="eye"></div>
</div>
</div>
</main>
The current issue is the image is too big, it is stretched.
The initial problem was that the layout was not responsive on mobile, and i've did some changes and now the image is this big.
I've used aspect-ratio: 1 / 1; because top was not working with negative percentage, and with pixels the eyes location is changing if is shrink the window.
Do you have another suggestion, maybe a simplified code will be better.
Thank you.
I'm a noob developer and I felt like, this was a tiny engineering job "LOL" but I did it for you.
So the most important point in this is to keep the image and the eyes in the same position. and to do that, you should position them in a parent container for image and eyes considering four important factors:
1- Parent position: relative; All children position: absolute;
2- All children's width: %; so it can stay in the same spot in its parent whatever the width of the parent is.
3- Eyes and eyeballs positioning top, left, right must be % too for the same purpose.
4- To change the image size, use the parent width. do not change the image size.
If you follow these steps, you can position any element with any image or other element.
* {
border: 1px solid blue;
margin: 0;
padding: 0;
}
.container {
width: 200px; /* use this to change the picture size. do not change it somewhere else */
position: relative;
}
.image {
width: 100%;
}
.eye-container{
position: absolute;
border-radius: 50%;
background-color: red;
width: 12%;
height: 12%;
}
.left-eye {
top: 17%;
left: 36%;
}
.right-eye {
top: 17%;
left: 51%;
}
.eyeball {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 30%;
height: 30%;
border-radius: 50%;
background-color: #000;
}
<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="left-eye eye-container">
<div class="eyeball"></div>
</div>
<div class="right-eye eye-container">
<div class="eyeball"></div>
</div>
</div>
I've got a problem with border-radius on wrapper that contains an overflow hidden.
I use a before pseudo element (pink background) to fill the wrapper's background. The wrapper has already a background (blue).
#wrapper {
background: blue;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
With this example, we can see an unwanted blue pixel on the top and bottom left corner.
The pseudo element must be in position absolute to apply animation. I removed the animation for the example.
How can I fix this?
A fix is here. Apply overflow:hidden an width:300px to the outer div #container.
#container {
width: 300px;
overflow: hidden;
border-radius: 12px;
}
#wrapper {
height: 90px;
background: blue;
border-radius: 12px;
position: relative;
box-sizing: border-box;
border: 2px solid pink;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
right: -30px;
position: absolute;
top: 0;
width: 30px;
border-radius: 50%;
transition: transform 0.3s;
}
#wrapper:hover::before {
transform: scale3D(10, 10, 1);
}
<div id="container">
<div id="wrapper"></div>
</div>
You found a really interesting rendering issue. My idea to solve it, is switch the colors and logic a little:
#wrapper {
background: pink;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: blue;
content: '';
display: block;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
I have a section where it is to equal columns full width across. if you look a the 2nd column where it says content here if i do 100% on the jscroll-pane it shows horizontal bars, if i give it 98% it works properly but is not full width of the column. not sure why it adds horizontal bars to 100% but not 98%. I am not sure if foundation is causing my issue or not but if i take it out of the column and put in a row the 100% works fine just not in a large-6
html
<section id="component">
<div class="row expanded collapse">
<div class="large-6 column">
<img src="images/image.png">
</div>
<div class="large-6 column">
<div class="jscroll-pane">
Content Here
</div>
</div>
</div>
</section>
css
.jscroll-pane {
display: block;
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: auto;
background-color: #fff;
}
#component {
padding: 0px;
background-color: #fff;
}
jscroll external css file
.jspContainer{
overflow:hidden;
position:relative;
height:100% !important;
width: 100% !important;
}
.jspPane{
position:absolute;
width: 100%!important;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #d8d8d8;
position: relative;
}
.jspDrag
{
background: #000;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Try this, Remove the display block and change overflow: auto to hidden; I believe this should help you.
.jscroll-pane {
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: hidden;
background-color: #fff;
}
I am trying to set the margin for multiple div elements inside a container div. Here is the HTML:
<div id="container">
<div id="square"></div>
<div id="square1"></div>
<div id="square2"></div>
</div>
Here is the CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
Now, say I want to edit the margin of square 1. Here is the updated CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
#square1 {
margin-top: 55px;
height: 50px;
background: red;
}
The margin of square 1 is correct. However, it messes up the margin of square2 because now the top margin is measured from square1 instead of the container div. How do I set the margins of all the sibling divs to where they are measured from the container, regardless of what the other sibling divs are added/removed? Any help would be greatly appreciated.
your will need to give position absolute and width 100%; you can check the js fiddle
Js fiddle
like this for every square
#square {
margin-top: 10px;
height: 50px;
background: green;
position:absolute;
width:100%;
}
You're better off dumping these square divs into a relative div and have an absolute position for each square div. You kind of lucked out because you know the height of each of your square divs.
So your HTML stays the same. The reason you put absolute within the relative is so that the absolute value plays into the #container field instead of body.
Your CSS changes however:
#container {
background: #eee;
width: 200px;
height: 500px;
position: relative;
border: 10px solid green;
}
#square {
margin-top: 10px;
position: absolute;
height: 50px;
left: 0;
right: 0;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
position: absolute;
background: black;
left: 0;
right: 0;
}
#square1 {
margin-top: 55px;
position: absolute;
left: 0;
right: 0;
height: 50px;
background: red;
}
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)