Web Analytics Made Easy - StatCounter box element will not appear below image - CodingForum

Announcement

Collapse
No announcement yet.

box element will not appear below image

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    box element will not appear below image

    I am trying to get a box element done either through <p> or <div> (I have tried both) to recognize the image and appear below it instead of ignoring it and appearing behind it.

    I have the image with a position: relative which maybe part of the reason, but I need to keep this in order to make a jquery function work properly.

    Here is my html

    Code:
    <div class="thumb_container">
				<img src="images/logo-jquery.png" class="thumb_image" id="2"/>
				
				<div class="thumb_info" id="info_2">
					<label><b>jQuery:</b> 2 years</label><br />
					
				</div>
</div>

    Here is my CSS

    Code:
    .thumb_image
{
	position: relative;
	width: 120px;
	height: 120px;
	float: left;
	top: 40px;
	margin: 0px 10px 30px 10px;
	border-radius:10px;
	-moz-border-radius:10px; /* Firefox 3.6 and earlier */
	opacity:0.5;
	filter:alpha(opacity=50);
}


.thumb_info
{
	
	margin: 0px 10px 0px 10px;
	height: 35px;
	width: 115px;
	border-radius:10px;
	-moz-border-radius:10px; /* Firefox 3.6 and earlier */
	background: -webkit-gradient(linear, 0% 100%, 0% 62%, from(#BCDEDD), to(#D5ECF7), color-stop(0,#7DACBD));

	border: solid;
}
    Thanks a lot for the help
    Tags: None
  • #2
    Hi there surreal5335,

    try it like this...
    Code:
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
.thumb_image {
    float:left;
    width:120px;
    height:120px;
    margin:40px 10px 30px 10px;
    border-radius:10px;
    -moz-border-radius:10px; /* Firefox 3.6 and earlier */
    opacity:0.5;
    filter:alpha(opacity=50);
 }
.thumb_info {
    clear:both;
    width: 115px;
    line-height:35px;
    margin:0 10px;
    border:2px solid #000;
    border-radius:10px;
    -moz-border-radius:10px; /* Firefox 3.6 and earlier */
    background:#bcdedd;
    background:-webkit-gradient(linear, 0% 100%, 0% 62%, from(#bcdedd), to(#d5ecf7), color-stop(0,#7dacbd));
    background: -moz-linear-gradient(top,  #bcdedd,  #d5ecf7);
    font-family:'times new roman',serif;
    font-size:16px;
    text-align:center;
 }
</style>

</head>
<body>

<div class="thumb_container">

<img src="http://www.coothead.co.uk/images/girl.jpg" class="thumb_image" alt=""><!-- logo-jquery.png -->

<div class="thumb_info" id="info_2">
<b>jQuery:</b> 2 years
</div>

</div>

</body>
</html>
    coothead
    ~ the original bald headed old fart ~

    Comment

    Previous template Next
    Working...
    X