Good use of DIV CSS layout_html/css_WEB-ITnose

1. Introduction: Why is it unwise to use table layout?

The reason why tables exist in HTML is for one purpose only: to display table-like data. However, the subsequent border="0" allows designers to place images and text in this invisible grid. To date, tables still dominate the way visually rich websites are designed, but it hinders a better, more approachable, flexible, and powerful approach to website design.

2. Overview: What’s in it for me?

We’ll show you a way to work that will:

Make your pages load faster
Reduce your traffic costs
Let you modify the design More efficient and less expensive at the same time
Help your entire site maintain visual consistency
Make your site better found by search engines
Make your site more useful to viewers and browsers Affinity
When more and more people around the world adopt Web standards, it can also improve your competitiveness in the workplace (in fact, it reduces the risk of unemployment).

3. Problems caused by tables

Mix format data into your content.
This makes the file size unnecessarily large, and users must download such format information once for each page they visit.
Bandwidth is not free.
This makes redesigning existing sites and content extremely labor-intensive (and expensive).
This also makes it extremely difficult and expensive for us to maintain visual consistency across the entire site.
Table-based pages also greatly reduce their accessibility to people with disabilities and viewers using mobile phones or PDAs.

　4. Transitional design

　 Use margin and padding to replace redundant table cells and spacer GIFs.

Use link and @import to load styles. The former was used in early browsers, and the latter is for modern browsers.

　

　

　5. Structured markup: What you write is what you think , write whatever you think

Even though writing CSS is very simple, using CSS for typesetting really requires a different way of thinking than we are used to.

What we consider when doing layout is not “put this thing here, put that thing there”, but the category of information on the page and the structure of the information.

We use

tags to mark the most important headlines; sub-level items are marked with

, and so on; paragraphs are placed in

tags.

　This is what we call "structural markup" or "semantic markup".

Your content will no longer be placed inside tables and table elements, instead they will be placed in div elements. Also give your div elements an id or class, but this is to describe their content or functionality, not their appearance.

When you italicize an object, you probably want to either emphasize it or quote a title from a book, right? If it's the former, you should use ; if it's the latter, you actually have to use .

If an object is marked as bold, it should actually be marked as .

If you want to add a line break somewhere, this is probably to start a new beginning. If it's not the beginning, is it some kind of class (type) that appears in your site? In both cases above, you should replace
with CSS.

.foo {display:block}

Consider the situation where the content you need to navigate is some unordered links:

Use the

tag to edit them .

link1
link2
link3
link4
link5
Horizontal navigation bar
We can use CSS to control the appearance of this list on the web page.

By using display:inline we can create a horizontal navigation bar.

link1
link2
link3
link4
link5
This is the code used in the navigation bar above:

#nav1{
margin -top: 1em;
margin-bottom: 0.5em;
}

#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}

#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}

#nav1 li:first-child {
border: none ;
　}

Vertical navigation bar
link1
link2
link3
link4
link5
This is the code for the vertical navigation bar:

#nav2 {
background -color: silver;
border: solid 1px gray;
width: 8em
}

#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}

#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray; >　}

　#nav2 li:first-child {
　border: none

　}


　6. From playing with table tricks to following Web standards: consider everything


If you have divided the content of the site into categories, then it is time to analyze each page and break them down according to logical relationships.


Main navigation bar
Sub-navigation bar

Header and footer

Content

Related information

Others

Note that the analysis consists of nested tables, white space separators and A table structure composed of border elements (because we want to replace them with a much simpler table structure organized using div tags).


Once you have analyzed the structure of the page, you can start to peel back the surface and analyze the places in your current page code that can be converted into structured markup.

Being a perfectionist, kill all tags and spacer GIFs!
Likewise, get the and
tags together.
Remove appearance tags (bgcolor, background, etc.) from the table.
Change CSS calls that are purely for appearance (such as ) into structured markup.

7. Change the tags that describe appearance to tags that describe structure

You can use "find and replace" (or regular expressions), but the best way is in the browser Open this page and copy and paste the text into your HTML editor.

The key is to think in a structured way! Simply replacing the tag with is not enough.


Which is the most important item? Mark it with

. For less important ones, use

, and so on. Use

to mark paragraphs. Mark the navigation bar as an unordered list.

Select a DOCTYPE to use. (We recommend XHTML transitional. Unless you are a master at this, don’t use XHTML strict.)
8. Distribute your pages reasonably in divs
Place your main navigation bar Place it in a div with the id attribute set to mainnav, and place the sub-navigation bar in a div with the id or class set to subnav. The footer looks like this:
. As for the entire page, it is placed inside

.

Even if it’s not very cute now, once you start adding rules to the style sheet, it will become cute in no time.

9. It’s time to start writing CSS yourself

First, set a border for each div. For example: div {border: 1px dotted gray; padding: .5em} This can help you see the content inside completely and no longer need to scroll the screen.

First write CSS for the elements defined with (, ,

,

,

,

,
• , Etc. )
  Try to use context-sensitive or recursive descending selectors. This can make your markup clearer. For example: #subnav li {border: 1px solid black; padding: .5em; display: inline} will only affect list items within the div of your subnav.
  Test in as many browsers as possible, after all you can ask friends to help you test with their own browsers.