Web Page Layout With CSS - PowerPoint PPT Presentation

1 / 13

About This Presentation

Title:

Web Page Layout With CSS

Description:

There are less 'hacks' to code when considering compatibility for multiple browsers. ... Hacks/Workarounds/Bugs ... Hacks/Workarounds/Bugs. Again, in Internet ... – PowerPoint PPT presentation

Number of Views:283

Avg rating:3.0/5.0

Slides: 14

Provided by: mikewa

Category:

more less

Transcript and Presenter's Notes

Title: Web Page Layout With CSS

1
Web Page Layout With CSS

CSS Level 2 vs. Nested Tables
Mike Wallick 11/3/04

2
What is CSS?

CSS stands for Cascading Style Sheets. Most
common use is to remove tags from HTML
pages. This is also know as CSS level
1. Example highlighting a block of
text .highlighted background
rgb(255,255,0) font-weight bold
CSS level 2, also known as CSS-P (positioning),
uses style sheets to control a pages layout,
much like the traditional nested table approach.

3
Pros/Cons of Nested Table Layout

Every mainstream web browser that Im aware of
supports tables.
Simple table layouts are easy to learn and
implement if you already understand HTML.
Finding templates for traditional page layouts
(header/footer with three columns in between) are
relatively easy.

Complex nested tables are error-prone due to the
large amount of HTML code that must be used.
Tracking down bugs in nested table layouts can be
very difficult. For example, if you do have a bug
in your table layout, some browsers will render
the page correctly.
The size of the HTML the client must download can
get very large.
HTML is not cached, at least not in the way
images or style sheets are
Large, complex nested table designs take longer
for the browser to render.

4
Pros/Cons of CSS2

The HTML the client is required to download is
smaller, improving page load times.
Style sheets are downloaded once and cached like
images and JavaScript files.
You can truly separate presentation from content.
The entire look of your site can be changed by
applying a different style sheet (think, cell
phone browser, text-only browser, screen reader
applications).
Site maintenance becomes much easier, as the HTML
is much less complex and easier to debug.
There are less hacks to code when considering
compatibility for multiple browsers.

Complex style sheets can get very large, somewhat
offsetting the reduced HTML file size.
There are several browsers that support CSS2,
some better than others, but not every browser
does.
CSS2 is harder to learn than straight HTML.

5
Float Taming

The CSS2 float element is used, this case, to
style simple unordered (
6
Taming
This is very easy to overcome using a very simple
CSS rule / centercontent is the id of the
where the 3px padding occurs
/ centercontent height 50 Simply
specify a height for the problem .

Again, in Internet Explorer, there is a weird
margin bug. Notice the white space
next to the rounded corners. This only happens in
IE, and again, the fix is very
simple. Apply a negative 10 pixel margin, because
the rounded gifs are 10x10
pixels.

.menu_curve_left / margin top right bottom
left / margin 0px -10px 0px
0px .menu_curve_right margin 0px 0px 0px
-10px
class"submenu"187
Tool Set
class"menu_curve_left" src"images/bottom_left"
style"width10px height10px" alt"" /

ight" style"width10px height10px" alt"" /

src"images/dotclear" style"width10px
height10px" alt"" /
onmouseover"P7_autoLayers(0)"
11
Pros/Cons of this Layout

Content is fairly separated from presentation
The file size of the HTML has been reduced by
about 20 (14KB to 11KB)
The extra data the client is required to download
are delivered in a cacheable format.
Getting everything to line up pixel perfect was
relatively easy.
The layout grows and shrinks with the browser
window.
The layout works at 800x600.

The additional style sheets add an additional 6KB
of files to download.
The overall download size for the HTML and
stylesheets was a net increase to 17KB.
The minimum screen resolution is for the layout
to work perfectly is 1024x768 pixels.
Since IE doesnt seem to support the
overflowhide property, a Javascript workaround
must be used for the center to allow the
site to degrade to 800x600.

12
CSS Resources

Below is a list of web sites that I found
immensely useful in
designing this layout.
The W3C online resources reference
http//www.w3.org/Style/CSS/learningonlineThis
is where I started and is where I discovered most
of the sites below.
css-discuss Wiki's rounded corner page
http//css-discuss.incutio.com/?pageRoundedCorner
s
Not very practical, but the CSS Destroy
(http//www.literarymoose.info//css.xhtml) has
some pretty neat examples of CSS use/abuse.
CSS Zen Garden (http//www.csszengarden.com/)
shows just how powerful style sheets can be.
This is the very first article that I read and
started to work from http//www.digital-web.com/a
rticles/web_page_reconstruction_with_css/. It
talks about taking an existing tabular site and
converting it to CSS level 2.
An allegedly complete CSS2 reference site (I
havent read the whole thing) http//zvon.org/xxl
/CSS2Reference/Output/
A great CSS1 reference site with a little CSS2
thrown in (float, clear, etc.)
http//www.htmlhelp.com/reference/css/. I use
this one frequently.
http//www.positioniseverything.net/ - Probably
the best resource Ive found for explaining
CSS-specific browser bugs and how to overcome
them.