Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 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
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •