Blue Lobster Art and Design - Sacramento Web Design and Graphic Design » box model http://blulob.com Web and graphic design Wed, 29 Sep 2010 23:46:07 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Master Your Website Layout with these 6 CSS Properties http://blulob.com/2009/06/03/6-ways-play-css-layers/ http://blulob.com/2009/06/03/6-ways-play-css-layers/#comments Thu, 04 Jun 2009 04:51:11 +0000 Dawn Pedersen http://blulob.com/?p=3425

Fancy div arranging

Fancy div arranging

If you’re new to designing with CSS layout, it’s simple to get started with these six positioning properties:

  1. z-index
  2. position
  3. float
  4. clear
  5. top
  6. left

There are more positioning properties, but we’ll begin with these most practical ones.

To begin, here are two divs with very simple CSS rules. None of the special positioning properties have been applied yet (click on this image or any image below to view the live page.) We’ll call these the “simple” divs.

CSS divs with no special positioning

CSS divs with no special positioning

We’re using simple HTML too:

<body>
<div id=”box1″>
[text]
</div>
<div id=”box2″>
[text]
</div>
</body>

1. Z-Index

The z-index CSS property identifies how “close” or “far away” a CSS layer is from the viewer. In other words, width goes in one dimension horizontally, height adds a second dimension vertically, and z-index adds a third dimension on an axis perpendicular to the screen. This is useful when divs overlap. The lower the z-index (e.g. z-index: 1;), the further back a div is. The higher it is (e.g. z-index: 99;), the more forward it is. This technique requires that you set the position to relative (we’ll look at position in greater detail later.)

Below, I’ve adjusted the margins of the second div so that the two boxes overlap. The purple box has a z-index of 1, putting it behind the orange box which has a higher z-index of 2. Both have a position of relative.

Overlapping divs with different z-index values

Overlapping divs with different z-index values

Here’s what happens if we switch the z-index values of the two boxes: the purple box moves to the front.

Switch the z-index values

Switch the z-index values

2. Position

The position CSS property can be either set to static, relative, absolute, fixed. The default position is static.

  • Static divs get plunked down right where they are in the flow of the HTML.
  • Relative divs are like static divs but can be moved relative to the previous content.
  • Absolute divs get pulled out of the HTML flow and act independently of all other divs.
  • Fixed divs work like absolute divs with a twist: they stay in the same place in the browser window even when you scroll down.

We’ve looked at an application of the relative position above. Let’s go back to our simple divs and add absolute positions instead. Both divs are now positioned relative to top-left of the browser window instead of relative to each other.

Absolute positioning

Absolute positioning

A div with a fixed position stays in one place as you scroll.

Fixed positioning
Fixed positioning

Fixed positioning

Next: 3. Float

]]> http://blulob.com/2009/06/03/6-ways-play-css-layers/feed/ 8 3-Column Web Page Using CSS Layers in Dreamweaver CS4 http://blulob.com/2009/03/10/create-a-3-column-web-page-using-css-layers/ http://blulob.com/2009/03/10/create-a-3-column-web-page-using-css-layers/#comments Tue, 10 Mar 2009 16:38:36 +0000 Dawn Pedersen http://bluelobsterart.com/wordpress/?p=422

mini results

3-Column CSS Layout

Dreamweaver CS4Doing layout for Web pages with tables is so 1998. Tables should be used for data, not to arrange the elements on your Web page. A better method is to use CSS layers. They are much easier to format than tables, once you get the hang of it. But the best thing is that if you use CSS layers to design your site, you can make a site-wide layout change in the blink of an eye.

If you’ve never tried CSS layers for your site layout, try this one. Dreamweaver CS4 makes it a cinch, if you pay attention to the details.

P.S. If you do not have Firefox installed, I highly recommend you install it.

 

What You Should Know First

 

Step 1: Create the Body

We’ll build a Web page design essentially like the class Web site I built at nhsdesigns.com. First, we’ll set up a gray background behind it all, and set the font style. To do this, we will use CSS to redefine the formatting of the <body> tag.

  1. Create a new, blank HTML document in Dreamweaver.
  2. Save the file as index.html inside your CSS Layers folder.
  3. In the Document tool bar, change the Title to CSS Layers.
  4. Show the CSS Styles (Window > CSS Styles) and click on the All button.
  5. Click on the New CSS Rule icon.
    CSS Styles panle
  6. Use these settings and click OK:
    1. Selector Type: Tag
    2. Selector Name: body
    3. Rule Definition: New Style Sheet File
      New CSS Rule
  7. Save the style sheet file as main.css in your CSS Layers folder.
    Save Style Sheet File as
  8. In the CSS Rule definition for body box, use these settings and click OK:
    1. In the Type category, change the Font-family to Verdana, Geneva, sans-serif, the Font-size to 10px, and the Color to #000000.

CSS Rule definition for body

    1. In the Background category, change the Background-color to #CCCCCC (a light gray).

CSS Rule Definition for body

  1. Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

end of step one

 

Step 2: Create the Outer Container

Next, we’ll create the large white layer that contains everything else. Using this layer to contain the others layers will create a nice, 15-pixel white border around your page. To do this, we will create an ID selector, which can be used only once by a single div tag on the page. ID styles begin with a pound (#) sign.

  1. In the CSS Styles panel, click on the New CSS Style icon.
  2. In the New CSS Rule box, use these setting and click OK:
    1. Selector Type: ID
    2. Selector Name: #container
    3. Rule Definition: main.css
  3. In the CSS Rule definition for #container box, use these settings and click OK twice:
Category Subcategory Setting Value
Background Background color: #ffffff
Box Width 720 pixels
  Padding (UNCHECK same for all) Top 0
Margin (UNCHECK same for all) Top 0
Right Auto
Bottom 0
Left Auto
Border (same for all) Style solid
Width 15 pixels
Color #ffffff
  1. To insert the layer into the page, click inside the page and choose the following menu command: Insert > Layout Objects > Div Tag.
  2. In the dialog box, select ID: container and click OK.
    Insert Div Tag
  3. Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

end of step 2

 

Step 3: Create the Header

Here we’ll create a header area in which a banner image could go later. It will have a baby blue background, and have a 1-pixel white bottom border which separates it from the navigation bar.

  1. Click inside the #container layer. Delete the text that automatically filled the layer but leave your cursor inside the layer.
  2. Let’s try a quicker way to insert the Div tag:
    1. Open the Insert panel (Window > Insert).
    2. Make sure that Common is selected in the drop-down menu at the top of the panel.
    3. Click on the Insert Div Tag button.
      Insert Div Tag
  3. In the Insert Div Tag box, click on the New CSS Rule button.
    Insert Div Tag
  4. In the New CSS Rule box, use these settings and click OK:
    1. Selector Type: ID
    2. Selector Name: #header
    3. Rule Definition: main.css
  5. In the CSS Rule definition for #header box, use these settings and click OK twice:
Category Subcategory Setting Value
Background Background color: #22b5ff
Box Width 720 pixels
Height 220 pixels
Border (UNCHECK same for all in all 3 columns) Bottom Style solid
Width 1 pixel
Color #ffffff
  1. Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

end of step 3

 

Step 4: Create the Navigation Area

We need a rectangle below the banner for links. It will have a dark blue background and white text. It will also have a 1-pixel white bottom border, and 10 pixels of padding around its text. First, we need to tell Dreamweaver precisely where to put it (after the header div) by viewing the code.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just before it:
    </div>
    </body>
    </html>
    code view
  3. Click on the Design button on the Document tool bar.
  4. In the Insert panel, click on the Insert Div Tag button.
  5. Click on the New CSS Rule button.
  6. In the New CSS Rule box, use these settings and click OK:
    1. Selector Type: ID
    2. Selector Name: #navigation
    3. Rule Definition: main.css
  7. In the CSS Rule definition for #navigation box, use these settings and click OK twice:
Category Subcategory Setting Value
Type Color #ffffff
Background Background color: #005ac9
Box Width 700 pixels
Height 20 pixels
  Padding (same for all) Top 10 pixels
Border (UNCHECK same for all in all 3 columns) Bottom Style solid
Width 1 pixel
Color #ffffff
  1. Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

end of step 4

 

]]> http://blulob.com/2009/03/10/create-a-3-column-web-page-using-css-layers/feed/ 31