Forum Moderators: not2easy

Message Too Old, No Replies

Payment logos icons postioning

Payment logos icons postioning

         

Domino2010

5:35 pm on Sep 12, 2010 (gmt 0)

10+ Year Member



Hi guys & girls,
Well this is my first time being on this forum. Could anyone help me with some basics. Have opened up a e commerce website and placed my payment logos on the bottom of each page through the css.
Google, Paypal and Credit cards logos.
I would like to have all in one line side by side ,; how do i do this?
i have managed to get two on top of one , however it would look better if all were in one line.

my current coding is ;


<a href="http://www.paypal.com/uk" target="_blank"><img src="http://www.visamastercardlogos.com/img/logos/mc_ms_vs_accpt_h_038_gif.gif" alt="High Risk Merchant Account - www.ballisticmerchantservices.com" border="0" /></a>



<!-- PayPal Logo --></td></tr>
<tr><td align="center"><a href="#" onclick="javascript:window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=400, height=350');"><img src="https://www.paypal.com/en_GB/GB/i/logo/PayPal_mark_60x38.gif" border="0" alt="Acceptance Mark"></a></td></tr></table><!-- PayPal Logo -->


<div id="googleCheckoutLogo"; align="center"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=1752..1628773&loc=en_GB&f=png' ></script>


<!-- footer ends here -->
</body>
</html>

I know its something really simple to do with the divs etc. Will be learning that soon !

Any advice or help would be much appreciated.

Many thanks =)

onlinetraining

4:43 pm on Sep 15, 2010 (gmt 0)

10+ Year Member



In your document footer you can insert the HTML markup below:

<div id="paymentlogos">
<div id="creditcards">
<a href="http://www.paypal.com/uk" target="_blank"><img src="http://www.visamastercardlogos.com/img/logos/mc_ms_vs_accpt_h_038_gif.gif" alt="High Risk Merchant Account - www.ballisticmerchantservices.com" border="0" /></a>
</div>
<!-- credit cards -->
<div id="paypallogo"><a href="#" onclick="javascript:window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=400, height=350');"><img src="https://www.paypal.com/en_GB/GB/i/logo/PayPal_mark_60x38.gif" border="0" alt="Acceptance Mark"></a>
</div>
<-- Paypal logo -->
<div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=1752..1628773&loc=en_GB&f=png' ></script>
</div>


In your CSS style sheet add the following

#paymentlogos{
height: 50px;
margin:10px 0;
padding:0;
clear:both;
float:none;
}

#creditcards{
width:50px; /* specify actual value */
height:40px; /* specify actual value */
float:left;
clear:left;
margin:0 20px 0 0; /* right margin to add spacing to the right. Leave left margin to 0 */
padding:0;
}

#paypallogo{
width:50px; /* specify actual value */
height:40px; /* specify actual value */
float:left;
clear:none; /* otherwise will be flushed down */
margin:0 20px 0 0; /* right margin to add spacing to the right. Leave left margin to 0 */
padding:0;
}

#googleCheckoutLogo{
width:50px; /* specify actual value */
height:40px; /* specify actual value */
float:left;
clear:none; /* otherwise will be flushed down */
margin:0; /* no need for right margin. Leave left margin to 0 */
padding:0;
}

Domino2010

7:17 pm on Sep 15, 2010 (gmt 0)

10+ Year Member



Hello mate, thanks for that, tried it but didn't work instead the logos were positioned in a different order. got a feeling its the template fault aswell. Did you use any software eg komposer etcc?
do you recommend any?
many thanks

holyhttp

7:35 pm on Sep 15, 2010 (gmt 0)

10+ Year Member



I use Dreamweaver as my main editor in all web projects.