Scribd
Upload
242 views

CSS Layout

The document discusses different types of CSS layouts including CSS-only layouts, table-based layouts, and hybrid layouts using both tables and CSS. It provides examples of layouts using <div> tags with CSS positioning versus using HTML <table> tags. The benefits of CSS layouts are highlighted such as quick updates, consistent design, flexible layout possibilities, and relatively quick download times. The document then provides tutorials and examples for creating multi-column CSS layouts using <div> tags and CSS properties like float, clear, position, etc.

Uploaded by

Deepak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
242 views

CSS Layout

The document discusses different types of CSS layouts including CSS-only layouts, table-based layouts, and hybrid layouts using both tables and CSS. It provides examples of layouts using <div> tags with CSS positioning versus using HTML <table> tags. The benefits of CSS layouts are highlighted such as quick updates, consistent design, flexible layout possibilities, and relatively quick download times. The document then provides tutorials and examples for creating multi-column CSS layouts using <div> tags and CSS properties like float, clear, position, etc.

Uploaded by

Deepak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS Layout

___________________________________

Three Kinds of Layout


(you could run into any of these on the job):

1) CSS Only. This is the way web sites are being laid out now.
Downside: Browser issues
2) Table-based Layouts (old way to lay out web pages).
Cumbersome design process, slower download times, awkward code
3) Tables and CSS (transitional). As people transitioned to CSS, they sometimes
used tables as the layout foundation and CSS for styles within that layout.

Old & New

________________________________________________________

Left: Table Layout | Right: CSS positioning of <div> (like pods you can command)

<td>

<div>

(each one of
the areas in
this layout
would be a
table cell)

(each one of the


areas in this layout
would be a <div>)

Benefits of CSS Layout over Tables:


Quick update of many pages at once
Consistent design from page to page
More flexible layout possibilities
Relatively quick download times
Options for relative and absolute positioning
3 Kinds of CSS content:
Fixed, Liquid (expands w/ browser), Elastic (changes em-size)

About divs
What is a <div> tag?
1) <div> is the division tag, creating a division in the page.
Think of it as a pod you can command with its own styles
2) Or, think of a div as a wrapper that you place around content
(e.g., main container, header, side bar, content area, etc.)
3) A <div> inside another <div> is nested. The wrapper is the parent.
Whats so Cool About divs?
Whats cool is that you can position divs like pods on an HTML page in order to lay
out your content (e.g., header, sidebar, etc.). Inside each div, you can have different
styles. For example, inside the header div, you might want to have a navigation bar
with links that are blue text with no underlines. However, in the main content area,
you may want your links to be underlined black text. Etc.
Two Ways to Create a div
1) Highlight some content and then go to Insert>Layout Objects>Div Tag
(notice that the wrapper wraps around the content you selected)
2) Open the CSS Styles panel (Window>CSS Styles).
Click the All button in the panel.
Click the + button at the bottom of the panel to create a new style
Select style type (e.g., class style) and name your style (e.g., .header)
Set your properties for the div (e.g., background color, font, etc.)
Click your cursor on the page and insert the div (Insert>Layout Objects>Div Tag)
Review of Styles
Class, tag, I.D., and Compound styles are actually selectors (we select what to
attach a style to).
Tag selectors: styles get attached to tags such as the <body>, <p>, or <h1> tag
Class selectors: Can be applied multiple times on a page (.redboldtext), by hand to
individual elements.
I.D. selector: can be used only once on a page, used for foundational elements (e.g.,
#header, #sidebar)
Compound selectors: combine two or more styles to apply to a specific div (for
example, if you want links in your side bar to be different than links in your header,
you would create a compound style called something like #sidebar a:link. Another
would be #sidebar a:visited, #sidebar a:hover, #sidebar a:active.

Tutorial
This tutorial teaches float layout (columns are created by floating left and right).
This is a commonly recommended method for CSS layoutits sort of like rigging
your code to do something it wasnt exactly originally intended for, but it works so it
has become standard practice. You will need your preferences to be set properly (see
CSS intro).
For this tutorial, you will need the graphics found at
www.julietdavis.com/COM263/tutorials/CSSlayoutgraphics.html. Or you can use your
own (you will need a background graphic that repeats, a header graphic 760 x 150, a
bullet graphic).
Note: This tutorial creates the divs first and then inserts graphics and other
elements. Another option is to create one div at a time and insert all content into
each one before the next one is created.

1 - Create divs for a Layout

(speed test)

Create a container <div>


1) Create and save an HTML page in your root directory.
2) Open CSS Panel and click on New Style (+). See the dialogue box open:
Selector Type: I.D.
Selector Name: #container
Style Definition: (create a new style sheete.g., mystyles.css
and place it in your root directory)
Click O.K.
3) Give it the following properties:
BOX: Width: 760, Height 900 (so we can scroll down)
Margin Top: Auto (Save for All) this margin floats the div center in the
browser (do not confuse this with the Box setting that floats a div left or
right of another <div>)
4) Go to Insert>Layout Objects>Div Tag
5) When the dialogue box pops up, select I.D. container. You will see a pod-like area
open on your page according to specifications.
Create a Header div
1) Position your cursor inside of the container div in the upper left corner, by clicking
into the text that says Content Goes Here.
2) Header: Go through the steps above that you used to create a container div,
except this time call the I.D. div #header.
3) Give it the following properties: BOX 760 x 150.
4) Go to Insert>Layout Objects>Div Tag
5) When the dialogue box pops up, select I.D. header. You will see a pod-like area
open on your page according to specifications.
Create a Side Bar div
1) Position your cursor in the upper left underneath the header. To do this, click on
the outline of the header div and then click your right arrow key once. Then, hold
down your shift key with one hand and space down once with your other hand, using
the enter key.
2) Go through all steps to create an I.D. div and call it #sidebar.
3) Give it the following properties:
Box: 150 W x 300 H, Float Left, Padding 10 px

