Float & Clear with CSS

Use the following to prevent text inside the editable region under a div with a menu bar from floating up along side the menu bar as it adjusts inside a fluid layout:

Use the “Float” property to specify whether or not an element should float.

Use the “Clear” property to control the behavior of floating elements.

Float Property

The “Float” property can be used to wrap text around images.

Clear Property

The “Clear” property is used to control the behavior of floating elements.

Elements after a floating element will flow around it. To prevent this, use the “Clear” property.

The “Clear” property specifies on which sides of an element floating elements are not allowed to float.

So for the div that contains the menu bar, float the div to the left and set the clear to “right.”

(Must use both.)

 

 

How To Create Custom PayPal Button (Code Factory)

SAMPLE PAYPAL BUTTON 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="hosted_button_id" value="JGPNM5E634B42">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

 

Find the following line of code:

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

And replace it with:

<input type="submit" value="Add to Cart" name="submit" title="PayPal - The safer, easier way to pay online!" class="paypal_btn">

 

Paste the following into the .css file: (it will then show up as CSS Styles in All as .paypay_btn and .paypal_btn:hover

You can then make changes to the button appearance by clicking on “edit rule.”

The button will still bring up PayPal when clicked.

.paypal_btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 14px;
margin: 0;
background: #ff6600;
border: 0;
cursor: pointer;
outline: none;
}
.paypal_btn:hover{ background: #e05c04; }

Mobile Button That Calls Phone When Clicked

You can add a link on your jQuery Mobile webpage to directly call a phone number using the following format:

<a href=”tel:1234567890″ data-role=”button” rel=”external”>Phone: (123) 456-7890</a>

Be sure to put in rel=”external”.

When you click on the link, your phone app on your smartphone will be brought up with the number 1234567890 set.  All you have to do is hit “Call”  to make the phone call.  Try it out on your iPhone or Android phone!

Add viewport code to jquery-mobile to make site Google Mobile Friendly

To make the jquery-mobile site that Dreamweaver CS6 installs when choosing New – Page From Sample – Starters – jquery mobile with theme, add the following code to the line after <meta Charset=”utf-8″> somewhere around line 5:

<meta name=viewport content=”width=device-width, initial-scale=1″>

The viewport will correct the negative checks on Keynote MITE 5 regarding viewport, as well as “small text” and “links too close.”