I have some divs which contain an image that fills the whole div:
<div class="callout">
<img src="images/callout_image.gif" alt=""/>
</div>
.callout { float: left; width: 267px; height: 114px; }
Now I want to put another image in this DIV which overlaps part of the original image AND will also "pop out" of the DIV, i.e. it will extend beyond the dimensions of the DIV but the DIV itself does not extend.
I am having trouble doing this, can anyone help?
Something like this:
<div class="callout">
<img src="images/callout_image.gif" alt=""/>
<img src="images/callout_image.gif" alt="" class="pop" />
</div>
.callout { float: left; width: 267px; height: 114px; position: relative;}
.pop {position: absolute; top: 50%; left: 50%; z-index: 1;}
You might need to set overflow: visible on the div depending on the circumstances.
Related
I want to have a nice looking box AND a nice looking logo in that box (logos are for example purpose only).
BUT I don't know how to do that.
I have my image tag look like this
<img class="col-sm-12 pull-right" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
If I include the width="200" height="200" in the <img> tag, my view will look like this.
I got a nice looking box, but ugly logo(stretch).
Else if I include the width="200" only in the <img> tag, my view will look like this.
I got a nice looking logo, but ugly box(doesn't line up).
Either way, I chose will screw up my view. :(
You could put your image in a 200x200 div and center your image (but not stretch it) inside it like this:
.imgbox{
border:solid 4px grey;
border-radius:5px;
width:200px;
height:200px;
display: table-cell; vertical-align: middle
}
<div class="imgbox">
<img src="http://img3.wikia.nocookie.net/__cb20100520131746/logopedia/images/5/5c/Google_logo.png">
</div>
Using the background-size property is the simplest way.
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
* { margin:0; padding:0 }
figure.logo {
width: 200px;
height: 200px;
background-image: url('http://i.imgur.com/F0RRqFy.jpg');
background-size: cover;
}
<figure class="logo"></figure>
Editable Demo: http://jsbin.com/gituzu/2/edit?html,css,output
you can center the images horizontal and vertical to the parent width and height by using position: absolute;:
HTML:
<div class="img_wrap">
<img src="https://pbs.twimg.com/profile_images/453545705622106112/6ERHbJBN.jpeg" />
</div>
<div class="img_wrap">
<img src="http://wottageek.com/wp-content/uploads/2014/10/Dropbox-Logo.png" />
</div>
<div class="img_wrap">
<img src="https://longren.io/wp-content/uploads/2014/04/do.png" />
</div>
CSS:
.img_wrap
{
width: 200px;
height: 200px;
position: relative;
float: left;
margin-right: 10px;
border: 5px solid #ccc;
}
.img_wrap img
{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
example: http://jsfiddle.net/82bhzxfe/
I would like to know how i could use css to have a line go through the center of a logo image. See link below:
Example
Thanks
Julian
Here's one approach using absolute positioning
<div>
<div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0"></div>
<img style="position:absolute;top:0;left: 45px" src="http://placehold.it/100x150" />
<div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0;left:160px"></div>
</div>
example
This should work
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
<img src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" width="40px" height="47px"></img>
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
I set the relative position of each div to -20px because 20 is half of the height of the logo image. So if your logo image SRC is 80 pixels tall than set both divs to top:-40px;
Working Example: http://jsfiddle.net/Edd6j/2/
Here's one approach, it uses an absolutely positioned span as the strike through, and a div with the span and image in it to position the strike through, here's a working example
and here's the code.
<div class="logo-container">
<span class="logo-line"></span>
<img class="logo" src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" alt="apple logo"></img>
<span class="logo-line"></span>
</div>
css:
.logo-container {
position: relative;
height: 87px;
width: 35%;
margin: 0 auto;
min-width: 144px;
}
.logo {
position: relative;
width: 72px;
height: 87px;
z-index: 2;
}
.logo-line {
position: relative;
display: inline-block;
top: -50%;
width: 20%;
height: 2px;
background: #333;
}
I have a figure with a percentage-based with. Within that box, I have an image with a transparent background. I need to center it horizontally, and pin it to the bottom of the container, while allowing the top to break out of the container (see image).
I can use absolute positioning to pin it to the bottom and break out of the top, but I can't get it centered. Is there a way to do it when I won't know the width of the image and the width of the container is flexible? Is display:table a possibility?
My Code:
<figure class="feature">
<a href="#">
<img src="image" />
<p class="title-bar">Caption</p>
</a>
</figure>
.figure { position: relative; width: 50%; }
.figure img { position: absolute; bottom: 0; }
Please, check this fiddle, there is 2 variants to center an image
http://jsfiddle.net/GSKFD/
Markup is the same
<figure>
<a href="">
<img src="http://placekitten.com/200/300" alt="" />
</a>
</figure>
General style for both methods
img{
vertical-align: bottom;
}
First variant
figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
position: absolute;
bottom: 0;
left: 50%;
}
figure img{
position: relative;
left: -50%;
}
And the second one
figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
}
You can do this with pure CSS, but you need two additional divs to hold and position the elements.
Here's the CSS:
.featureHolder {
position: relative;
/* height can be anything */
height: 200px;
}
.feature {
margin: 0;
overflow: visible;
/* width can be anything */
width: 60%;
height: 100px;
background: #cccccc;
position: absolute;
bottom: 0;
}
.imageHolder {
text-align: center;
width: 100%;
position: absolute;
bottom: 0;
}
img {
margin-bottom: -5px;
}
Here's the HTML:
<div class="featureHolder">
<figure class="feature">
<div class="imageHolder">
<a href="#">
<img src="img" />
</a>
</div>
Caption
</figure>
</div>
Caption also can be positioned within the same a tag as the image, but in this example it's separated out so I didn't have to mess with it.
Here's a demo in JSFiddle - give .feature any width and img should still center. (BTW your CSS isn't right - it should be either 'figure' or '.feature', but can't be '.figure' as figure is an element with class name 'feature'.)
Basically you need to do a left: 50% then margin-left: -whatever the width of the image is. This will position it center in your relative div. My example assumes you do not know the width of the image.
http://jsfiddle.net/rVRT4/2/
http://jsfiddle.net/rVRT4/2/embedded/result/
$(document).ready(function(){
var width = $(".figure img").width();
$(".figure img").css("margin-left", -(width/2));
});
.figure { position: relative; width: 50%; height: 500px;}
.figure img { position: absolute; bottom: 0; left:50%;}
<div class="figure">
<a href="#">
<img src="http://i.stack.imgur.com/4TtEY.jpg" />
<p class="title-bar">Caption</p>
</a>
</div>
I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div.
What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other.
My idea was to give each div the same top position, an increasing z-index and an increasing left position (according to the time of the event). Later I would pop individual divs out by mouse-over events to visualise the overlap.
What I do is to make it so each div gets placed under the next one. With fiddling of the top attribute I can get them to align horizontally, but I don't see the pattern.
<div class="day">
<div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
<div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
<div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
</div>
If I use absolute positions, the elements fly out of the surrounding div and are positioned absolutely at some place in the page.
It's simple. Make an inner div using absolute positioning but wrapped with a div that uses relative positioning:
<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
<div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
<div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>
You can use another method like negative margin, but it's not recommended if you want to dynamically change HTML. For example, if you want to move the position of the inner div(s), just set the top/left/right/bottom CSS properties of the container or modify the properties using JavaScript (jQuery or otherwise).
It will keep your code clean and readable.
Use Negative Margins!
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>
Fiddle: http://jsfiddle.net/vZv5k/
Another Solution:
Give the .day class a width, height, and position it relatively, keeping the inner divs absolutely positioned.
Check out the below CSS:
.day {position: relative; width: 500px; height: 500px;}
And the HTML:
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>
I found the solution. It's probably blindingly obvious to anyone who knows css.
I thought I could not use absolute positioning because my elements would fly out of the surrounding div.
Turns out, I misunderstood absolute positioning. It's not the same as fixed, but to me it looked like that.
https://developer.mozilla.org/en-US/docs/CSS/position explains it well.
Absolute positioning positions absolutely to the next surrounding anchor. That defaults to the whole page, if no other anchor is defined.
To make something a anchor it needs to be position: relative;
Quick solution
add position: relative; to the day class and using absolute positioning in the inner div.
With the top attribute, you can also move relatively positioned objects. In my code sample the red box overlaps the green box due to it's z-index. If you remove the z-index, then the green box is on top.
HTML:
<div class="wrapper">
<div class="box one"></div>
<div class="box two"></div>
</div>
CSS:
.wrapper {
width: 50px;
height: 50px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
position: relative;
}
.box.one {
background-color: red;
z-index: 2;
top: 0px;
}
.box.two {
background-color: green;
z-index: 1;
top: -50px;
}
I have a 800 x 600 rotatable image with forward and back buttons repositioned to the sides. The height of the div is suppose to be 600px, but the actual height of the div was pushed to 690, including the height of the button image. And the div was blocking a row of clickable menu on top. So I made the div height to 518px and moved top -75px to get the real dimension I want. But I feel dirty doing this... Is there a correct way to do this? Or is this workaround more or less correct? Below is the code. Thanks!
<div class="Content Wide" id="LayoutColumn1">
<div style=" width: 980px; height: 518px; display: block; position: relative; float: left;">
<img src="/template/img/next_button.png" style="position: relative; top: 200px; left: 5px; z-index: 2;">
<img src="/template/img/chef_special_large.png" id="main" style="margin: 0 0 0 50px; position: relative; float: left; top: -75px; z-index: 1;">
<img src="/template/img/next_button.png" style="position: relative; top: 200px; left: 787px; z-index: 2;">
</div>
</div>
If you do not want your next/previous buttons to affect the flow of other content, you should use position:absolute inside a container with position:relative.