I want to dynamically append to the end of the body a fixed-positioned to the bottom box that has 1000px width and is centered horizontally.
When I create it with percentage width I can easily add margins and everything is ok, but when I have it in pixels I can't add margins anymore (it has to be responsive). auto doesn't work either.
How can I do that?
<div style="position: fixed; bottom: 0; width: 1000px; margin: 0 auto; padding: 0;height: 100px; background-color: green;">
</div>
Try this also:
div{
position: fixed;
bottom: 0;
width: 1000px;
left: 50%;
transform:translateX(-50%);
height: 100px;
background-color: green;
}
http://jsfiddle.net/eesry2ss/
body:after {
content:"";
width: 1000px;
height: 100px;
position: fixed;
left: 50%;
bottom:0;
margin-left: -500px;
background-color:green;
}
Try this:
div{
position: fixed;
bottom: 0;
width: 1000px;
left: 50%;
margin-left: -500px;
height: 100px;
background-color: green;
}
<div>
</div>
Try CSS3, to avoid giving calculated values in pixel for your margins.
left:50%;
transform: translateX(-50%);
Here's a demo: https://jsbin.com/zejutisabo/edit?html,css,output
Related
I want the page to look like the second image.I thought that with the overflow it would be enough to hide the rest of the image
This is the result:
This is what I want
.bgMentor{
height: 100%;
width: 100%;
overflow:hidden;
position:absolute;
}
.bgMentor img{
min-width: 100%;
min-height: 100%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: auto;
height: auto;
}
<div class="bgMentor">
<img class="img-responsive" src="{{Storage::url('img/getamentor.png')}}">
</div>
Try adding a top and left value for your position: absolute element
.bgMentor{
height: 100%;
width: 100%;
overflow:hidden;
position:absolute;
top: 0;
left: 0;
}
Try using overflow-y: hidden; instead of just overflow:;. If that doesn’t work, try putting the <Img> directly in the body and stylize it using a class=“bgMentor”.
I'm trying to make an image that overflows on it its parent div, but that's centered according to its parent.
Heres how I'd like it to look:
This is the code I currently have but obviously doesn't work,
.wrapper{
height:150px;
width:150px;
position:relative;
background:red;
margin:5em auto;
}
.image{
width:175%;
height:auto;
position:absolute;
}
body{
background:purple;
}
<div class="wrapper">
<img class="image" src="https://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
JSFiddle
Fiddle
I want to achieve this in pure css, no use of javascript.
You can center your image with the "negative translate" trick.
Here's a working example:
.wrapper {
height: 150px;
width: 150px;
position: relative;
background: red;
margin: 5em auto;
}
.image {
width: 175%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background: purple;
}
<div class="wrapper">
<img class="image" src="https://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
Based on this question.
.wrapper{
height:150px;
width:150px;
position:relative;
background:red;
margin:5em auto;
}
.image{
width:175%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
body{
background:purple;
}
Try this:
.image{
width:175%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
It should center your <img> no matter the size of the parent div
Oh looks like I'm late to this party, but I was going to suggest this technique - using the ::after pseudo element to draw your square underlay and don't actually make the image overflow the wrapper div.
https://codepen.io/hamzatayeb/pen/QMxJvw
<div class="wrapper">
<img class="image" src="http://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
Then this CSS -
.wrapper {
width: 262px;
height: 262px;
position: relative;
margin: 5em auto;
}
.wrapper::after {
content: "";
background: red;
position: absolute;
top: 16%; right: 16%; bottom: 16%; left: 16%;
z-index: -1;
}
.image {
padding-top: 25px;
width: 100%;
height: auto;
}
body {
background: purple;
}
Try this add this style only to your image
.image{
width:175%;
height:auto;
position:absolute;
top: -18px;
right: -65px;
}
JS Fiddle
So I have 3 Divs. Left, center right.
Image
If browser size smaller than center min-width, it goes down. Video:
Video
I don't know what do I wrong, so many people tried to help me + I searched for it but I didn't find anything. Here's the code:
HTML:
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS:
#parent
{
margin-left: 5%;
margin-right: 5%;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
}
#left {
position: relative;
width: 370px;
height: 100%;
float: left;
background: #093F5C;
overflow: hidden;
}
#right {
position: relative;
width: 230px;
height: 100%;
float: right;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
min-width: 550px;
overflow: auto;
}
maybe...
#left {
position: absolute;
left:0px;
top: 0px;
width: 370px;
height: 100%;
background: #093F5C;
overflow: hidden;
}
#right {
position: absolute;
right:0px;
top:0px;
width: 230px;
height: 100%;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
position:absolute;
left: 370px; /*width of leftDiv */
right: 230px; /*width of rightDiv */
top:0px;
/*min-width: 100px;*/
overflow: auto;
background: red;
}
jsfiddle: http://jsfiddle.net/alemarch/35bxtc2z/7/ (i have change the dimension fixed of the left and right div). Is this what you search?
The #center should have a max-width:550px, not a min-width:550px. You'll also probably want to add a width to it as well.
#center {
height:100%;
max-width:550px;
width:100%;
overflow:auto;
}
There's also a lot of other odd things about your CSS in general, but thats beyond the scope of this question... Some things to think about - why does the #parent have a position:fixed ? Why is everything else position:relative ? And why do you have heights of 100% ?
I'm fiddling with Jquery Cycle slideshow and trying to add a couple of buttons. I can't seem to align them veritcally without top: #px; tomfoolery; I'd love to just align it to middle of the div vertically.
CSS
#slidecontainer {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 200px;
}
.slidecontrols {
top: 50px;
position: absolute;
z-index: 100;
width: 100%;
}
.slidecontrols a {
background-color: white;
}
.slidecontrols a.next {
position: absolute;
right: 0;
}
.slideshow {
width: 100%;
height: 100%;
}
.bannered {
height: 200px;
width: 800px;
}
HTML
<div id="slidecontainer">
<div class="slideshow" id="slideoptions">
<img src="http://i.imgur.com/ufZ0cxL.jpg" class="bannered" alt="" /></a>
<img src="http://i.imgur.com/RZTrFy4.jpg" class="bannered" alt="" /></a>
</div>
<div class="slidecontrols">
right
left
</div>
</div>
Here's a Fiddle. Adding vertical-align: middle; to .slidecontrols does absolutely nothing.
Here's another option if you don't want to guess or set any pixels:
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
Assuming the height of the controls will be 20px, you could use a top value of 50% and then a negative margin-top value of half the element's height. In this case, -10px.
Example Here
.slidecontrols {
top: 50%;
margin-top: -10px;
position: absolute;
z-index: 100;
width: 100%;
}
Alternatively, if you need a solution for dynamic heights:
Example Here
.slidecontrols {
position:absolute;
top:0; right:0;
bottom:0; left:0;
z-index: 100;
width: 100%;
height:100%;
display:table;
}
.slidecontrols a {
display:table-cell;
vertical-align:middle;
}
Make top : 50% to slidecontrols which will align the links exactly at the center.
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
}
Another posibility if you consider the buttons has 20px height,
top: calc(50% - 10px); // 10px is half of buttons height
This will align it exactly at the center
When you have position: absolute, the vertical align will not work.
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child