KD Web Page Design |
 Home |
Folio |
Services |
Quote |
FAQs |
Tutorials |
Support |
Order |
Contact |
|
| www.kdwebpagedesign.com |
|
BASIC HTML ::
Welcome
Introduction to HTML What is an URL? Browser Safe Fonts Photo Size and Compression Formatting Your Text Paragraphs, Linebreaks, Rules The Marquee Tag Adding Images Adding Text and Image Links Making Lists Tables: Basics Tables: Backgrounds and Color Tables: Colspan and Rowspan Tables: Practical Samples BASIC CSS ::
Introduction to CSS
Adding Backgrounds and Color The <div> and <span> Tags Formatting Your Text/CSS Making Lists/CSS Image Borders/CSS Hyperlinks/CSS Tables/CSS Fun with CSS USER Tools ::
Custom Auction Listing Creator: 1
Custom Auction Listing Creator: 2 Choosing Your Colors Mix-and-Match Backgrounds JavaScript Tricks ::
Other Information ::
eBay Related Questions
Customizing Your eBay Store Hosting Your Own Photos on eBay Using Irfanview to Crop Photos What Does That Term Mean? Donations ::
Do you find our Tutorials helpful? Are the free Auction Templates helping your sales? Donations of any amount are appreciated to help keep this site up and running!
|
 |
Image Magnifier: Using CSS Only - No Javascript!This uses just one image which is nested eleven deep in list items to give a variable image magnifier. IE has to be hacked into performing the same task by using tables and nested links. Just move your mouse left or right over the scale above the image to see the gradual enlarging of the image. This works in IE5.5, IE6, IE7 beta, Firefox, Opera and Safari. If anyone using other browsers could confirm if this works I would be grateful. The text has been added to show that the original small size image, which is held in a relative positon div acts as a normal float left image but also acts as an absolute positioned image when enlarged. The css is held in the source code of the page and requires a separate style for IE. The html is held in the #info div in the body of the source code. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras viverra laoreet metus. Suspendisse a elit. Nam pretium lectus eu risus. Sed non mi. In vehicula augue sit amet mauris. Aenean blandit nisl vitae quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla est. Maecenas nisi. Aliquam dapibus, ipsum ut nonummy condimentum, leo odio elementum tellus, sit amet varius magna lacus sed nisi. Etiam lectus nulla, egestas quis, luctus id, commodo at, velit. Quisque cursus sodales urna. Proin et nibh sed lectus tincidunt iaculis. Proin eget neque quis turpis rhoncus vulputate. Suspendisse sagittis dui. Nulla facilisi. Donec eget sem. Suspendisse luctus ligula id purus. Nulla facilisi. Pellentesque non pede. Morbi tincidunt feugiat turpis. Cras eget tellus et urna cursus sollicitudin. Etiam eget eros vel erat dictum consectetuer. Nunc congue. Nulla mollis eros eu tortor. Nunc et neque vel ligula dignissim sodales. In rhoncus, odio eu tempor placerat, eros ligula elementum nibh, id rhoncus odio nisi non velit. Suspendisse bibendum est vitae nisl. Nullam elit. Aliquam nunc augue, eleifend eu, consequat sit amet, sagittis in, tellus. Proin a enim. Cras congue tincidunt orci. Phasellus tincidunt. Integer non lectus id nulla scelerisque cursus. A Definition List MenuThis menu is just a definition list with styling. This allows definition lists to be much more flexible than unordered lists and gives more layers for styling. It is also easier to style as you can just style the link and ignore the dl and dt, the only styling that may be necessary is to remove the indent on the dd. The menu below has a background image in the dl, a background image in the dt and background images in the dd links and it will not break when larger font sizes are selected. Although it works fine in IE and Firefox, the results in Netscape are a little off. 
|
