animated flagEngland is known for its long history.

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


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.


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: