...

View Full Version : Position an image beside a ul



Muckiem14
06-27-2007, 12:31 AM
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

kaitco
06-27-2007, 01:02 AM
This should fix your picture issue:

CSS:


#List {
margin: 10px;
clear: both;
}

#right {
float: left;
}

#left {
float: left;
}

#footer {
clear: both;
text-align: center;
}

HTML:



<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.

Muckiem14
06-27-2007, 05:22 AM
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

koyama
07-01-2007, 07:20 PM
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 (http://www.quirksmode.org/css/quirksmode.html)? The problem is with your document type declaration. You have this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I'd suggest that you use this one:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum