Previously, we talked about creating icons with CSS Sprites. You’ll need this image (Source: http://www.lighttek.com/icon/index.htm) for icon part of the exercise and this image for the button part. You will also need this original file, which will eventually look like this completed file. CSS Sprites A sprite is a portion of an image used as…
Links should stand out from the rest of your page. This is why they look different by default, than the rest of the text. However, standard style links are usually boring, and rarely fit into the theme of the site. Modify the Anchor Tag To modify a anchor tag, edit the a tag in CSS….
Rollovers offer a nice and easy way to stylize your website, and provide some basic interaction. But rollovers are for more than just making things look nice. They (should – if done right) also give feedback to the user, to let them know that what their mouse is over will take them somewhere. It should…
There are several ways to perform an image rollover. They all involve JavaScript or CSS. However, Dreamweaver has a built in method that will write the JavaScript for you, so you don’t have to learn that aspect. This method is shown in this video tutorial. Creating Image Rollovers in Dreamweaver was originally found on Access…
This takes the concept of the CSS float with the text, a little further. Normally HTML elements must follow a box. However, in print, text and follow an outline of an image’s shape. This video tutorial will show you how to mimic that effect in a web page. Wrap Text Around an Image Shape Using…
Images don’t normally have text around them. If you want to have text wrap around your images, you will need to know how to float the image, and how we can make sure the text is still easy to read around the image. Floating Images on a Webpage with CSS was originally found on Access…
The CSS Float property allows you to position an element to the left or right side of a container. Additionally, because it interrupts the “flow” of the normal web layout, it not allows for the element to have other elements wrap around it, such as you would expect to see with an image in a…
Box model The box model describes how CSS works to display images and information. Every element in your web page responds to these basic directives, however their implementation is not always accurate. width: how wide your element is height: how tall your element is margin: space between two elements. Measured a little uniquely, as the…
