,
are all content containers. Tags like and were
introduced for CSS.
• As with HTML you can nest CSS tags. is specifically used to nest content
within a ….. container
The parts of a container will be familiar if you use HTML and are used with tables
and images/text placing.
Border Padding Margin
Image or text
Will be the contents of container
We are all familiar too with setting the margins on a piece of word-processed text.
The CSS Layout Selectors and their syntax
Margins
This works in the same way as margin in a word- processor, except that you can
simply specify ‘margin’ and this will give equal margins all round. Units of
measurement are the usual ones - in, em, pt, px etc
Syntax: margin
margin-left:
margin-right:
margin-top:
margin-bottom:
You can apply to any layout tag. If you apply to body tag and then p tag you will get
two margins so text/images will have extra indent
eg or
In Dreamweaver margins are set in ‘Box’ and you can set each margin to be the
same or different. If you want the container to be unique to the page you will need to
create different margin classes
Borders
With CSS you have a lot of flexibility with borders. The set up is similar to that found
in a word-processor.
You can set the border-width, border-color and border-style.
You can specify border-left border-right etc
Each border to a container can be unique
You can apply to any layout tag. , etc
Syntax:
border-width:
border-color:
border-style:
You can specify multiple options in one command
Eg
border-width: 0 0 0 2px; This gives only a left margin (T,B,R,L)
border-color: green blue yellow red;
border-top
You can specify only one border
Eg
border-right-color: gray;
border-right-width: 5px;
Border Style can have a number of values:
Dotted
Dashed
solid
ridge – stands out from the screen
grove – looks like a cut into the screen
hidden – hides the border. Can be used to hide one of the borders
outset – stands out from the screen
inset – indents the content into screen
none – does not set a border. Can be used for one of the sides
Padding
The space between the content and the border. Works in the same way as margins
with all the same ways to set up and measure it.
Syntax: padding:
padding-left:
padding-right:
padding-top:
padding-bottom:
You can apply to any layout tag. If you apply to body tag and then p tag you will get
two margins so text/images will have extra indent
eg or
In Dreamweaver padding is set in ‘Box’ and you can set each margin to be the same
or different. If you want the container to be unique to the page you will need to
create different margin classes
Setting the Dimensions
Container dimensions are vital ingredients of laying out a page using CSS.
Width
This sets up how wide the container (box) used to hold content will be.
You can set it up using the same sorts of measurements we are used to in CSS: % or
absolute figure (in pts, px etc)
Obviously need to be used in conjunction with other attributes such as margin and
borders
Can be used in a class statement in the head
This would appear as:
jon feels that…….
or else if embedded inline
paddingleft: 10px;
Height
If you don’t specify height the container expands to take in as much text as you type.
If you set a fixed height and then type too much text it spills over below the container.
Float
This is used to allow the flow of material around a container
If you specify left the material flows around the right and visa versa for right float!!
See the file testcss3.htm
Syntax
float: left; float: right;
Setting out the page – layout with CSS
You can set out a page entirely using containers and styles (see CSSlayout 1 & 2)
(1) You can place the containers simply by positioning their left hand and top
margins and placing them in the flow of the document .
You need some expertise to do this and will need to ‘nest’ containers within others
and to put them into the document using ‘div’ tags
-you use the commands margin-left: and ‘margin-right:
-in Dreamweaver these are set in the ‘Box’ category
See the file testcss3.htm
(2) Use Positioning
You can set the exact places where the containers will appear by using the CSS
tags/selector position
Syntax
position: absolute;
position: relative;
An example
position: absolute; top:10px left: 100px
Absolute positioning places the container at the exact co-ordinates specified relative
to the edges of the parent container
Relative positioning places the container at the co-ordinates relative to the position
of the container in the normal flow of the page.
See the file csstest2.htm for an example of absolute positioning
Here is the page code:
David
david is cool
Fred
susan
Here is the CSS file
The styles are set up as classes
}
.unnamed2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FF0000;
height: 237px;
width: 180px;
left: 17px;
top: 263px;
position: absolute;
visibility: visible;
background-color: #FFFFFF;
}
.unnamed3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #993366;
position: absolute;
visibility: visible;
height: 450px;
width: 78%;
left: 208px;
top: 50px;
background-color: #FFFFFF;
}
body {
background-color: #33FFCC;
}
.unnamed4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #009999;
position: absolute;
visibility: visible;
height: 40px;
width: 98%;
left: 19px;
top: 0px;
background-color: #99FFFF;
}
-->
Nesting
Nesting is putting one container within another
Container A
Container B
This is the code. The styles ‘containerA’ and ‘containerB’ will be defined in the CSS
in the Head of the page or in an external CSS file. The code simply places the styles
within the flow of the document.
This is content in container A
This is a container in container B nested within the one
with the coloured
background
The position of the containers is fixed from their left-hand margins. This is the code in
the head of the page.
#containerA {
background:#FFF3AC;
margin-left: 150px;
}
#containerB {
background-color: #FFFFFF;
float: left;
height: 150px;
width: 200px;
margin-left: 50px;
padding: 5px;
white-space: normal;
margin-right: 5px;
}
Using Dreamweaver for CSS layout
(1) Use the Box category to set the margins if you are not using positioning
(2) Positioning - with or without ‘layers’
Use the positioning category as shown below. You can set a variety of parameters
Visibilty
This attribute allows you to see or hide the container
Syntax
Visibility: hidden;
Visibility: hidden;
Visibility:inherit;
The meanings of hidden and visible are fairly clear. You would need to use javascript
to reveal it when you want it to show.
Dreamweaver Layers
These are entirely similar to the positioning tags/selectors.
Dreamweaver works the characterisics of these using javascripts.
Dreamweaver inserts code into the page without using CSS
Eg
Layers are not handled with uniformity in different browsers so it is best to position
within a CSS context
Other Positioning Commands
Z Index
Overflow
Clip
These characteristics can be understood in the context of Dreamweaver layers.
Go to the WebDevonline website to see a detailed explanation.
Layers explanation http://www.webdevonline.org.uk/Dreamw/layers1.htm
|