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
Related
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
I have rows of product thumbnails with the product text below. See here
Since the images have different heights the text is not always vertically aligned in the right place. I just changed the layout from tables to divs because it's easier and more modern.
I've worked through several examples, websites, and this site but still haven't found a way to align this correctly. I'd like the image aligned in the middle of the div and the text at the very bottom.
Here's the DIV code (very simple):
<div style="float:left; width:210px; height:200px; text-align:center;" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/"><img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" /></a>
Alton Banquette
</div>
It works fine on this page since the images are all the same height
Is there a simple solution to this? I like DIVS better but this wasn't a problem when everything was table cells since I could use valign=center, etc.
Thank you!
Always assign a class and organize your code , always wrap your text to avoid glitches:
<div class="wrap" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/">
<img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" />
</a>
<p>Alton Banquette</p>
</div>
.wrap
{
float:left; width:210px; height:200px; text-align:center;
}
}
.wrap p
{
display:block;
}
img
{
height:100% !important;
width:auto;
}
Fiddle Demo
so whenever you change the image height , text will always remain at bottom.
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 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/
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...