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 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Position an image beside a ul

    Hello. So I have this unordered list and I want to place an image to the right of it. The problem is the image completely messes up the list. The list is centered. I cant figure this out. I have spent hours on this simple task which is rediculous.
    Please have a look at this page. If someone can tell me how to put a 200px x 150px image to the right of the list, I would greatly appreciate it. Thanks.

    http://kprofit.com/rare_materials.php


    Mike

  • #2
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    This should fix your picture issue:

    CSS:

    Code:
    #List {
    	margin: 10px;
    	clear: both;
    }
    
    #right {
    	float: left;
    	}
    
    #left {
    	float: left;
    	}
    
    #footer {
    	clear: both;
    	text-align: center;
    	}
    HTML:
    Code:
    <div id="List">
    
    	<div id="left">
    		<ul>
    			<li>(ebook - english) SAP BC ABAP Programming</li>
    	<li>...other list items...</li>
    		</ul>  
    	</div>
    		
    	<div id="right">	  
    		<img src="mypic.jpg" alt="My Pic" height="150" width="200" />
    	</div>
    
    </div>
    
    <div id="footer">
          <div class="style1">Product Costs Only USD$100</div>
    
          <div><span class="style1">Price includes free shipping to any part of the world by standard  airmail&nbsp;(2.5 weeks&nbsp;delivery time). To get the product by courier add  USD$40 using this payment link</span> <a href="http://www.kprofit.com/payment.html" target="_blank">www.kprofit.com/payment.html </a></div>
    
    <!-- These are not necessary. Just use CSS to adjust the padding and margins of the divs 
          <div>&nbsp;</div>
          <div></div>
    -->
    
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_xclick"> 
                  <input type="hidden" name="business" value="paypal@kprofit.com">
              <input type="hidden" name="item_name" value="Rare SAP Training Materials "> 
              <input type="hidden" name="amount" value="100.00">
    
                  <input type="hidden" name="no_shipping" value="2"> 
                  <input type="hidden" name="cn" value="Enter Notes">
                  <input type="hidden" name="currency_code" value="USD">
                  <input type="hidden" name="bn" value="PP-BuyNowBF"> 
                  <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but01.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"> 
                  <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form> 
    
    </div>
    ...however, I would consider rethinking how you have structured much of your page. You are using a lot of unnecessary divisions and you are also using tables which are not to be used for structuring pages. There is a lot of information here: http://bonrouge.com/br.php?page=home.

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you. I agree that the page is a mess. I didnt create the page. I am only entering a list and putting an image on the page. Your tips almost worked for me and did teach me some things. However, it didnt get the results I need. The image was located on the right but the list was then pushed to the left when it needs to be centered. The list should be centered and the image should be located right above the longest line of text ending with "Pricewaterhousecoopers 1998". Is there a way to do this? I tried a few things but still couldnt acheive what I need. Thanks for the help.

    Mike

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Muckiem14 View Post
    Your tips almost worked for me and did teach me some things. However, it didnt get the results I need. The image was located on the right but the list was then pushed to the left when it needs to be centered. The list should be centered and the image should be located right above the longest line of text ending with "Pricewaterhousecoopers 1998". Is there a way to do this?
    I'd assume that you could get away using absolute positioning within #List for that image. That would involve setting position: relative for #List while setting e.g. img {position: absolute; right: -100px; top: 0 } for the image.

    As a side issue, are you aware that your page is rendered in quirks mode? The problem is with your document type declaration. You have this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    I'd suggest that you use this one:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">


  •  

    Posting Permissions

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