I have 4 images in a row. I want the third image to be overlayed on top of the second image but have not been able to successfully get it to work. Here is my fiddle:
http://jsfiddle.net/AndroidDev/Asu7V/4/
<div style="width:1000px">
<div class="x">
<img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
</div>
<div class="x">
<img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
</div>
<div class="x">
<img src="http://playgo.ro/wp-content/themes/play3.0/play.png" />
</div>
<div class="x">
<img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
</div>
</div>
Add the play image in second div and use position absolute and relative to make it one above the another.
.x{
border:1px solid #000000;
display:inline-block;
height:128px;
position:relative
}
.overlay_img{
position:absolute;
top:0;
left:0
}
DEMO
If you just want it to be over 2nd image then wrap those 2 images in 1 div and give it position:relative then give your Image2 and image 3 position:absolute and z-index:0 & z-index:1 respectively. And position them to top:0; & left:0; that should do it :)
If you can use modern CSS and only need the third image to overlay the second (as in, you don't need to repeat this pattern in a lot of places), you can use the nth-child selector:
.x:nth-child(3) {
margin-left: -136px;
}
This will select the third item with the x class and move it to the left.
if you use margin or position property,you can achieve the overlayed view,
Take a look at http://jsfiddle.net/manojmcet/Z7Y88/
Related
I have the following alignment:
<div class="main">
<div class="header"></div>
<div class="right-bar">
<div class="chat-user-content">
<span class="chat-user-photo">
<img src="http://d13yacurqjgara.cloudfront.net/users/25963/avatars/mini/2013-avatar_(1).png" />
</span>
<span class="chat-user-name">Fulano Silva</span>
<span class="chat-user-status"><img src="http://www.colorhexa.com/a7ba3d.png" /></span>
</div>
</div>
</div>
.chat-user-status > img{
border-radius: 50%;
height:15px;
width:15px;
}
But I can not align the <SPAN> "user-chat-status" right without using an image. I would like the image that appears in green, were a <DIV> or <SPAN>. What am I doing wrong?
JSFiddle
Check this fiddle out: http://jsfiddle.net/3PduX/18/
I put display:block to the span, which i think may have been what you missed.
Radu Chelariu's idea was even better though. I smashed a working example together without having to use the extra span, check it out here: http://jsfiddle.net/3PduX/22/
It uses the :after pseudo element.
If you are using two divisions one after other, you can use clear:both; in current div.
If you want to align the div to right,you can use .
I hope it will work.
Pish, posh. Images for UI are silly. That's why we have pseudo-elements!
Basically, you just have to replace your image with a :after or :before and style that accordingly. Here's a JSFiddle to illustrate:
http://jsfiddle.net/sickdesigner/N99j3/
Cheers!
I have a DIV named mediashelter and there are four small photos inside the DIV
#mediashelter
{
width:200px;
height:300px;
background-color:black;
}
and inside the div are four small pictures placed vertically using
<div id="mediashelter" >
<img src="./images/fubu.jpg"><br>
<img src="./images/li.jpg"><br>
<img src="./images/t.jpg"><br>
<img src="./images/g.jpg">
</div>
how do I center the four small pictures inside the black rectangle named mediashelter? Thanks a lot once again
If you add text-align: center to #mediashelter, it works perfectly.
Fiddle:
http://jsfiddle.net/3Ff63/
Try this:
<div id="mediashelter" align="center">
I have a problem with fixed image width only in Internet Explorer (I have IE8)
First the image is not appear at all when padding is not defined
Second when i specify padding:5px; for the img it appears like this
Note that I can't set a special width for image container div because
below is my code
HTML:
<div class="block_div">
<div>
<div class="img_about">
<img src="test_img.jpg" alt="test_img" width="150" />
</div>
<div class="img_about">
about: "Adapted from Betty Crocker".
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.img_about{float:left; }
.img_about img{padding:5px; }
and if i delete the float from .img_and_text dev it looks normal width:150
try this:
.img_about img { width:150px; height:150px; }
Using inline width tags is only helpfull for e-mail clients these days afaik...
.games_box
{
width:575px;
margin:8px auto;
background:#f8f7f7;
padding:8px;
border-bottom:#000000 1px dotted;
}
<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75' alt='games' />
<div id='staff' style='position:relative; top:-50px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>
I put staff div.. the games-box div is large..
i use 'clear:both'.. but no use..
1 st
2 nd
place staff pick image
3 rd
finally, z-index used staffpick image, under image more space
Hi you can give parent position relative and child give absolute as like this
Css
.games_box
{
width:575px;
margin:8px auto;
background:#f8f7f7;
padding:8px;
border-bottom:#000000 1px dotted;
position:relative;
}
HTML
<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75' alt='games' />
<div id='staff' style='position:absolute; top:-5px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>
Live Demo http://jsfiddle.net/rohitazad/grE5A/
To 'suck up the space' you can use margin-top:-50px; or use position:absolute like in this example http://jsfiddle.net/grE5A/2/.
Notice I've given the <a> tag the relative position as it is the 'parent' that #staff needs to be positioned absolutely in.
The reason you had the space under the image is because position:relative; top:-50px moves the staff pick up relative to it's original position, but the parent still behaves like the element is in its original position. (Z-index has no effect what you are trying to do.)
I'm trying to simulate a shadow on a div I have by creating a div called headerShadow and setting it's background color to Black.
It's not showing though, here's the code:
#header
{
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#headershadow
{
color:Black;
height:10px;
}
<body>
<div id="header">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
<ul id="topuserbar">
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li>Mis Anuncios</li>
<li>Perfil</li>
<li>Ayuda<img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li>Cerrar Sesion</li>
</ul>
</div>
<div id="headershadow">
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
You do not want the color attribute to be black. To achieve the effect that you want, set the background-color to be black.
background-color:Black;
You're going to want to fix the positioning to appear like a shadow, but I'll leave that up to you.
I believe adding a min-height to your div will fix this problem.
Other fixes:
Ensure your div has content, add a for example
If your div is floated, make sure it has width and height defined
Make sure the top and left values are not the same as the div above it
Check your z-indexes