I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
Related
I have 2 images that have different dimensions. I want them to align horizontally and to fill the same height.
HTML
<div class="background">
<div class="wrapper">
<div class="content">
<img src="./nat-8.jpg" alt="" />
<img src="./nat-9.jpg" alt="" />
</div>
</div>
</div>
CSS
.background {
height: 100vh;
width: 100%;
background-color: grey;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
background-color: white;
}
img {
display: inline-block;
width: 35%;
}
The result I get:
As you can see the first picture has white space left on the top. How do I make it that each picture covers the whole height of parent without setting fixed height on parent?
NOTE: I know that it can be done with flex by setting 'display:flex' on content div. But how do I do it without flexbox?
I tried 'display:table-cell' on images, in one solution I found it was used to make divs fill the entire eight of their parent, but apparently it does not work on 'img' element.
You need to set the height of the parent container, then you can set the height of the image to 100% to fill the space.
You can then use object-fit:cover to keep the image ratio rather than stretching. You can also use object-position:center to keep the positioning centered also.
Not all browsers are compatible with object-fit, so I would suggest swapping out the images for divs with a background-image set.
.background {
height: 100vh;
width: 100%;
background-color: grey;
position: relative;
}
.wrapper{
height:100%;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
background-color: white;
height:100%;
max-height:150px;
}
img {
display: inline-block;
width: 35%;
height:100%;
object-fit:cover;
object-position:center;
}
<div class="background">
<div class="wrapper">
<div class="content">
<img src="https://www.indiewire.com/wp-content/uploads/2019/06/574055-frank_ockenfels-amc.jpg" alt="" />
<img src="https://www.indiewire.com/wp-content/uploads/2019/06/574055-frank_ockenfels-amc.jpg" alt="" />
</div>
</div>
</div>
I currently have a modal which i want to use as overlay over webpage.
HTML:
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="imgCon">
<img class="overlayimg" src="img/trendoverlay.png" />
<img class="overlayimg" src="img/trendtimeline.png" style="display: block"/>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
body{
width:100%;
}
.imgCon{
position: absolute;
height: 100%;
width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
.overlayimg{
max-width:100%;
max-height: 100%;
height:auto;
}
However here's the problem. The first image(top one) when only image. It's perfect. It works fine.
The image that goes underneath has to stay inside the same DIV as the other image, be as wide as the upper image. But height is fixed. Is there a way to achieve this so they still scale with the padding of 51.5px left/right and 73px at bottom?
picture with more info:
Example
Fiddle:
https://jsfiddle.net/4n1quv9n/1/#&togetherjs=sT7KVDhPT8
As you can see the top image scales how I want it to scale. That it keeps it's aspect ratio but had a minimum left/right and bottom. The image underneath the one is suppose to have the same width as the top image. But the height has to be fixed at 110px. But the Div which contains the images must keep the padding at those 2 minimum at the sides and bottom.
This is going wrong:
https://imgur.com/a/ILPpO
Here the bottom image must also scale as wide as the top image. And actually they also need to stick together so it looks like 1 image instead of 2 seperate ones.
Give this a Try
CSS
body{
position: relative;
}
.wrapper{
position: relative;
}
div.image-container{
position: absolute;
margin:auto;
height: 100%;
max-width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
img{
max-width:100%;
}
HTML
<body>
<div class="wrapper">
<div class="image-container">
<img src="http://imgur.com/c7uASdV.png">
<img src="http://imgur.com/60d6BUt.png" style="height: 110px">
</div>
</div>
</body>
Link for reference
You could give a try to display:table properties to draw a cell at middle to hold and resize first image, and absolute positionning for second image :
#modal {
display: table;
height: 100vh;
width: 100vw;
padding-bottom: 73px;/* bottom limits */
box-sizing: border-box;
}
#modal:before,
#modal:after {
content: '';
padding-left: 51px;/* sides limits ... pixel cannot be cut in hlves */
display: table-cell;
}
.modchild {
display: table-cell;
position: relative;
margin-bottom: 100px;/* room for img 2 */
width: 1%; /* will expand to fit image width and will stand at middle */
}
img[src*="x212"] {
height: 100vh;/* size it */
max-height: calc(100vh - 100px - 73px);/* downsize to use */
display: block;/* or reset vertical-align*/
}
img[src*="x100"] {/* size and stretch it */
margin: 0;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100px;
bottom: 0;
}
* {margin:0;}
<div id=modal>
<div class=modchild>
<img src="http://dummyimage.com/400x212&text=keep_ration" />
<img src="http://dummyimage.com/400x100/ff0&text=distort" />
</div>
</div>
fiddle example : https://jsfiddle.net/4n1quv9n/4/
This is the code: https://jsfiddle.net/twy161er/6/
HTML:
<div id="top">
Logo. Menu
</div>
<div id="content">
Text Text Text
</div>
<div id="bottom">
Text in the bottom
</div>
CSS:
#top {
width: 100%;
height: 100px;
background-color: red;
}
#bottom {
width: 100%;
height: 100px;
background-color: blue;
margin: 0;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
}
#content {
}
I want the "content" div to be in the center and in the middle of the page.
How should I do it?
Create a parent div .main for the three DIV and add a wrap DIV tag for content text and use display table table-row table-cell.
html, body {
height: 100%;
margin: 0;
}
.main {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 0; /* make it dynamic */
background-color: red;
display: table-row;
}
.bottom {
height: 0; /* make it dynamic */
background-color: lime;
display: table-row;
}
.content {
display: table-row;
vertical-align: middle;
background: yellow;
}
.content div {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="main">
<div class="top">
Logo. Menu<br />
Dynamic content
</div>
<div class="content">
<div>Text Text Text</div>
</div>
<div class="bottom">
Text in the bottom<br />
Dynamic content
</div>
</div>
Jsfiddle demo : https://jsfiddle.net/twy161er/15/
Why use display:table? Because the content text always show even if the window height less than 200px; and you get IE8/9 support.
That is pretty simple!
You can make the contents of the #content like this:
<div id="content">
<div>Text Text Text</div>
</div>
Then, all you need to do is add this CSS:
#content {}
#content div {
position: absolute;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Explanation
You firstly absolute your text. Then, you reset the margin and padding of the element <div>. What you do then is, push the inner <div> down by 50% of the page height and push left by 50% of the page width. Then, you have to move it towards the left, 50% of its width, and move it towards the top, 50% of it's height. That way, you can get the exact center of the <div>.
Working example: JSFiddle.
CSS rule "margin: auto" to the #content div should put it on the middle horizontally.
In order to put it in the middle of the screen, try:
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
taken from here How to position a div in the middle of the screen when the page is bigger than the screen
Notice that your top and bottom divs are in absolute position, so no way to tell the #content div to position itself relatively to them.
Your content is missing reference to id "#".
And i hope this is solution to your problem.
#content {
display: table;
margin: 0 auto;
}
I can't make my .content-panel and #panel-design float on the right of the .content because of the header design img #searchbar-container.
I already tried using z-index with different values.
I want to place .content-panel and #panel-design on the right side of the .content while having #searchbar-container above the divs
<body>
<div class="header">
<img id="searchbar-container" src="images/searchbar1.png">
</div>
<div class="content">
<div class="sidebar"></div>
<div class="content-panel">
<div id="panel-design"></div>
<!--main content here-->
</div>
</div>
</body>
the css:
.content {
position: relative;
max-width: #width;
height: 768px;;
margin: 0 auto;
padding: 0;
}
.content-panel {
position: absolute;
float: right;
margin: 0;
padding: 0;
width: 753px;
height: 100%;
background-color: blue;
z-index: -2;
}
#panel-design{
float: right;
width: 685px;
height: 375px;
background-color: red;
z-index: -1;
}
.sidebar{
width: 285px;
height: 100%;
margin: 0;
padding: 0;
}
Can't post the whole thing. But this is what I need to achieve, basically the gray image above is the #searchbar-container and the picture of Depp is the #panel-design in front of the .content-panel.
So far this is what my page looks like:
the blue div is the .content-panel
the red div is the #panel-design
the gray img above is the #searchbar-container
.content doesn't have a background color but its size is pass the curve of #searchbar-container
So what I understand from you question is that, you want #searchbar-container to overlap your #panel-design.
one way of doing it would be to make .header div fixed, but you might not want that because then it becomes independent of the scroll.
Another way I came up with uses absolute position you can see the fiddle here
I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}