I have two divs whitch the div child is inside of the div parent. The div child is bigger that his parent. So I decide to put a scroll in the div parent for i can see better the content of the div child.
The problem is that now I need to use the property clip in the parent div, but the clip also affects the scroll.
What I would like to ask if there is any way that I could clip the parent div and the scroll size ajdustes automaclty to the scroll.
Follows my code:
.outter{
width:100px;
height:100px;
background-color:blue;
overflow: scroll;
position: absolute;
clip: rect(23.75px 120px 120px 23.75px);
}
.inner{
width:200px;
height:200px;
background-color:red;
}
<div class="outter">
<div class="inner"></div>
</div>
[EDIT]:
Follows thee result that i pretend.
If you campare the image above and the result of the snippet that I put above is that in the result the scrolls apears cut and the image is not
That is what the clip property is supposed to do, restrict the visible area of an element. If you are trying to clip the contents of the inner element, you can absolutely position it to do so.
Hope this helps!
.outter {
position: relative;
width:160px;
height:160px;
background-color:red;
overflow: scroll;
}
.inner{
position: absolute;
left: -40px;
top: -40px;
background:url('http://placekitten.com/g/400/400');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width:400px;
height:400px;
}
<div class="outter">
<div class="inner">
</div>
</div>
Related
I tried a responsive css layout,but "top:50%" can't work and the "left:50%" can.
Why it happened?
<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">
</div>
</div>
Define a dimension for the parent container, e.g. div:
<div style="border: 2px solid red;position:relative;top:0%;left:0%;height:200px;width:300px">
<div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
</div>
</div>
Or
Another way is to just stretch the parent container, i.e. div, by its top, bottom, left, and right properties. Like this:
<div style="border: 2px solid red;position: absolute;top: 0px;bottom: 0px;left:0px;right:0px;">
<div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
</div>
</div>
Consider your original HTML:
html, body {
height: 100%;
}
<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">test</div>
</div>
The inner/child div has position: absolute, so it is out of the content flow of the parent element and will not contribute to the height or width of the parent element.
The parent div is in the content flow, but has no content, so its intrinsic
height would be zero. However, you specified height: 100%, but this will not do anything because the div has no height reference on which to base a computed value. So the computed height value for the parent div is zero.
As a result, the child element's top offset computes to 50% of zero,
so it is positioned at the top edge of the parent block.
You would need either to specify a height for the parent div or assign
html, body {height: 100%}
as this would allow the div to compute its height based on the height of the
body, which is based on the height of the html, which being 100%, takes that of the screen.
See the link below. I believe you're going to have a better result with Fixed for what it is you're trying to do, although I'm still not 100% sure I understand what that is.
http://jsfiddle.net/8q107wvb/1/
body {background:#e9e9e9; color:#202020;}
#wrapper {width:500px; background:#fff; margin:50% auto;}
.centered-content {position: fixed; top: 50%; left: 50%; background:#fff; padding:20px;}
This is another to solve this issue
* {
height: 100%;
}
.first{
position:relative;
top:0%;
left:0%;height:100%;
width:100%"
}
div{
position:absolute;
top:50%;
left:50%;
}
<div class="first">
<div style=>Check this</div>
</div>
Say I have an image that has width
width: 100vw;
Is it possible to position a title say 50% of the way down from this image? I can't think of how to do it as the height will be changing based on the vw, so can this be done with CSS only, or do I need Javascript? Either way, how would I do this?
Thanks
Edit: I have tried the various suggestions below but it seems that whenever I try to use solely CSS with position:relative it messes up the rest of my code. Is there a javascript function, therefore, that can calculate the height of the image as a % of the page height, and then can I position my title at say 75% of the height of the image?
I'm not entirely sure if I've understood you correctly or not, but if you want to vertically centre a piece of text over the top of a responsive image, you could do this:
div {
position: relative;
}
img {
width: 100vw;
height: auto;
}
p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div>
<img src="https://unsplash.it/200/100/?random">
<p>SOME TEXT</p>
</div>
https://jsfiddle.net/fjh6msqL/
Sure, add a parent around the image and set it to inline-block so that it will match the width of the image, add position: relative so that you can absolutely position your title text in relation to the parent, and then either add an element with your title text or use a pseudo element from the parent (that's what I did in this example) and absolutely position that 50% from the top, and use translateY(-50%) to move the image back up 50% of it's own height so it's in the middle of the image vertically. Here is a good article on how to center stuff using CSS https://www.w3.org/Style/Examples/007/center.en.html
div {
display: inline-block;
position: relative;
}
div:after {
content: 'here is your title';
color: white;
background: black;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
img {
width: 100vw;
}
<div class="parent">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
You can't really do that with an image without using some Javascript. The best solution I think would be to use a div element and set it's background-image property to the image you want to display, and then position your title vertically inside the div. Something like this:
<div style="background: url('url-to-image') no-repeat; background-size: cover; background-position: center center;">
<h2 class="title"></h2>
</div>
Vertical positioning can be tricky, but there are ways, for example:
CSS Vertical align middle
With CSS margin:auto , max-height:0 with absolute position actually does the magic. this will center your title text perfectly regardless of screen size. Instead of giving title a width and height we can set top, left, right, bottom property to 0 which actually scale the element to its relative parent's size. Hope this helps.
body{
margin:0;
padding:0;
}
.img-placeholder{
position:relative;
}
.img-placeholder img{
width:100vw;
height:auto;
}
.img-placeholder h2{
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
max-height:0px;
text-align:center;
}
<div class="img-placeholder">
<img src="http://lorempixel.com/output/sports-q-c-640-480-2.jpg">
<h2>Image Title</h2>
</div>
How can I center a div that is holding other elements. As default it seems that the div has the width of its parent tag, in this case body. What I want to do is center the div, do I need to set the width of it myself pixel by pixel? or is there an easier way of doing this.
Image of what Im talking about
In the picture you can see Ive set the width of div #container to 250px to center it with margin: 0 auto; but now its bigger than table which means the children of #container isn't in the exact center.
DEMO 1
<div id="container">
</div>
#container{
display:table;
margin:0 auto;
}
DEMO 2
<div id="container">
<span id="form">
</span>
</div>
#container{
text-align:center;
}
#form{
display:inline-block;
text-align:left;
}
How bout setting top and left 50%, fixing the position and margins=size of your div?
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -your size;
margin-left: -your size;
}
You could try percentages rather than px
<style>
#container{
width:30%;
/* width:250px; will still be ok */
}
#container table{
width:100%;
/* This will make the table stretch or squash to fill the container */
/* You could also try */
margin: 0 auto;
/* This will center the table inside the div*/
}
<style>
Set the parent div to text-align: center; and the div containing the content to display: inline-block;
In your case:
body {
text-align: center;
}
#container {
display: inline-block;
}
AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/
To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?
If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO
try ..
$backWidth=$(window).width();
$backHeight=$(window).height();
As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>
I browsed the same question in SO, and none of them worked well [Cross Browser compatible] .
So, i'm looking for the same job to solve with jQuery.
I want to place the div at the bottom of the HTML page, not to the bottom of the screen.
I've tried with CSS only so far
clear: both;
min-height: 6%;
position: fixed;
bottom: 0;
Edit
My CSS
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#footer {
width: 100%;
height: 6%;
position: absolute;
bottom:0px;
left:0px;
}
#content {
float: left;
width: 59.5%;
height: 83%;
position:relative;
}
#news {
z-index:2;
}
<html>
<div id="content">
<div id="news"> </div>
</div>
<div id="footer"></div>
<html>
I believe you want sticky footer after all.
jsfiddle demo
It uses this sticky footer.
Basic idea is to use that sticky footer or basically any Sticky footer and then color your #wrap, because it will cover the whole viewport vertically
Set height of body and html to 100%, then create a wrapper for the entire body that has position: relative and height:100%, when you have the element inside this wrapper it will align to the bottom.
<html
<body>
<div id="body-wrapper">
<div id="bottom"></div>
</div>
</body>
</html>
With CSS:
body, html {
height:100%;
}
#body-wrapper {
height:100%;
position:relative;
}
#bottom {
position:absolute;
bottom:0px;
left:0px;
}
Here is what happens without a wrapper: http://jsfiddle.net/Cj4c2/1/
And here it is with a wrapper: http://jsfiddle.net/CPSt6/
You should use position: absolute; bottom: 0px; That way div should be always on bottom of wrapping element. Wrapping element should have position: relative;
Please refer to the css document:
An element with fixed position is positioned relative to the browser window.
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is
src: http://www.w3schools.com/css/css_positioning.asp
so you should use position:absolute.