The objective is to put one image in div tag, and make the corner image round.
Here is my code:
<div id="round-div">
<a href="#1" class="cross-link active-thumb">
<img src="<%: HelperClass.CheckImageUrlExist(Model.GetItemSpecial[0].PictureName) %>" alt="<%: Model.GetItemSpecial[0].Name %>" width="63px" height="36px" class="nav-thumb"/>
</a>
</div>
You could have the image be the background image of the div tag and then use the css property: border-radius:10px; That would round it for you. You could also just add the property to the image as well.
.round-div img
{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}
Related
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 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/
.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
I just finished my captcha script so it has the captcha image then next to it I have a link that is a small image that can be clicked to refresh the image to a new one.
I am wanting to make this small image be on top, on the bottom left corner of the large image, can someone help me with the CSS? Below is my complete code
<img src="captcha.php?sid=<?php echo md5(uniqid(time())); ?>" id="image" align="absmiddle" />
<a href="#" onclick="document.getElementById('image').src = 'captcha.php?sid=' + Math.random(); return false">
<img src="refresh.gif" alt="Reload a new image" border="0">
</a>
HTML
<div id="images-container">
<img src="image-big.png" alt="Big Image" id="big-image">
<img src="image-small.png" alt="Small Image" id="small-image">
</div>
(if you are using XHTML, don't forget to change the end of the image tag to use /> instead of >
CSS
#images-container {
position:relative;
}
#big-image {
position:absolute; /* position:absolute aligns to the parent container
which in the HTML above is the <div> element */
bottom:0;
left:0;
z-index:0;
}
#small-image {
position:absolute;
bottom:0;
left:0;
z-index:1;
}
The important thing for the z-index is that #small-image has a higher number than #big-image . If your repeating this effect, use classes instead of ids.
You'll want to use the CSS z-index property to set which image will display on top of the other:
http://www.w3schools.com/Css/pr_pos_z-index.asp
You'll probably want to use relative or absolute positioning to position the small image:
http://www.w3schools.com/Css/css_positioning.asp
I think what you need to do is to set css property position: relative; to #images-container div, and leave the other css rules as they were.
If you do that the images will be absolutely positioned but relative to their parent div instead of the body(whole screen).
Well.. good luck!
Z-index stuff can get sloppy in my experience. Why not just use an inline style to set your captcha as the background image of a div? Something like so:
<div id="image" style="background: url(captcha.php?sid=<?php echo md5(uniqid(time())); ?>) no-repeat; width: 100px; height: 100px;" id="image" align="absmiddle" >
<img src="refresh.gif" alt="Reload a new image" border="0" onclick="document.getElementById('image').style.backgroundImage = 'captcha.php?sid=' + Math.random(); return false">
</div>