I have a design with stacked divs, where the inner divs will have various skews and rotations. Doing some initial testing, quite logically the rotated divs leave gaps on the edges rather than being flush 100%. Here's a crude example:
What's the best way to fill these gaps and have them work tightly responsively? My initial thought is to add other skewed divs to fill in the spaces, but wondering if there are better methods? Thanks.
Without a working code sample, it's hard to give you precise advice, but in general, you just increase the width of the rotated element and potentially offset it to the right or left depending on how you have positioned it.
div {
background: black;
height: 100px; width: 100px;
position: relative;
margin: auto;
overflow: hidden;
}
span {
display: block;
background: green;
height: 10px;
width: 150%;
position: absolute;
top: 50%; left: -25%;
transform: rotate(20deg);
}
<div>
<span></span>
</div>
Related
It appears that when scaling down an element which previously did not fit in its container, margin: 0 auto will no longer center the element within its parent (note that using transform-origin: center center does not solve this). This is because the auto margins seem to apply before the scaling rather than after (I expected the latter).
While playing with this, I eventually managed to center the element within its container, but only using absolute positioning:
position: absolute;
transform: translateX(-50%) scale(0.5, 0.5);
left: 50%;
This is a very popular technique, but in this particular case, it is important to place the translateX function before the scale function, as these are executed in the defined order.
Following is a snippet of code to illustrate the issue (also on CodePen: https://codepen.io/liranh85/pen/qVewQp)
.container {
border: 3px solid black;
width: 500px;
height: 200px;
margin: 0 auto;
position: relative;
}
.scaled {
background-color: blue;
width: 600px;
/* width: 400px; */
height: 100%;
transform: scale(0.5, 0.5);
/* transform: translateX(-50%) scale(0.5, 0.5); */
margin: 0 auto;
/* position: absolute;
left: 50%; */
}
<div class="container">
<div class="scaled"></div>
</div>
Notice that:
The element is not centered using auto margins when its width is bigger than its container's.
When giving the scaled element a width smaller than its container, it will remain centered after scaling (e.g. try using width: 400px).
When using absolute positioning, as mentioned above, it is possible to center the element.
I'm wondering:
Has anyone else run into this issue?
Is this the best way to center such an element?
Am I correct to say the auto margin cannot be used to center such an element?
You need to use
transform-origin: center;
Take a look at some of the docs on this
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Your suspicions are correct: when the element is too wide to fit within its parent, margin: 0 auto will not horizontally center the element. It will instead cause the element to overflow at the far right edge of its parent.
You can center your element properly by using translateX(-50%) before you scale the element, on top of positioning the element absolutely and using left: 50%. The reason why this works is because by absolutely positioning your child element, you are taking it out of the layout flow of the parent and therefore can position it in the horizontal center of the parent.
Note: This solution assumes that you are using height: 100%. If vertical centering of a non-full-height element is required, update the styles so that you're using translate(-50%, -50% and top: 50%; left: 50%.
Here is a proof-of-concept example based on your code you've provided:
.container {
border: 3px solid black;
width: 500px;
height: 200px;
margin: 0 auto;
position: relative;
}
.scaled {
background-color: blue;
width: 600px;
height: 100%;
transform: translateX(-50%) scale(0.5, 0.5);
position: absolute;
left: 50%;
}
<div class="container">
<div class="scaled"></div>
</div>
See JSfiddle below:
https://jsfiddle.net/jamesdd9302/mpocy8vo/
I have 3 steps side by side, hence the parent <div class="col-xs-4">. Each step should look like a clean circle that's centered (which I'm trying to achieve with an inner div placement) with a number inside of it.
Because your width is unknown (100%), you are going to want to set the height using padding percentage, because percentage padding is calculated from the width.
.circle {
background: #515151;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: max;
text-align: center;
color: white;
width: 100%;
padding-bottom:100%;
height:0;
position:relative;
}
.circle-caption {
display: block;
left: 0;
height: 1em;
position: absolute;
right: 0;
top: 50%;
margin-top: -.5em;
}
<div class="circle" id="step-1-default-image-box">
<span class="circle-caption">1</span>
</div>
Vertical centering becomes tricky with this, so you'll have to add another wrapper around the text that you can position absolutely.
Someone else just added an answer like this and deleted it, but I think that this is the best way to do this.
I have seen people ask questions about how to get two divs to line up side by side. I can get mine to do that just fine.
My problem is that they will not smash up against each other. There always seems to be a gap.
For example, I have a wrapper div with a width of 500px. Inside that div I have two other divs with widths of 250px.
They will not line up next to each other because there is not enough space for each other.
When I set the width to 248px they do line up but with a 4px gap between each other.
I have an example of this code located here:
https://c9.io/riotgear66/day1/workspace/sams/html/index.html
Please feel free to take a look at it and try adjusting it with your browser's element inspector.
The layout problem is the result of applying display: inline-block to the div elements.
Any white space between those div elements are taken into account when laying out the content.
You could remove the white space (linefeed or carriage return) between the div's if you don't mind how your source code looks.
Since your parent container has specific dimensions (500px x 300px), I would use absolute positioning to place the child elements. This would make it easier to position your logo motif over the other images.
You could also use floats as stated in other responses, not any easier or harder.
In this application, the layout is fixed so there are no design considerations for a responsive or flexible design, so either approach is valid.
Demo
You can see how this might work in the following demo: http://jsfiddle.net/audetwebdesign/hZ5dB/
The HTML:
<div class="container">
<div class="panel ul"></div>
<div class="panel ur"></div>
<div class="panel ll"></div>
<div class="panel lr"></div>
<div class="overlay"><span>Cats</span></div>
</div>
and the CSS:
.container {
border: 1px dotted blue;
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
}
.panel {
width: 250px;
height: 150px;
position: absolute;
}
.ul {
background: red url("http://placekitten.com/400/400") -50px -20px no-repeat;
top: 0; left: 0;
}
.ur {
background: red url("http://placekitten.com/300/300") 0px -30px no-repeat;
top: 0; right: 0;
}
.ll {
background: red url("http://placekitten.com/350/250") -20px -20px no-repeat;
bottom: 0; left: 0;
}
.lr {
background: red url("http://placekitten.com/300/200") 0px -30px no-repeat;
bottom: 0; right: 0;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.overlay span {
display: block;
background-color: gray;
border-radius: 50%;
text-align: center;
vertical-align: middle;
width: 80%;
height: 80%;
margin: 10%;
line-height: 80px;
}
I also show how you can create the circular motif without having to modify the original background images, saves a bit of work with PhotoShop or similar.
You shouldn't be using
display: inline-block;
Make them:
float: left;
Here is a jsfiddle sample of how it should be.
http://jsfiddle.net/Tqdqa/
The problem lies in the white space in your HTML. When using display: inline-block, white space after elements is taken into account like Marc Audet said.
To fix it without changing your current method, you must remove that white space. The easiest way I've found to do so while still maintaining readability of the HTML is by commenting it out, or using <!-- after each element and --> before the next element. This prevents having to change the whole structure and you can make each one 250px again as well
You could also move the closing > to the next line, move everything after the opening <div> to the next line, or use margin-left:-4px; for each element after the first. Or use a method described by others here, floating it or using FlexBox
Here is the CSS Tricks page that references this situation and provides more detail
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>
I'm trying to create this design for a WP template:
http://minus.com/lbi1iH25EcKsu7
Right now I'm like this: http://www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html
I think you can get the general idea ;)
I know...it's my fault: The browser calculate the size of the window from left to right, so if I put a margin it will move the div with the 100% size to de right.
But the thing is: I don't know how to make it work :(.
I wanted to make the "black bars" with divs (I painted the ones than don't work in red and orange) and the trick worked...but only the left ones works like I want.
I'm getting out of ideas. I tried like everything I could think off, and nothing works.
Maybe you can help me? ;)
This is the html code:
<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>
And this the css:
.barraUL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: -20px;
}
.barraDL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
position: absolute;
width: 50%;
height: 27px;
background-color: red;
left: 50%;
margin-left: 500px;
margin-top: -4px;
}
.barraDR {
position: absolute;
width: 50%;
height: 27px;
background-color: orange;
left: 50%;
margin-left: 500px;
margin-top: 325px;
}
The right divs are expanding to 50% the window width. For a liquid layout where the bars extend to the length of the window and then cut off, you'd usually make an underlaying div (in this case the bars and the black patterned background) and then expand it to 100% of the window. You can't make an additive layout using relative lengths like percent (left div + fixed middle image + right div) with just CSS (especially not with absolute positioning). If you insist on using this, you'll have to overflow: hidden; the html {} or body {} tag after centering your content and that's just bad practice. I recommend just having two long divs go all the way across the screen under your sprite image.