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
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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

  • #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

    Working...
    X