A Freelance and Professional Web Designer working in and around Chicago, IL.
E-mail: info@zachines.com
Phone: 708.224.7928
Note:The float property is one of the most flexible and widely used tools of div based layouts.
Objectives: Learn how to use the float: property to position divs.
below are 2 iframes,:
I hope this tutorial helped you, please if you have any feedback, suggestions, or comments Contact me here or leave a comment!
Note: There are alot of ways to position divs, and they are covered in other tutorials. In this tutorial we will go over the basics of position:absolute and position:relative
Objectives: This tutorial is written to explain the effects of position:absolute and position:relative in conjunction with each other.
Think of the browser window as one div with {width:100%; height:100%; position:relative;} Any divs or objects placed inside of the <body> tags will be positioned relative to the browser window.
The position:relative Tag
Think of this tag as the “Parent” for anything inside of it. Objects you place inside will react to positioning attributes such as left, right, top, bottom, float relative to its parent container.
The position:absolute Tag
Placing this tag on an object allows it to position relative to its parent container, even if there are other containers in between.
In the below example, the difference is in the top image, the orange image has the attribute position:absolute, so it is positioned relative to the browser window (by default). In the bottom image the div “header-container” has the attribute, position:relative; so the image is positioned relative to that container instead.
Instead of being positioned relative to the browser window, the orange image is placed relative to header-container due to the property “position:relative” on the div.
If your curious about the float:left, it is a very powerful tool for positioning and you should check out How to use float:left.
I hope this tutorial helped you, please if you have any feedback, suggestions, or comments Contact me here.
(You must allow pop-ups for this video)
If you have no experience with actionscript, its OK! This tutorial will go through step by stop on how to do it and I will explain everything as best i can.
Note: This tutorial assumes you have SOME knowledge of flash (how to create and work with symbols.)
Objectives: This tutorial is written to show people how to link a symbol (I will briefly go over text) to an external web site.
There are 2 main steps in creating a link
Create The Link Function
This is going to be the function that opens the web page. Whenever we call this function, it will load the page. I will call it goHome(). You may place this actionscript anywhere on the timeline.
Create The Event Listener
This is the script that detects the key click. It listens for a key click, then executes goHome(). This must be placed ON the symbol you want to be the link. Before you can call the symbol, you must give it an instance name. So first select the symbol you are working with (for this example we will call it homeButton). So select homeButton and in the properties window in the “Instance name” field type: homeButton. This is very important. If your having trouble finding the “instance name” field, keep looking! you may have to use the subselection tool, on CS3 it is V, and A for selection tool. Dig around the properties bar until you find Instance Name
Now that your symbol has a name, we may call it in this next script. So on the same layer that the symbol is on, add a new keyframe and open the actions panel. Attach this script there.
This will listen for a keyclick on that instance and once clicked it will execute goHome, which currently sends you to google.com
I hope this tutorial helped you, please if you have any feedback, suggestions, or comments Contact me here. And please visit my site, Web Design Chicago
