Posts Tagged ‘div’

CSS divs and IDs

Monday, September 14th, 2009

Div tags are the basic page layout element we are going to use to design our Web site. Each div can be given a unique identifying code, so that it can easily be controlled by a CSS rule. When using ID to control divs, you should remember that only one div with a given ID should appear on each page. If you already have a div “#container” on a page, do not add another div with the same ID.

Selectors for divs with an ID are written beginning with a pound sign: #

#container

Once a div has a rule defining it’s size, placement, color, etc, additional layout elements can be placed inside the div – much like a picture or text box in InDesign.

A good rule of thumb when using divs is to minimize the number of divs used on the page. Order the divs in a logical manner (such as header, then navigation, then content, then footer) and then use CSS rules to control their placement and appearance.

Tags: , , ,
Posted in Random Stuff |

Contextual Selectors

Monday, September 14th, 2009

Once you have created ID elements on your page, you will probably place additional elements in content inside these IDs. Contextual selectors allow you to control elements inside specific IDs.

Let’s say you defined all p tags to be Arial, size 12, black. However, you have a dark blue div (ID = sidebar) to hold navigation and news on the left side of the page, and the paragraphs inside the news box are showing as black text in a blue box – basically unreadable. You can create a style for the following rule:

#sidebar p

The space between #newsBox and p refers to the fact that the paragraph is inside the newsBox. You essentially read the rule backwards from right to left:

  • p controls all paragraphs;
  • space means inside of;
  • #sidebar refers to the div with ID sidebar

Spaces mean something in CSS rules, so be sure to use them in the proper context. Pun intended.

Tags: , , , , , ,
Posted in Random Stuff |

The Box Model

Tuesday, August 18th, 2009

It’s essential in CSS design to understand the box model. Basically, the box model defines how margins and padding affect the placement and size of an element on the page.

In short, you can create a space outside the element using margins. With a margin on the top of an element, we can push it down from it’s default position.

Inside the box, padding is used to create space between the edges of the box and the content it holds. Be careful, as horizontal padding actually increases the width of the box. When you define a width, you are actually defining the size of the content within the box – when horizontal padding is added, the overall box size expands, while the set width for content remains the same.

Tags: , , , ,
Posted in Web Design |

Clearing a container

Wednesday, February 4th, 2009

In theory, divs should expand vertically as the content placed within them grows. In theory.

In reality, if the content of a container div is one or more floated divs, with no “non-floated” divs or other content to reset the container div, the container div will not expand.

Why not? The float property tells the content that comes after the floated div (or img, or whatever) to wrap around the floated object. In the case of a container with floated column divs, the content that follows the floated divs is often the closing tag of the container div. Thus, the closing tag wraps around the floated divs, and appears to collapse (or doesn’t expand properly).

My solution is often to place an extra, empty clearing div right before the closing tag of the container. Create a new div Before end of tag “container“ and give it a class (not an ID) of clear. Once it’s on the page, delete the text inside the .clear div, and create a new class rule for .clear. The only declaration you absolutely need for that rule is to set the “clear” property to “both.”

This will force the clearing div to appear below the “tallest” floated div, and also force the closing tag of the container to appear below the clearing div.

Confused? Check out the video below!


Tags: , , , , , , ,
Posted in Podcast, Web Design |

CSS Review

Tuesday, October 14th, 2008

By way of review for everyone, here is a quick post going over the basics. These are the things you need to know when using style sheets.

1: Use an external style sheet. This file is going to be named just like any other web file, but with a .css extension. In theory, you will only need one .css file per Web site.

2: Minimize the number of divs you use. We all know the pain that is the Creighton CSS assignment. Break down your layout into a minimal number of divs, with a minimal amount of nesting. Create the divs to follow the flow of the page (container, navigation, sidebar, content, footer, etc). I recommend almost always using a #container div to surround your layout.

3. Give your divs IDs, not classes. Format your divs using IDs. Remember, classes are for small, nitpicky changes that can happen to any element on a page. Divs with IDs are all unique elements, and need their own rules.

4. IDs always start with “#” in your style sheet. A pound sign tells the browser that the rule is to be applied to the element with that ID. No pound sign, no formatting.

5. Classes always start with “.” in your style sheet. Again, the leading dot tells the browser the following is a class. Classes should be rare.

6. Redefined tags don’t have any leading character at all. You will need to redefine at least a few HTML tags in any site, specifically the body, a (including the pseudo-classes), and likely many p and heading (h1, h2, etc) tags.

7. If you want divs to be “side by side,” they will need to float. If you want two columns, both divs will likely need to be floated.

8. Spaces mean something. Don’t use spaces in the names of IDs or classes. 

#content p

In the above example, the space tells the browser that the rule will format any paragraph inside of the #content div.

9. Less is more. Try to work with a minimal set of divs and classes. This does not mean, however, that you will only have a few rules. Within those divs create as many text styles as you need by redefining paragraphs, headings and unordered lists (ul and li tags). This entire blog really only uses five divs.

10. Test your site in all browsers. Make sure you check your site in Safari, Firefox and Internet Explorer 6. IE6 is famous for breaking sites, and still, sadly, quite popular. This will require finding a Windows computer with that browser installed. One day, if all the planets align, I might be able to get a copy of Windows with IE6 in the Murphy lab.

Good luck. Be patient. This is not rocket science.

Tags: , , , , , , ,
Posted in Interactive Design, Web Design |