I have a problem creating a CSS3 ONLY lightbox. This is my current code:
div#image-1 {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
padding: 1%;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
div#image-1 > div {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: inline-block;
border: 2px solid red;
}
div#image-1 > div > img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div id="image-1">
<div>
<img src="https://pixabay.com/static/uploads/photo/2013/06/29/06/24/lotus-142028_960_720.jpg" alt="image-1" />
</div>
</div>
What I want is to force the image to be contained in the red div, preserving the aspect ratio so it could be auto-resized by window resizing.
I can do it without the red container like so:
div#image-1 {
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding:1%;
text-align:center;
background-color:rgba(0, 0, 0, 0.5);
}
div#image-1 > img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
<div id="image-1">
<img src="https://pixabay.com/static/uploads/photo/2013/06/29/06/24/lotus-142028_960_720.jpg" alt="image01" />
</div>
But I need to have the red container in order to add other stuff (like prev/next buttons, ...) and I need it to have the same height as the picture.
I don't want to set any width or height in pixel because I want it to be responsive and screen adaptive. I don't want to force upscalling by the browser so if the image is smaller than the window, I want the image to be displayed with it's default size, but if the image is larger, I want it to be contained in the red div.
The easiest way is to use image as a background image with background-position: contain;
div#image-1 {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
padding: 1%;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
div#image-1 > div {
background: transparent url() center / contain no-repeat;
min-width: 100%;
min-height: 100%;
display: inline-block;
border: 2px solid red;
}
<div id="image-1">
<div style="background-image: url(https://pixabay.com/static/uploads/photo/2013/06/29/06/24/lotus-142028_960_720.jpg);"></div>
</div>
I've think of this possibility but the problem is I want to add previous/next buttons on each side of the image with a fixed width and the height of the image for a result as in the code below (the main reason I need the red container is when the image is smaller than the window)
div#image-1 {
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding:1%;
display:flex;
align-items:center;
justify-content:center;
background-color:rgba(0, 0, 0, 0.5);
}
div#image-1 > img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
div#image-1 > a {
width:75px;
height:100%; /*of the red div*/
display:inline-block;
border:2px solid blue;
}
<div id="image-1">
<img src="https://pixabay.com/static/uploads/photo/2013/06/29/06/24/lotus-142028_960_720.jpg" alt="image01" />
</div>
Related
I am trying to replicate this style, which has a background image, on the other hand I have a div over it that has a right border-radius, I can't do it, I provided the following options adapting them, but I couldn't
enter image description here
Transparent hollow or cut out circle
div{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:175px; top:25px;
border-radius:100%;
width:150px; height:150px;
box-shadow: 0px 0px 0px 2000px #E3DFD2;
}
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg';
Background with radius-top inside
div {
background:lightgreen;
width:100%;
height:200px;
position:relative;
text-align:center;
padding:100px 0 0 0;
box-sizing:border-box;
}
div:before {
content:'';
position:absolute;
background:white;
width:100%;
height:100px;
top:0;
left:0;
border-radius:40%;
transform:translatey(-50%);
}
The cut out example with the circle suits fine, You just need to play around with the values in the DevTools/Inspector.
Adjust heights/widths of the :before to stretch the curve to your liking or even mess with % of border radius, then the border width for how much space around it, the top and left to position it to the edges, then use the parent container to trim off right and bottom areas.
.banner {
background: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
background-size: cover;
}
.shape {
position: relative;
width: 170px;
height: 440px;
overflow: hidden;
}
.shape:after {
content: '';
position: absolute;
left: -100px;
top: -200px;
border-radius: 100%;
width: 151px;
height: 440px;
border: 200px solid #ffffff;
}
<div class="banner">
<div class="shape">
</div>
</div>
you can do this by clip-path property ..
Note : minimum width required otherwise shape will not display
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
display: flex;
}
.left{
width: 10%;
}
.image {
width: 90%;
height: 400px;
overflow: hidden;
background: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
background-size: cover;
clip-path: circle(100% at 100% 50%);
}
<div class="container">
<div class="left">
</div>
<div class="image">
</div>
</div>
I'm trying to make my orange div to get all of the white space in height. Im using 1920x1080 monitor. When i open bottom code in my page i have white space under red, blue and green div's. I wanna orange div to move my red, blue, green div's down and fill that white space under them.
The idea is site automatically to fill browser window without scrollbars.
I try to write 100% instead of 700px, but when my attribute is 100%, orange div disappear.
Can someone tell me why that is happening, where is my mistake, how can i prevent it.
Also is it there another way to give equal space to my red, blue and green div's? I calculate that 100% of page divided by 3 is 33.3333 in period. That's why i set my width to be 33.33% but it didn't fill page completely.
.wrapper{
position: relative;
}
.pink{
background-color: pink;
height: 100px; width: 100%;
position: relative;
}
.orange{
background-color: orange;
height: 700px; width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
}
.red{
background-color: red;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
.blue{
background-color: blue;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
.green{
background-color: green;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
<div class="wrapper">
<div class="pink"></div>
<div class="orange"></div>
<div class="red"></div><div class="blue"></div><div class="green"></div>
</div>
Give height:100% to parent div, body and html
body, html{
height:100%;
}
.wrapper{
position: relative;
height:100%;
}
.orange{
background-color: orange;
height: 100%; width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
}
Please check this fiddle.
Is this what you mean?
I've made use of
display: table
display: table-row
display: table-cell
The orange div will now fill the remaining height of the window.
Fiddle
EDIT: I updated the fiddle. tidied the code a bit.
Include this in your style:
body{
margin:0;
padding:0;
}
Wrap orange and pink inside a separate div from last three and use display:flex; on that div.
You can make three div eualwidth by using display:flex to the parent div and flex:1 to the children divs. You don't necessarily have to use width:33.33%;
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.wrapper{
position: relative;
margin:0;
padding:0;
display:flex;
min-height:100vh;
flex-direction:column;
}
.pink{
background-color: pink;
height: 50px;
width: 100%;
position: relative;
flex-shrink:0;
}
.orange{
background-color: orange;
height:100%;
width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
flex-shrink:0;
flex-grow:1;
}
.wrapper2{
position: relative;
margin:0;
padding:0;
flex-shrink:0;
width:100%;
height:100px;
display:flex;
flex-direction:row;
justify-content: space-between;
}
.red{
background-color: red;
height:100%;
position: relative;
float: left;
flex: 1;
}
.blue{
background-color: blue;
height:100%;
flex: 1; position: relative;
float: left;
}
.green{
background-color: green;
height:100%;
flex: 1; position: relative;
float: left;
}
<div class="wrapper">
<div class="pink"></div>
<div class="orange"></div>
<div class="wrapper2">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
</div>
I'm trying to center a div inside a parent div based on the dimensions of the parent div. I have tried using:
display: inline-block;
because I have seen other questions where this was used to center the div but I am not having luck.
BOX1 should be centered insdie of test
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
display: inline-block;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
http://jsfiddle.net/bahanson/xvL2qvx0/5/
try this :demo
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
margin:0 auto;
width: 500px;
height: 300px;
background: lightgrey;
position:relative;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div id="test" class="tab-pane">
<div id="BOX1">
<div id="Box2">
<h1> Graph Text </h1>
</div>
</div>
</div>
Adding this to the box 1 css does what you want and will keep the child centered if the parent width changes.
left: 50%;
margin-left: -250px;
http://jsfiddle.net/xvL2qvx0/6/
If you don't need IE8 support you can just use:
left: calc(50% - 250px);
You should read up on normal flow and CSS positioning.
http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm
But basically, a div will always position relative to the parent div.
If you add margin: 0 auto; to a div, it should horizontally position it within the parent div
#BOX1 {
display: inline-block;
margin-left:100px;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
use margin-left command to adjust it to the centre....
Seen as though you are using absolute positioning you can simply give it a top,right,left and bottom of 0 and use margin:auto to centre it both horizontally and vertically.
This benefits from be able to use relative (percentage) sizing if you want and there's no maths involved. Furthermore, if you later change the dimensions (maybe via a media-query for mobile devices) you don't need to recalculate messy margins or offsets - just change the size and it will be centred.
#BOX1 {
display: block;
width: 500px; /* it will still work if you change the size */
height: 300px; /* the dimensions could be percentages if you like */
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
http://jsfiddle.net/xvL2qvx0/7/
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
I am trying to get an image horizontally and vertically centered within a div of variable height and width.
So far, so good.(See jsfiddle links below)
Now the catch is the image should also be responsive and adjust if either the height and/or width of the container is smaller than the images height or width.
After researching, going through all the different "solutions" out there and fiddling for a solution, I was unable to find the perfect one, however two came close:
1.) This first one does everything I need except when the window width is smaller than the image width, the image is no longer horizontally aligned:
http://jsfiddle.net/me2loveit2/ejbLp/8/
HTML
<div class="overlay">
<div class="helper"></div>
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
CSS
.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
2.) This second example keeps everything aligned, but the image does not scale down when the height is less than the image height:
http://jsfiddle.net/me2loveit2/ejbLp/9/
HTML
<div id="outer">
<div id="container">
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>
CSS
#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}
I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
http://jsfiddle.net/pYzBf/1/
Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.
How to center (vertically,horizontally) properly over an image in a ?
<div class="category-info">
<div class="image">
<h1>Title</h1>
<img src="image.jpg" />
</div>
</div>
CSS
.category-info {
text-align: center;
height: 200px;
width: 770px;
overflow: auto;
margin-bottom: 20px;
}
The image is 770px width and 200px height. I don't what to do next with . I tried several things, without success.
Here you go: http://jsfiddle.net/QjLuP/4/
The CSS:
.image{
position: relative;
background: green; /* IE */
}
.image h1{
z-index: 2;
position: absolute;
top: 50%;
left: 0;
right: 0;
font-size: 20px;
width: 100%;
height: 26px;
padding: 0;
margin: 0;
margin-top: -13px; /* 1/2 height */
text-align: center;
background: red;
background: rgba(170, 0, 0, 0.8); /* CSS3 */
}
.image img{
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background:green
}
I threw a position relative on the .image class and set the width and height on the image element (that way it doesn't resize when it loads). I changed the table back to the h1 and added your line-height of 200px. That is the only downside, you'll still have to manually set the line-height of the h1.
HTML:
<div class="category-info">
<div class="image">
<h1>Title</h1>
<img src="http://placekitten.com/770/200" />
</div>
</div>
CSS:
.category-info {
text-align: center;
margin-bottom: 20px;
}
.image{
position:relative;
}
.image img{
width:770px;
height:200px;
}
.image h1{
position:absolute;
width:100%;
color:white;
line-height:200px;
margin:0;
}
JSFiddle: http://jsfiddle.net/5wGwL/2/
Have you tried this?
h1 { text-align:center; }
html
<h1 style="background-image:url(your php source.img)">Title</h1>
css :
h1 {
height: 200px;
width: 770px;
margin-bottom: 20px;
text-align:center;
vertical-align:middle;
line-height:200px;
background:transparent no-repeat scroll 50% 50%;
}
and nothing else