I am having a problem with displaying a div. For some reason it is not displaying the inner div.
The position of parent div is relative where as the child div is absolute.
Here is the demo http://jsfiddle.net/squidraj/6R3Hr/6/
HTML Code :
<div class="page-center">
<div class="question_slide inidfeedback">Test</div>
</div>
CSS Code :
.question_slide {
background: #000000;
height: 569px;
width:100%
}
.question_slide {
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.page-center {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
Just interchange their positions.
.question_slide {
overflow: hidden;
position: relative;
top: 0;
width: 100%;
}
.page-center {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
position: absolute;
text-align: center;
width: 100%;
}
Here is a demo:http://jsfiddle.net/6R3Hr/3/
Give it a height style. Since the only content is relatively positioned, it doesn't have any inherent height value and because the overflow is hidden, it's not onscreen.
http://jsfiddle.net/squidraj/6R3Hr/2/
.page-center {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
height:20px;
}
Edit:
If overflow:hidden is a must, then you must specify a height for your relative div:
.page-center {
margin: 0 auto;
max-width: 1100px;
position: relative;
text-align: center;
width: 100%;
overflow:hidden;
height:100px;
}
Just choose how much height will work for you.
Here's a working jsfiddle with your code.
Related
I have div of fixed size height:45px and width:60px and no other css to div. This div used to show the image uploaded by customer. I want to give the dimensions of image so that the uploaded image will be fit in given div perfectly. I need to give the optimized size so that image will look good in div. First logic I tried to give the image with 45 by 60, 90 by 120 like.
What is the correct way to solve this.Please guide.Thanks in advance.
div {
width: 160px;
height: 145px;
overflow: hidden;
border: 1px solid black;
}
div img {
width: 100%;
min-height: 100%;
}
<div>
<img src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1"/>
</div>
Best thing is the following:
#div-to-contain-image img {
display: block;
height: auto;
min-width: 100%;
width: 100%;
}
This will render the image the best as possible. If you need to cover the containing div entirely, you could do the following:
#div-to-contain-image img {
display: block;
height: 100%;
width: 100%;
}
I have multiple solution for you image thumbnail setting. Maybe it will be helpful for you.
Solution #1:
Image vertical and horizontally center inside div
.thumb-container {
position: relative;
width: 60px;
padding-bottom:45px; /* padding is using for the height of image */
margin: 0px;
overflow: hidden;
border: 1px solid black;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: auto;
max-width: 100%;
}
HTML
<div class="thumb-container">
<div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=80&h=50"></div>
</div>
View on Jsfiddle https://jsfiddle.net/5az8u7bj/
Solution #2: Image vertical and horizontally center width:100% inside div fully cover image box no white space
.thumb-container {
position: relative;
padding-bottom:45px;
margin: 0px;
overflow: hidden;
border: 1px solid black;
width:60px;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
right: -100%;
height:100%;
margin: auto;
width: auto;
}
HTML
<div class="thumb-container">
<div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=500&h=200"></div>
</div>
View on JSfiddle https://jsfiddle.net/2d6x3fn6/1/
Maybe these solution will be helpful for you
I'm not sure as to why when I drag my browser around my text and video overlap. I want to prevent this:
Here is a jsfiddle example:
https://jsfiddle.net/liondancer/m3xug7vo/
example:
Here is the CSS regarding the particular page:
.wrapper {
width: 950px;
margin: auto; /* Centering blocks */
/*position: relative;
display: block;*/
}
.index {
}
.video-container {
position: relative;
min-width: 100%;
min-height: 100%;
/*width: auto;
height: auto;*/
z-index: -100;
background: no-repeat;
/*background-size: cover;*/
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.title-area {
height: 100%;
width: 100%;
vertical-align: middle;
.container {
width: 100%;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
position: relative;
}
}
.index-aboutus {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
display: block;
}
.index-ourwork {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
}
.index-instructors {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
}
The HTML:
The video container is using a height of 100vh, there is one thing you have to think of:
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist.
See http://www.w3.org/TR/css3-values/#viewport-relative-lengths
An easy way to fix this would be to add a class to the parent div of video-container and add a property to set it to overflow: hidden;
It would look like the following:
.video-containerParent {
overflow: hidden;
}
Please see the following jsFiddle for an example:
https://jsfiddle.net/m3xug7vo/1/
The following site has an interesting article about viewport units:
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.
I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:
The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have to use JavaScript?
Here is the code:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
And I prepared a fiddle.
You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
max-height: 200px;
}
.container {
position:relative;
padding-bottom:40%;
overflow: hidden;
}
img {
position:absolute;
top:-50%; bottom:-50%;
margin:auto;
width: 100%;
height: auto;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
Not so long ago there was only a javascript way to do this but now we have some css rules: object-fit and object-position
They work just like the background-size rules cover and contain:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
The problem with this approach is that is very new and doesn't work on ie or Edge yet.
Pen here: http://codepen.io/vandervals/pen/MwKKrm
EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
height: 200px;
overflow: hidden;
}
.imgWrapper {
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: auto;
width: 50%;
}
<div class="wrapper">
<div class="container">
<div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
</div>
</div>
http://jsfiddle.net/ghygpw8t/5/
inspired by: https://css-tricks.com/perfect-full-page-background-image/
Try like this: Demo
If image size is small it will be arranged in vertical middle and if its big, it will fit in box.
CSS:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
text-align: center;
line-height: 200px;
overflow: hidden;
background-color:#ccc;
vertical-align:middle;
height: 200px;
border:2px solid green;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
img {
width: 100%;
max-height: 196px;
border:2px solid red;
vertical-align: middle;
line-height: 196px;
}
Hope this is what you want!
On the element you want centered.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
on its parent.
.parent { transform-style: preserve-3d; }
Use a polyfill to render cross browser styles.
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
I have the following setup
Html:
<div id="resizable">
<div id="fixHeightTop">Whatever</div>
<div id="problematicDiv">Whatever</div>
<div id="semiProblematicDiv">Whatever</div>
<div id="fixHeightBottom">Whatever</div>
</div>
Css:
#resizable {
position: relative;
}
#fixHeightTop {
position: relative;
height: 10px;
}
#fixHeightBottom {
position: absolute;
height: 10px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
}
The #resizable div is resizable (jQuery). What I need to do is to give to problematicDiv and semiProblematicDiv a height equal to 100% - fixHeightTop height - fixHeightBottom height so I can extend it on the full height of the resizable element. The problem is that I can't figure out a way to do it. If I use height: 100% it overlaps the bottom element.
Any ideas how to do that?
If I understood you right, you want to have two div with a fixed height and the two other divs show take up the rest of the height. If this is what you want, here is a way to do it.
#resizable {
height: 80px; //this is changed by JQuery, right?
}
#fixHeightTop {
height: 20px;
}
#fixHeightBottom {
height: 20px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
i have an idea, try to use position:absolute;
#problematicDiv {
position: absolute;
top: 0px;
left: 0px;
width: 80%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
#semiProblematicDiv {
position: absolute;
top: 0px;
right: 0px;
width: 20%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
Good luck