animated flagEngland is known for its long history.

The Romans called it Britannia and named its major trade center Londinium.


Summary:

Float an Animated Flag in your apDiv

    ●   Find an animated Flag, Float it, and apply padding.


Learn About:

<div> tags Floats <style> tags padding

This tutorial is part of a series:

1 - 175_java_tooltip_Dw    2 - 64_style_apdiv_Dw.htm    3 - 95_float_animated_gif_Dw.htm  4 - More    5 - More     6 - More   7 - More  

  •   This tutorial is part of the What in the World? Projects.

Other People's Work:


This background is an example of work inspired by this tutorial.







Step #1: Find an Animated .gif ~

Hopefully you've done this first: 64_style_apdiv_Dw.htm

Go on Google and search for animated waving flag gif or click here.

Find a flag from your country, Right-Click it …

save background

… and save it to your root folder.


Step #2: apDiv display: block ~

Scroll up and find the apDiv1 you made …

display: block makes the apDiv visible so you can see it!

new folder web page

… and change display to block.


Step #3: Click inside ~

Click inside the div somewhere …

… and go to: Insert > Image …

… and locate the image you saved in your root folder.

Then type a short description of the image …


Step #4: In-Line CSS ~

Find the code for the flag in Split view.

find the code


Step #5: In-Line CSS ~

Click inside the closing /> tag of the image.


Step #6: In-Line CSS ~

Type    s   t   y    and watch for the code hints to pop up …

… so it looks like this:

style colde

Step #7: Float ~

Click between the parentheses and type the letter f to bring up the code hints again select float …

Select left or right depending on which side of the div you want your image …

style float left


Step #8: So What?

Now you can type text next to the image and it will "float" next to it …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #9: Padding ~

Your text probably touches your images - and That's Bad!

no padding

Add a semi-colon after the float …

… and add padding: to your left floated image …

… and set it to 10 or 15 px.

padding-30px-code.png

Last Step: Upload your Site ~

Save and upload your files with the completed code.

upload your site

Attach the URL of your site, and continue working…


Other Resources: