shopping cart Helpful hints shopping cart
shopping cart

In many cases, once an image is inserted into a web page it may require changes to its format. You may want to center the image, wrap text around the image, change the size of the image, vertically line up several images, or apply a border around your images.

In order to follow the tutorials below you will need a HTML text editor of your choice, an image to manipulate, somewhere to upload the code and image, and an Internet browser to view them. Click here to use an online HTML editor1 with these tutorials.

Align an image

There are two key ways to align or reposition an image on a web page. The easiest way is to center an image using HTML markup2. This is a depracated method, which means it may not work in newer browsers and could render differently across various browsers. The second method is to align images with CSS3 using a few lines of simple code. Because Cascading Style Sheets (CSS) is separate from HTML, you will also need to learn the three ways to link CSS style rules to HTML4 pages.

Wrap text around an image

There are a couple of ways to achieve this effect in your web pages. If you are a beginner then you may look to position images with the align property5. You can also use the table alignment method to position images6 though this requires more knowledge of HTML markup and is slightly harder. The third method which has the most compliance across all browsers is to use CSS and the float property to align images7.

Change image size

You may also be interested in changing the size of images to better control their display on browsers. A helpful tutorial on image size attributes8 can be found here. You may also need to resize an image using a graphics program9.

Align several images

For a more sophisticated look like an image gallery, a more complex approach to the layout of images is needed. If you have mastered the previous steps however then this tutorial on how to make a CSS image gallery10 should be within your ability.

Apply border around an image

To apply simple style effectsto distinguish images on the web page, borders can be helpful. The easiest way to apply a border around an image is to apply the border attribute to an image11. A more complex but reliable method is to apply a border to an image using CSS inline styles12. Also, when using an image as a link you may also see a blue border around the image. Here is a tutorial to help resolve image links with blue borders13.


  1. use an online HTML editor
  2. center an image using HTML markup
  3. align images with CSS
  4. three ways to link CSS style rules to HTML
  5. position images with the align property
  6. use the table alignment method to position images
  7. use CSS and the float property to align images
  8. tutorial on image size attributes
  9. resize an image using a graphics program
  10. tutorial on how to make a CSS image gallery
  11. apply the border attribute to an image
  12. apply a border to an image using CSS inline styles
  13. resolve image links with blue borders
ecommerce software shopping cart
 
    talk to us
t:+61 2 9211 9966[AU]
+44 020 3286 9322[UK]
+1 646 233 4010[US]
e:support [at] shopbuilder.com.au

    join our mailing list
email: 

    on specials
ecommerce specials NO setup fee. Normally $149, but setup with zero setup fee for this month only,if you buy a 12 months plan.
    helpful hints
>Useful tips for images
>Basic user guide
>Advanced design guide
    news and events
New features launched
Latest version of Shop Builder includes order tracking, freight management, gift voucher support and new customer management system.

New payment gateways
The latest version of Shop Builder is optimized to also provide direct support for additional payment gateways such as PayPal and Paymate. With newly added feature Shop Builder is one of the most cost effective, feature rich online store builder products on the market.

 


  Shop Builder is a trademark.The content of this web site is copyright. All rights reserved.
 
home | sitemap | privacy policy | terms and conditions | disclaimer | links | link to us