Scribd
Upload
43 views20 pages

Web Page Layout: CS134 Web Design & Development

This document discusses different approaches to web page layout, including using tables vs divs, common multi-column layouts, and examples of CSS code for implementing two, three, and four column layout designs. It recommends using divs over tables for layout due to separation of structure and content, and covers techniques like floats, positions, and z-index to control element stacking and positioning. Examples are provided for left and right side menus, centered designs, and fluid multi-column layouts.

Uploaded by

Alfred Landrito
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
43 views20 pages

Web Page Layout: CS134 Web Design & Development

This document discusses different approaches to web page layout, including using tables vs divs, common multi-column layouts, and examples of CSS code for implementing two, three, and four column layout designs. It recommends using divs over tables for layout due to separation of structure and content, and covers techniques like floats, positions, and z-index to control element stacking and positioning. Examples are provided for left and right side menus, centered designs, and fluid multi-column layouts.

Uploaded by

Alfred Landrito
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

CS134 Web Design & Development

Web Page Layout

Mehmud Abliz
table vs. div

• table
– Pros: supported by all browsers
– Cons: bind style to content; hard to maintain
• div
– Pros: easy to maintain
– Cons: not supported by all browsers
• We recommend – div, reasons:
– CSS is to separate structure from content.
– Supporting most common/popular browsers are
enough. May be it’s time for some people to
upgrade their browsers.
Common Layouts

• Variable width content:


– 2 columns - left menu
– 2 columns - right menu
– 3 columns
• Centered (fixed width content):
– 2 columns
– 3 columns
• 4 columns (fluid/variable width)
• Many other …
2 columns - left menu
2 columns - left menu

#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
border:1px dashed #999;
background-color:#eee;
}
#Content {
margin:0px 50px 50px 200px;
padding:10px;
border:1px dashed #999;
background-color: #eee;
}
#Menu {
position:absolute;
top:100px;
left:20px;
width:150px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
}
2 columns - right menu
2 columns - right menu

#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
border:1px dashed #999;
background-color:#eee;
}
#Content {
margin:0px 200px 50px 50px;
padding:10px;
border:1px dashed #999;
background-color: #eee;
}
#Menu {
position:absolute;
top:100px;
right:20px;
width:150px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
}
3 columns - flanking menu
3 columns - flanking menu

.content {
position:relative;
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
padding:10px;
z-index:3; /* This allows the content to overlap
the right menu in narrow windows in good browsers. */
}
#navAlpha {
position:absolute;
width:128px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;
}
3 columns - flanking menu

#navBeta {
position:absolute;
width:168px;
top:20px;
right:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
}
z-index (or stack level)

• z-index: auto | <integer> | inherit


– Z-axis positions are particularly relevant
when boxes overlap visually.
– In addition to their horizontal and vertical
positions, boxes lie along a "z-axis" and
are formatted one on top of the other.
– Boxes with higher z-index stacked on top
of the boxes with lower z-index.
– Boxes with the z-index are stacked back-
to-front according to document tree order.
2 columns – centered, static width
2 columns – centered, static width

body {
text-align:center;
margin:0px;
padding:0px;
font:12px verdana, arial, helvetica, sans-serif;
}

#frame {
width:700px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
text-align:left;
border:1px dashed #999;
background-color: yellow;
}

#topcontent {
background-color: #eee;
}
2 columns – centered, static width

#leftcontent {
float:left;
width:500px;
background-color: green;
}

#rightcontent {
float:left;
width:200px;
background-color: red;
}

#bottomcontent {
background-color:#eee;
text-align:center;
}
3 columns – centered, static width
3 columns – centered, static width

body {
text-align:center;
margin:0px;
padding:0px;
font:12px verdana, arial, helvetica, sans-serif;
}

#frame {
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
text-align:left;
border:1px dashed #999;
background-color: yellow;
}

#topcontent {
background-color: #eee;
}
3 columns – centered, static width

#centercontent {
float:left;
width:400px;
background-color: green;
}
#leftcontent {
float:left;
width:175px;
background-color: red;
}
#rightcontent {
float:left;
width:175px;
background-color: red;
}

#bottomcontent {
background-color:#eee;
text-align:center;
}
4 columns - variable width
4 columns - variable width

#topcontent {
background-color: yellow;
}

#leftcontent {
position: absolute;
left:1%;
width:20%;
top:50px;
background:#fff;
}

#centerleft {
position: absolute;
left:22%;
width:28%;
top:50px;
background:#fff;
}
4 columns - variable width

#centerright {
position: absolute;
left:51%;
width:28%;
top:50px;
background:#fff;
}

#rightcontent {
position: absolute;
left:80%;
width:19%;
top:50px;
background:#fff;
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy