1 reply [Last post]
paqman
Offline
newbie
Last seen: 4 years 30 weeks ago
Timezone: GMT-7
Joined: 2010-03-21
Posts: 1
Points: 2

Trying to add a paypal view cart button in a css header, and change the picture to m5.gif instead of the paypal button, very new to css appreciate the help

HEADER IN CSS

#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline}
#header ul li a{background:url(images/m5.gif) top left no-repeat; color:#fff; text-decoration:none; margin:0 0 0 0; width:122px; text-align:center; display:block; float:left ; padding:23px 0 19px 0; font-family:Tahoma, Geneva, sans-serif; font-weight:bold} 
#header ul .li a{background:url(images/m2.gif) top left no-repeat;} 
#header ul .li1 a{background:url(images/m3.gif) top left no-repeat;} 
#header ul .li2 a{background:url(images/m4.gif) top left no-repeat;} 
#header ul .li3 a{background:url(images/m1.gif) top left no-repeat;}
#header ul .li4 a{background:url(images/m5.gif) top left no-repeat;}
#header ul li a:hover { text-decoration:none; color:#332e2a}

the m5.gif image is the one we are subing for the paypal view cart logo

Here is the code

<div id="header">
       	  		<div class="menu">
                	<ul>
 
                        <li class="li"><a href="index-1.html">Home</a></li>
                        <li class="li1"><a href="index-2.html">Shop Now</a></li>
                        <li class="li2"><a href="index-3.html">About Us</a></li>
                        <li class="li3"><a href="index-4.html">Contact Us</a></li>
                        <li class="li4"></li>
                     </ul>
                </div>
      		</div>

li4 is where the paypal cart should go

here is the paypal code

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_viewcart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Thanks for the help

flamenco
flamenco's picture
Offline
Enthusiast
US, East Coast
Last seen: 3 years 40 weeks ago
US, East Coast
Timezone: GMT-5
Joined: 2009-04-13
Posts: 240
Points: 144

Hi, Since there is "nothing"

Hi,
Since there is "nothing" in the .li4 link, no background will be visible. If you define height and width matching your image, it should work. Notice how I got rid of the "a" because there's no link to style there. Example that can be adjusted to taste until the image is visible:

#header ul .li4 {
background:url(images/m5.gif) top left no-repeat;
height: 50px;
width: 100px;
}

Cheers, Dave