4) Go to Insert>Layout Objects>Div Tag


5) When the dialogue box pops up, select I.D. sidebar. You will see a pod-like area
open on your page according to specifications.
Create A Main Content Area Div
1) Click on the side bar (an outer edge) to select it.
2) Click your left arrow once so that the cursor is blinking on the left of your side
bar.
2) Go through all steps to create an I.D. div and call it #maincontent.
3) Give it the following properties: Box 600 W x 500 H, float right (and any other
styles you want).
4) Go to Insert>Layout Objects>Div Tag
5) When the dialogue box pops up, select I.D. maincontent. You will see a pod-like
area open on your page according to specifications.
Insert a Navigation Bar Div using Relative Positioning
We have just learned how to create CSS layout using the float technique (float left,
float right). Now we are going to learn about relative positioning, which allows you
to place a smaller div inside a larger div in an exact position relative to that larger
(parent) div. For example, lets say you have a header div created. You could
position a smaller navigation bar div within it. Heres how:
1) Position your cursor inside the header <div> by placing your cursor inside the
Content Goes Here text. You are going to create a long
horizontal <div> at the inside bottom of it, to hold some buttons across the top.
2) Take all of the steps you know how to (above) to create a new <div> called
#navbar with the following specifications: BOX 760 W x 30 H,
Positioning: Type Relative, Top 120 px;
3) Go to Insert>Layout Objects>Div Tag
4) When the dialogue box pops up, select I.D. navbar. You will see a pod-like area
open on your page according to specifications.

2 - Create Content for Each div


Container Content
Open your #container and set the following properties:
BACKGROUND: Browse for image (bg_white.gif) and Repeat on y axis.
Header Content
Open your #header and set the following properties:
BACKGROUND: Browse for header graphic image, no repeat.
Nav Bar Content
Open your #navbar div and set the following properties:
1) Background: (any color you like)
2) Create any kinds of buttons or links you like, including rollovers or spry menus.
3) For text links on a nav bar, create a compound divs called #navbar a:link,
#navbar a:visited, #navbar a:hover, #navbar a:active. Indicate the colors and styles
you want (e.g., no underline, hover color, etc.). The compound div allows you to
indicate those link colors only for the nav bar area.
Sidebar Content
Open your #sidebar and set the following properties:
Type: Verdana 12 pt.
Background: #CCCCCC (light gray)
List: bullet.jpg

Try Various Side Bar Buttons


1) ul (Insert>Text>ul)
2) Spry Menu Bar Vertical (Insert>Spry>Spry Menu Bar).
Use properties inspector to add, delete, and change buttons.
Use CSS panel and select the spry .css document to change
properties such as colors, rollover, etc.
3) Flash Buttons (Insert>Common>Media)
4) Custom Rollover Buttons (use the one provided or create your own in Photoshop
and insert theminsert>Common>Image>Rollover Image)
Main Content Div
Continue to add content areas inside of other content areas to complete a layout.
For example, create divs inside your main content area for images and text. Try
using relative positioning; you can even overlap <divs>.
Create a Background for Entire Browser Area
To create a background behind the floating container, you can create a tag style for
the body tag and indicate a color or background graphic of your choice.
Link Your New .css sheet to a new page:
1) Create a new HTML page.
2) In the CSS Panel, select the link icon.
Check out www.csszengarden.com for design ideas for your web site.

Other Options
3-column Layout
The above layout we created is called a float layout because it floats the main divs
left and right. Books and tutorials have many different ways of teaching float layouts,
but here are some techniques below:
1) For 2-column layout (above), we floated left and floated right
2) For 3-column layout (or more), it can work to start with the left column on no
float and then to set the middle and right-hand column on float left (it makes no
sense, since they are positioned to the right of the first column, but it works).
Footers
1) To add a footer, space down and set no float, but set Clear to Rt. What this does
is it stops floating.
AP divs (with Absolute Positioning) Optional info
AP divs have absolute positioning, meaning they dont move, float, etc.they stay
put. The drawbacks: 1) you can only use them for web sites that start in the upper
left of the page and dont float to the middle when browser opens, and 2) many
browsers dont support them. So, theyre pretty much not a great idea these days.
To create a style for one, select advanced and call it #absolute.
TYPE: absolute (yes), relative (to HTML)
Insert AP div using button on insert menu. Apply this style using property inspector.
Dreamweaver Layout Templates
Now that youve torn your hair out, check out the prefab layouts DW already has
when you select FILE>NEW. But notice that they are usually inadequate and
cheesythey wont accommodate the exact layout you create.

You might also like