• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

CSS, DIVs and Layouts

 
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Can anyone explain these to me? I am teaching a web design class and always used tables for layouts. When I took a Dreamweaver class 2 years ago they mentioned DIVs but I didnt understand them enough to implement them in my web pages. Now I see it referenced here with layouts and CSS. I have dabbled with positioning (CSS) in my HTML pages but would like to use the better method in my websites and what I teach to my students
 
Ranch Hand
Posts: 71
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I think you should look around for CSS Layout tutorials and examples. Google them, there are many out there and you will find them helpful.
 
Author
Posts: 42
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Can anyone explain CSS, DIVs and Layouts?

This is a great question. In fact the answer to that question is one of the breakthrough design patterns I present in my book Pro CSS and HTML Design Patterns.

The "Section" design pattern is the basic building block of all CSS-based web pages. It is discussed in detail in chapter 13. The idea is that the <div> element semantically defines a document "divison" or "section". Within the division is a heading that identifies the topic of the division. Following the heading are one or more paragraphs containing the content of the division. This pattern forms the backbone of all content in XHTML documents. You can nest this structure by placing a division within a division.

<div class="section introduction">
<h2>Introduction</h2)
<p>This paragraph is about the introduction.</p>
</div>

The division is a block element. By default, a browser flows blocks vertically down the page. You can use CSS to alter how it flows. You can absolutely position it, relatively position it, or float it. Using these CSS techniques you can take structural content that is accessible and transform its layout to be visually pleasing.

Chapter 17 of my book shows how to create fluid layouts using an enhanced version of the Section design pattern. Fluid layouts can look just like tables if you want, but they adapt dynamically to the width of the browser. In desktop browsers, fluid divisions can line up side-by-side like columns in a table, and as the width shrinks (like on a cell phone), they will dynamically wrap around so that they are below each other like rows in a table. Fluid layouts can reproduce any layout you can imagine and they fluidly adapt to their environment.

Fluid layouts give you great flexibility, excellent accessibility, and search engine optimization. You can place divisions in your document in the order a person would read them from top to bottom. You can then use CSS to reposition these divisions to different locations on the screen for optimum layout (some divisions on the top, some on the left, some in the middle, some on the right, etc.

You can read the details about how to do this in my book. You can see examples at my book's website http://cssdesignpatterns.com

Especially check out the following examples in Chapter 17:
http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Floating%20Section/example.html
http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Float%20Divider/example.html
http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Fluid%20Layout/example.html
http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Opposing%20Floats/example.html
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic