X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Understanding CSS Layout in Dreamweaver CS6, Part 2

In the previous tutorial, Understanding CSS Layout in Dreamweaver CS6 – Part 1, we looked at Absolutely Positioned Elements and how to use them as part of your layout design. Following on from the previous tutorial we’ll look at the other three design principles, fixed, static and relative.


Fixed Position Elements

Fixed positioned elements are exactly the same as absolutely positioned elements apart from one main difference. Absolutely positioned elements are positioned to the document by their placement properties whilst fixed positioned elements are aligned to the browser. What do I mean by that? Well if we have a long document where we can scroll further down on the page we’ll notice that any elements that we’ve aligned will disappear off the page. In a fixed positioned element they’ll stay in view and will always be visible. Let’s give it a try!


Setup

First we need an HTML page with a lot of content. I’m just going to copy some dummy text or (lorem ipsum) text from loremipsum.net to generate a few paragraphs and headers and paste them into the design view so that we have some sample HTML. Enough content so that we can scroll up and down.

Pic 1


Now that we have the HTML page we need to add/create some AP elements and then we’ll convert them to Fixed positioned elements.

  1. Draw an AP div box in the top left corner of the page
  2. Give it a name in the properties box (e.g. Box1)
  3. So that we can see it, also give it a background colour (Bg color)

Now this is still an absolutely positioned element we now need to convert it to a fixed positioned element.

Pic 2


Converting our Absolute to Fixed

To convert our div from absolute to fixed we need to open the CSS Styles panel and choose the div id that we had created #Box1. At the bottom we can change the position from absolute to fixed or we can edit it from CSS Rule definition for #Box1 by double-clicking the #Box1 in the panel. There are many options and categories in the dialog box. Under positioning category on the left, you’ll find Position: property which on the drop down list you’ll find fixed.

Pic 3


Once you’ve chosen fixed you’ll notice that the layout had changed in design view. Don’t trust what you see in design view and rely more so on what it looks like in the browser. Alternatively you can have a quick sneak at what it will look like by viewing Live View as this renders the same as a browser.

Pic 4

Pic 5


Now when you preview this in the browser by clicking on Preview/Debug in Browser and you launch it in your favourite browser you can scroll up and down and you’ll notice that the box stays exactly where it is regardless of the scroll position of where you are in the document.

There are a few benefits to this. You can create a header that’s always visible regardless of where you are. You can create a menu on the right or left that’s always accessible or more annoying, you can have adverts that persist throughout the site, but then this could have a negative drawback to the people viewing your site. Here’s a live example of where this technique is used as a header: Twitter.

Pic 6


Creating a header

So how can we create a header using fixed like twitter. First we need to change the width of our box to 100% and the height to a fixed value e.g. 100 px. Whilst keeping the position: fixed this then provides us with the header. Also the Top and Left placement must be 0.

Pic 7


If you change the placement values to Bottom 0 and Left 0, you have then created a fixed footer instead. But remember, you can only have 2 placement values at the same time and remove the 0 value from top as it’s impossible to be zero from the top and zero from the bottom

Pic 8


Static Layout

A static position element is the default positioning of any element you add to the page. Any element that is assigned a position of static is part of the content and moves or flows with the content. Unlike absolute or fixed where they are taken out of the context of the content and placed on a layer of their own that sits on top of the content. 

Let’s add a static div and see how it relates to the content.

Going back to our basic HTML page that we had, we’re going to add a normal div which will by default be a position static.

Right underneath the Header 1, I pressed Enter to make some room and then in the Insert Panel underneath Layout category, I chose Insert Div Tag. A dialog box appeared giving us the option of class or id. Let’s give it an id of mystatic. 

Pic 9


As soon as you do that a dotted lined box appears with the text “Content for id “mystatic” Goes Here. Think of it like a paragraph that you can place content and change the appearance of it using CSS.

Let’s change its background colour, width and height. To do that, in the CSS Styles Panel, click the New CSS Rule button and make sure #mystatic is in the selector box. If it’s not, then type it in. # symbol represents an id name in the HTML. In Background category change the Background-color to a colour of your choice, then in box type in a width and height. I’m going to choose 200px and 200px. 

Pic 10


As soon as you click OK, you’ll notice that the changes have taken place. If we select the div by clicking on the outer edge we can cut and paste like any other content on the page and place it where we want and it’ll push down the other paragraphs or content to make room. As shown in the picture below where I’ve cut and paste it to a different location.

Pic 11


The Float

One more thing I’ll show you is the float. The float allows you to wrap text around the object. For example, if we wanted the text to appear on the right hand side of the box we can float the box to the left and the text will wrap around it. To achieve this edit the css rule in the CSS Styles panel by double-clicking it or clicking the pencil icon to edit it. So here I’m editing the #mystatic rule. Under Box category change the float to left. 

Pic 12


As soon as you’ve done that you’ll notice the text appearing on the right of the box. Try float right.

Pic 13


Relative

The last one that we haven’t seen yet is relative positioning. To be honest with you, static and relative are exactly the same apart from one noticeable difference. The difference is that static has no placement. What do I mean by that? You remember the placement values of top, left, bottom and right that we used with absolute and fixed? Well we can’t use these with static and if you do, they’re completely ignored as the placement is controlled by the flow of the document. If we wish to add placement to our static div then we need to make the div into relative. The word relative comes from that the position is relative to where it was, ie., if we had a box in a set position and we set the left to 50 px it would 50 px from where it was. Let’s try it!

Pic 14


Under Positioning category we changed Position: to relative and Top to 50 px and Left to 50 px and as soon as you click apply or OK you’ll notice that the changes have taken place where the box has moved down from the top by 50 px and from the left by 50 px. In a matter of fact the box has moved down by 50 pixels and right by 50 pixels but you’ll see a gap or space of where the box originally was.


Conclusion

Now that we’ve explored the basics of CSS positioning in Dreamweaver CS6, there’s a lot more to be covered!  The rest is more so on techniques and methods on how you can use the mechanics of CSS to create some complex layouts, but that’ll be in some future tutorials. So keep a look out for future updates!!


Tareq Fadel

Tareq Fadel | Articles by this author

Tareq has been developing and designing websites since the turn of the century and works with HTML5, CSS3 and JavaScript. He is a HTML5 advocate that is ever looking at the cutting edge technologies of the web. He is always experimenting and pushing the boundaries what can be done on modern, innovative websites through various JavaScript APIs. He is also a freelance developer and instructor at various different training centres throughout the U.K. teaching and developing course content for HTML5, CSS, JavaScript, Dreamweaver, Flash and ActionScript.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2017 macProVideo.com
a division of NonLinear Educating Inc.
Link