I am trying to make a pop-up lightbox on my page which shrinks to fit the size of the element inside it, and centre it on the page. So far I have:
.lightboxVariable{
display:block;
position: absolute;
top:0;
bottom: 0;
width : auto;
left:0;
right:0;
padding-left:10px;
padding-right:20px;
padding-top:10px;
padding-bottom:20px;
background:rgba(255,255,255,0.9);
border:black, thin;
box-shadow: 5px 5px 5px grey;
z-index:1000000;
overflow: auto;
text-align:center;
height:800px;
}
Now with the left:0; and right:0;, the element spreads across the entire page (ie it ignores the width:auto;) but without them, the element just sits against the left-hand side of the page.
Is there a way to do both without having to resort to some sort of js-based code?
You could try the following
width: auto;
height: auto;
top: 50%;
left: 50%;
// don't declare right or bottom
transform: translateX(-50%) translateY(-50%);
It will put the left edge of the element in the center (left: 50%;), then nudge it back to the left (translateX(-50%)).
Similarly for vertical center (top: 50%;) and (translateY(-50%)).
Related
I have a full width background image with some content.
At the end I want to position my buttons in center (vertically and horizontally), but with position:absolute, that doesn't work. You can see it in JSFiddle.
There is some code lines from my CSS
.buttons{
position:relative;
}
.buttons .button-pos{
width:100%;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
And there is little scheme of that what I want.
1.) Your .buttons div doesn't have a height, so first you need to define a height for it, otherwise there is no vertical centering possibility ( I made it 200px in the fiddle).
2.) To center .button-pos within .buttons, use
.button-pos {
width: 100%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Here's the fiddle: https://jsfiddle.net/Luo1k7Lt/1/
I make some solution by myself and it works now very well, I decided to center all my content, what was in the header. Only some little changes with screen sizes and it works well
#welcome-header .welcome-content{
width: 80%;
height: 400px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.buttons{
margin-top: 40px;
}
Try this:
.buttons .button-pos {
display: inline-block;
zoom: 1;
}
A simple IE hack is to add display*: inline; in that CSS rule
I am currently trying to get a div to center in the middle of my page. I get it centering in the middle but I am having a problem when I resize the page. When I make the window as small in width as I can, the div goes off the left of the page. Here is a jsfiddle representing what I have:
https://jsfiddle.net/ghsxnsqy/
Here is some css:
.wrapper{
top: 50%;
left: 50%;
width:200px;
height:60px;
margin-top: -30px; /*set to a negative number 1/2 of your height*/
margin-left: -100px; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
position:fixed;
}
Now if you look at that and resize the window to make it as small as you can in width, you can see the div going off to the left. How do I make it stop at the edge of the page? I can't find a way without using margin auto. Any suggestions?
Remove:
margin-left: -100px;
margin-top: -30px;
And apply transform: translate(-50%); to wrapper class.
-webkit-transform: translate(-50%); for webkit browser like chrome.
Updated Fiddle
You want to set a few CSS properties.margin: auto;
width: ;set the width to your desired width/percent. It will automatically make the margin on the left and right side equivalent.
So I suppose you want either this push-to-right-instead solution or this resize-instead solution.
Both involve wrapping your actual element inside a container:
<div class="container">
<div class="wrapper">
</div>
</div>
And centering horizontally using text-align:
.container{
top: 50%;
left: 0;
right: 0;
margin-top: -30px;
position:fixed;
text-align: center;
}
.wrapper{
...
display: inline-block;
}
I'm busy on this new website thing, and I run into a problem. Normally, when making the menu, I would just use the entire space, like 100% width and maybe 100px height but now, I need just a portion of that, so there is a whitespace next to the menu on both sides.
I tried to get the square, that carries the menu, to the absolute top of the page, most obvious solution:
position:absolute;
top:0;
But now, the square is also moved to the absolute left of the page, instead I want it centered, but I can't get there. This is a piece of my CSS:
body, html {
background-color: #ecf0f1;
position: absolute;
top: 0;
margin: 0 auto;
}
.navbox {
background-color: #000;
height:100px;
width: 700px;
margin: 0 auto;
}
Is there anyone with the solution?
position:absolute;
top:0;
left:0;
right:0;
Adjust left and right to suit your desired margins.
You would probably want to set your left and right to percentages, using 50% for both will center it:
#menu {
position:absolute;
top:0;
width: 70px;
height:180px;
left: 50%;
right: 50%;
background-color: red;
}
Also, if you are not using absolute positioning you can do the same with this margin-left and margin-right.
jsfiddle
I am trying to attempt a DIV that should be placed at the bottom right corner of a page with a close button at the top-right corner in that DIV
I have the following markup with me
<div id="message">
<p>Some Message</p>
<span class="shut">
</span>
</div>
I have defined the CSS as follows
#message{
position:fixed;
bottom:0;
height:320px;
width:310px;
background: #453fefe;
padding: 10px 20px;
border-radius: 5px;
}
.shut {
background: transparent url('shutig.png') 0 0 no-repeat;
position: absolute;
top: 4px;
right: 4px;
}
Unfortunately I don't achieve what I am looking for. What's the right way to do it?
You have the invalid background color, which makes the CSS not work expectedly. Also the close button can't be rendered because you did not set an explicit size for it.
#message{
position:fixed;
bottom:0;
right:0;
height:120px;
width:210px;
background: #45fefe; /* you set #453fefe which is an invalid color */
padding: 10px 20px;
border-radius: 5px;
}
.shut {
background: transparent url('http://placehold.it/20x20') 0 0 no-repeat;
position: absolute;
top: 4px;
right: 4px;
width:20px;
height:20px;
}
Demo.
Don't use absolute positioning for the .shut it will position it relative to your screen not the parent.
Try playing around with float or use a table
.overlay{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(hex-shape.png) no-repeat center;
z-index:99999;
}
My background image is an overlay for the entire page. I would like to fill the rest of the page with white surrounding the overlay image but not within it.
I am using it to frame a picture in the middle of the screen.
The idea is the page can be a full color behind the background image and still be invisible because of the border or whatever gets put around the image.
.overlay{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background: #{your_color} url(hex-shape.png) no-repeat center;
z-index:99999;
}
If you know the size of the picture, this is an easy way to center an image in the middle:
HTML:
<div id="container">
<img id="placekitten" src="http://placekitten.com/g/200/300">
</div>
CSS:
#placekitten {
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -100px;
z-index: 9000;
}
#container {
height: 500px;
border: solid black 1px;
}
The key is to make the margin-top equal to -1 * height/2 and the margin-left equal to -1 * width/2. You do have to set these values manually for this to work, however.
FIDDLE
dont realy understand what you need but i think this will help
use stretch technique :
.overlay{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(hex-shape.png) no-repeat center;
z-index:99999;
}
play with the top, left, right, bottom values