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 9 of 9
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts

    How do I place my image on the right hand side ?

    Hello,

    I am trying to get my image of the bible to go in
    a <div> on the right hand side of the iPower advert,

    BUT for some reason it keeps going underneath

    This is what I mean:



    This is the HTML I have written:

    Code:
    	
    	<footer>
    		<div class=\"BlockE_ads\">
    			<a href=\"$ad_E_link\"><img title=\"$ad_E_title\" alt=\"$keyword2\" src=\"http://expert-world.org/banners/$ad_E_pict\"></a>
    		</div>
    		<div class=\"BlockF_ads\">
    			<a href=\"$ad_F_link\"><img height:90px; title=\"$ad_F_title\" alt=\"$keyword2\" src=\"http://expert-world.org/banners/$ad_F_pict\"></a>
    		<div class=\"BlockF_txt\"><b>Heading text</b><br>Some more text goes here</div>
    		</div>
    	</footer>
    Code:
    footer {
    	display:block;
    	clear:left;
    	height:120px;
    	background:red;
    	margin:0 auto;
    	border-radius:12px 12px 12px 12px;
    	-moz-border-radius:12px 12px 12px 12px;
    	-webkit-border-radius:12px 12px 12px 12px;
    	}
    	
    .BlockE_ads {
    	display:block;
    	padding:15px;
    	}
    
    .BlockF_ads {
    	display:block;
    	width:300px;
    	margin-left:60px;
    	padding:15px;
    	overflow:hidden;
    	}
    
    .BlockF_ads img {
    	display:block;
    	}
    
    .BlockF_ads txt {
    	display:block;
    	hieght:100px;
            font-size:10px;
    	overflow:hidden;
    	}
    Can anyone see what I am doing wrong ?


    Next to the Bible image I want to display some text,
    again on the RHS of the the image in the div . BlockF_ads txt


    Thanks



    .
    Last edited by jeddi; 02-05-2013 at 01:14 PM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Hello.

    I am still fighting with this

    I have put a width statement in the first image block of 760px
    and I tried a float:left; and float:right; on the bible image block

    But the Bible image block keeps sitting under the footer block
    rather than inside it

    This is my current CSS:


    Code:
    footer {
    	display:block;
    	width:1060px;
    	margin:0 auto;
    	clear:left;
    	height:120px;
    	background:red;
    	border-radius:12px 12px 12px 12px;
    	-moz-border-radius:12px 12px 12px 12px;
    	-webkit-border-radius:12px 12px 12px 12px;
    	}
    	
    .BlockE_ads {
    	display:block;
    	width:730px;
    	padding:15px;
    	}
    
    .BlockF_ads {
    	display:block;
    	width:260px;
    	margin-left:0px;
    	padding:5px;
    	overflow:hidden;
    	}
    And the HTML

    Code:
    <footer>
    		<div class="BlockE_ads">
    			<a href="http://expert-world.org/linker.php?a=21&b=3/1"><img title="Special Offer from iPower.com" alt="" src="http://expert-world.org/banners/ipower_242.gif"></a>
    		</div>
    		<div class="BlockF_ads">
    			<a href="http://expert-world.org/linker.php?a=22&b=3/1"><img title="Help for the Family" alt="" src="http://expert-world.org/banners/bible.jpg"></a>
    			
    		</div>
    	</footer>

    Can anyone help me with this ?


    Thanks.


    .
    Last edited by jeddi; 02-06-2013 at 05:26 PM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    This is my site where the problem is

    The foote is at the bottom

    Thanks for any help





    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    One thing you are doing is mixing css with html tags. For example, <img height:90px;

    Either put the height in the css or change it to height="90px".

    Why do you have all those escape characters in the html? Wouldn't it be better to have
    src="http://expert-world.org/banners/$ad_F_pict"
    than
    src=\"http://expert-world.org/banners/$ad_F_pict\"?

    I assume you have some scripting going on thus the "$ad" stuff, right?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    OK
    - I changed the escapes
    - but I am no nearer solving my problem


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jeddi,
    You should have a look at a float tutorial that might help clear things up for you.

    Try it like this once -
    Code:
    .BlockE_ads {
    	width: 730px;
    	padding: 15px;
    	float: left;
    }
    .BlockF_ads {
    	width: 260px;
    	padding: 5px;
      float: right;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Even better jeddi, get rid of those unnecessary div elements, tweak a little CSS and ...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    }
    footer {
    	width: 1060px;
    	margin: 0 auto;
    	padding: 20px;
    	overflow: auto;
    	background: #f00;
    	border-radius: 12px 12px 12px 12px;
    	-moz-border-radius: 12px 12px 12px 12px;
    	-webkit-border-radius: 12px 12px 12px 12px;
    }
    .BlockE_ads {
    	width: 730px;
    	margin: 5px 0 0;
    	float: left;
    }
    .BlockF_ads {
    	width: 260px;
    	margin: 0 0 0 40px;
    	float: left;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <!--end container--></div>
        <footer>
            <a href="http://expert-world.org/linker.php?a=21&amp;b=3/1" class="BlockE_ads"><img title="Special Offer from iPower.com" alt="description" src="http://expert-world.org/banners/ipower_242.gif" /></a>
            <a href="http://expert-world.org/linker.php?a=22&amp;b=3/1" class="BlockF_ads"><img src="http://expert-world.org/banners/bible.jpg" alt="description" title="Help for the Family" /></a>
    	</footer>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Sep 2012
    Location
    USA
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    HI ! i think you should use this. it may help you.

    ex:

    <div style="float: right;"><img src="images/pen.png" alt="This is my pen." /></div>

  • #9
    Senior Coder
    Join Date
    May 2006
    Posts
    1,674
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks very much for your help.

    I don't know why I couldn't get it

    I decided to keep the div's so I can put text inside as well.

    Looks good now


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.


  •  

    Posting Permissions

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