I'm working on a simple CSS and HTML website, trying stuff out.
I wanted to make an image float over a div. Something like so:
<div id="big_container">
<img id="img1" src="images/fun.png"/>
<div id="some_container"></div>
</div>
Here is the CSS for it:
#big_container{ width: 960px; height: 270px; margin-left: auto; margin-right: auto; margin-top: 42px;}
#some_container{ width: 100%; height: 198px; border: 1px solid #cccccc;}
#img1{ width: 69px; height: 200px; float: left; position: relative; left: 200px;}
What this does, is instead of placing the img over the some_container div, it places it FIRST and after the image, underneath it, it places the some_container div.
How can i get the image to float over the div? Firefox and Chrome display it correctly. IE8 does not.
EDIT
I tried removing relative and left, according to Kyle Sevenoaks. But it still displays it above the div, and does not overlap.
You can use position: absolute; to make it display over the div you require:
#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/
EDIT
I forgot to mention that with this you should add position: relative; to the parent div.
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/1/
Floating an element will not place it over the top of other elements within the same parent. You've also tried to use a "left" CSS value on a relatively positioned element. "float" works on relatively positioned elements, "left" works on absolute and fixed positioned elements.
Here is your CSS to position "img1" over the top of "some_container" (includes short hand for margin declarations). Note "position:relative;" applied to the parent "big_container".
#big_container{ width: 960px; height: 270px; margin: 42px auto 0; position:relative;}
#some_container{ width: 100%; height: 198px; border: 1px solid #CCC;}
#img1{ width: 69px; height: 200px; position: absolute; left: 200px; top:0px; }
You will now see that IE8 wasn't at fault here. Other browsers may have been kind to you and ignored any conflicting CSS declarations to give you the desired result. IE8, being less sophisticated, probably wasn't compensating and taking your CSS literally.
Related
I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
What i'm trying to do here, is to crop an image to replace white spaces of my div:
<div id="profilepicture" style='background:url()'>
<img src="utilisateurs/pp/<?php echo $userinfo['photoP']; ?>">
</div>
And here the stylesheet related to this:
#profilepicture{
height: 200px;
width: 200px;
box-shadow: 1px 1px 2px;
display: flex;
}
#profilepicture img{
width: 100%;
height: auto;
margin: auto;
}
Here is what it gives me :
I just want to crop left and right of the photo and zoom at the center to not have white spaces anymore !
Edit:
If i do
width: auto;
height: 100%;
it gives me this :
Now i just want it to be centered!
Any ideas ?
Using Clip
Use the clip property.
img {
position: absolute;
clip: rect(0, 100px, 100px, 0);
}
One thing to note. clip only works on something position: absolute or position: fixed. I don't know why. This limits its usefulness, but can be dealt with without too much trouble.
The second thing to note is about rect(). Its syntax (like many others in CSS) is rect(top, right, bottom, left);. Now pay attention here because it can be tricky. Both the top and the bottom values define the offset from the top border and the left and right values define the offset from the left border.
So clip: rect(40px, 260px, 150px, 80px); does the following.
Using Background-Image
Probably the easiest option in terms of assembly.
<div id="profilepicture" style='background-image:url('utilisateurs/pp/<?php echo $userinfo['photoP']; ?>')'>
</div>
div {
background-position: center;
}
This, more or less, does what you want, though it does have the side effect of using inline styles.
I suggest a background with "cover" property by moving the image to the background.
html:
<div id="profilepicture" style='background-image:url(utilisateurs/pp/<?php echo $userinfo['photoP']; ?>)'>
</div>
css:
#profilepicture{
height: 200px;
width: 200px;
box-shadow: 1px 1px 2px;
display: flex;
background-size:cover;
background-position:center;
}
Here is one way of doing it.
Set overflow: hidden on the parent container that contains the image.
You can then use absolute positioning to placed the left edge of the image to the center, and then use translateX to shift it to the left by 50% to center the image.
The net effect if to hide/crop the left and right edges of the image by hiding them (hide the overflow) in the parent container.
#profilepicture {
height: 200px;
width: 200px;
box-shadow: 1px 1px 2px;
overflow: hidden;
position: relative;
}
#profilepicture img {
width: auto;
height: 100%;
margin: auto;
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
<div id="profilepicture">
<img src="http://placehold.it/400x300">
</div>
Center it, add a negative margin and hide the overflow:
#profilepicture{
height: 200px;
width: 200px;
box-shadow: 1px 1px 2px;
display: flex;
text-align:center;
overflow:hidden;
}
#profilepicture img{
width: auto;
height: 100%;
margin: 0 -50%;
}
<div id="profilepicture">
<img src="http://lorempixel.com/400/200/">
</div>
Here's what it looks like without the container:
<img src="http://lorempixel.com/400/200/">
OK, I hear you. I have just something very similar to this. There are a few ways to achieve this.
Use the not so well supported CSS property of object-fit - it does exactly what you want but you will need to use a poyfill if you want to support most browsers.
Set your image wrapper div to overflow:hidden as explained in this guide The guide is for circular images, so just omit the border-radius parts.
If you prefer to see an example I have done one for both options. First option is the one that is commented out and the second option is the active one: http://codepen.io/cactusa/pen/qZrobK
Reduce the height of the container (#profilepicture) because you have a square container with equal height and width but the img is a rectangle and doesn't have same height and width increasing the height of the img to 100% will cause distortion and look funny.
I am trying to add floating div tag which contains delete buttion. Its not working.
I am using struts1.X and tiles.
My web page build with 3 jsps: Menu.jsp, Body.jsp, Fotter.jsp. I am tring to add new floating delete buttion.
My CSS file, In my CSS I have added 2 floating styles.
div.floatingBtn {
width: 350px
position: fixed;
top: 90%;
left: 34%;
padding: 10px;
z-index: 100;
}
div.flating {
position: fixed;
border: 1px solid black;
paddding: 2px;
width: 400px;
height: 400px
z-index:100;
}
My body.jsp:
<div class="flating"><table align="center"><tr><td>
<button id="DELETE" class="btn" onclick="deleteDocs();" >Delete</button></td></tr></table>
</div>
I tried with both styles, but they don't work. Why?
The first CSS doesn't have any effect in your html, because your HTML doesn't contain anything in CSS-Class "floatingBtn".
Second, your CSS hasn't any float: rules. This is because you don't get any floating elements.
If you want fixed positioning - which is a very different thing as float! -, you had to set also its position (add a left: and top: to the div.flating rule as well).
I have a top div on my page, but above my navigation.
I want the company logo in the middle of this div. however, margin: 0 auto isn't working.
I've tried fiddling with the div positioning to be absolute and the image to be relevent, and vice versa.
I've tried the image to be center aligned, text aligned (silly enough), even left: 50%. left: 50% does actually work but because the width of the image is over 100px, then the logo isn't centered any more, even though the beginging of the image is at 50%.
I wanted to make it left 30% but that isn't fair on all screen sizes.
I just cant figure out how to make this image in the center of the div. Does anyone know how I can do this?
HTML
<div id="stripes">
<img src="JCC.gif" class="JClogo" />
</div>
<div id="navigation">
CSS
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
}
.JClogo
{
position: absolute;
margin: 0 auto;
height: 194px;
width: 389px;
}
if you positioned the element as absolute then margin 0 auto won't be work
Remove the position: absolute; and add display:block toJClogo css class.
.JClogo{
margin: 0 auto;
height: 194px;
width: 389px;
display:block;
}
JsFiddle Demo
I don't think margin:0 auto will work with absolute positioning. Either remove the position:absolute OR place left:50%; margin-left:-195px on .JClogo.
This should do what you're looking for:
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
text-align:center;
}
.JClogo
{
height: 194px;
width: 389px;
}
The issue is because of the code at:
position: absolute; // here
margin: 0 auto;
height: 194px;
width: 389px;
Position absolute makes it to float at the parameters provided.
So try out this, this will make the image float at the center of the element.
position: absolute;
top: 20%; // this
left: 20%; // and this
height: 194px;
width: 389px;
This way, you will change the parameters of the image and make it float where you want it to be. If you want to use position: absolute; otherwise, you can remove this and simply use margin: values.
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>