Floaters

4/25/2017

Hi Web Design Class. I hope everyone is doing well. Hope your web template project is coming along.

I am going to provide you with a code sample on how to create floating divs. First I want to quickly review the progress of your web template design.

Just a few tips and reminders:

Use Web Safe colors when making color choices for your template.
Make sure you use the ruler in Photoshop to accurately measure the various dimensions of each DIV that has been indicated in your Wire Frame drawing.
Once the basic containers and desired graphic elements have been created with Photoshop, the next step will be to use the cropping tool in Photoshop to crop down each div within your layout and save individually as .jpg's with names that make sense. For example, my header could be called "header.jpg". (Remember we did this as a practice run before we went on break! Reference this project if you forgot steps.)
Create a new site using the file manager box in Dreamweaver. Create a "index.html" file and a "index.css" file within your sites root folder. Link the HTML file to the CSS file. Create an additional folder called "assest". All of the graphics will be stored there.
Use your knowledge of CSS and HTML to reconstruct your ".jpg" files. Refer to the example that we did before break.

If your web template has DIV's that alongside one another, the following code will demonstrate how to do it. Remember DIV's are block level elements, which means that they automatically generate a return. If you want a DIV to go to the right of another rather than below it, you have to use "float" and "clear" command.

Here is my CSS Code:
#wrap { margin:0 auto;
   width:600px;
   height:100%;
   margin-top:20px;
   background-color:#999966;

}

#nav {
   width:600px;
   height:75px;
   background-color:#99CC33;
   }

#div1 { width:300px;
   height:400px;
   float:left;
   background-color:#999999;
}

#div2 {width:300px;
   height:400px;
   float:left;
   background-color:#9999CC;
}

#footer { width:600px;
       height:77px;
       clear:both;
       background-color:#FFCC33;
}

Here is the HTML Code:
<body>

<div id="wrap">

   <div id="nav"> nav </div>

<div id="div1"> div 1</div>

<div id="div2"> div 2 </div>

<div id="footer"> footer </div>

</div>

</body>

Here is the Visual Result. Notice how the Div 1 and Div 2 sit side by side!

0 Comments

Web Design: Floaters!

Floaters

Leave a Reply.

Visual Art by Dan dressler