Class Notes


Backgrounds, Margins, and Rollovers

  1. CSS backgrounds
  2. CSS Margins & Padding
  3. CSS Rollovers
  4. CSS Positioning

CSS Backgrounds

To change the background color of your web page:
Ex: <body style="background-color: #6600FF;">

Background Image:
background-../: url('image location');
Ex: <BODY style="background-image: url('../images/bgimage.gif');">

Background Image - Repeat:
background-repeat options: repeat-y; repeat-x, no-repeat, OR repeat
Ex: <BODY style="background-repeat: repeat-y;">
Background Image - Position:
background-position: center; --top, bottom, left, right
Ex: <BODY style="background-position: center;">
Background Image - Attachment:

background-attachment: fixed; --scroll

Will the background stay fixed or scroll with the page

Ex: <BODY style="background-attachment: fixed;">

Experiment:
1) Create a new html page and experiment with using the above CSS attributes.
    Background Color
    Background Image
              Repeat on the Y
Position and
repeat

Margins & Padding

Margins are the space outside of an element. Padding is the space inside an element.

Margins to not add height or width to an element, but padding does. So if you set an elements height and width to 100px, and it's padding to 10px, it's total height and width will be 120px.

margins vs padding

You can set the margin or padding individually per side like this:

body {
      margin-top: 0px;
      margin-right: 10px;
      margin-bottom: 0px;
      margin-left: 10px;
}

Or, you can set them all in one line in (top, right, bottom, left) like this:

body {
      margin: 0px 10px 0px 10px;
}

If you leave some blank, it will use it's opposite side. The example below sets the top margin to 0px and the right margin to 10px - then, because the bottom margin isn't set, it uses 0px (set for top margin) as the bottom margin, and because the left wasn't set, it uses the left's margin (10px).

body {
      margin: 0px 10px;
}

Here are the CSS margin elements to help you adjust how things align to the edge of your page.

You can also use negative numbers:

body {
      margin-top: -2px;
      margin-left: -2px;
}

IMPORTANT NOTE:
Browsers set their own default margin and paddings to many elements, but it's a different amount for each browser. To combat this (and start with a clean slate), you should start your CSS file with the following code:
* {
      margin: 0px;
      padding: 0px;
      }

CSS Rollovers

<head>
      <style type="text/css">
            #smiley:link, #smiley:visited {
                  display: block;
                  width: 100px;
                  height: 100px;
                  background-image: url('images/smiley.jpg');
                  background-position: top left;
             }
            #smiley:hover, #smiley:active {
                  background-position: bottom left;
            }
      </style>
</head>

<a id="smiley" href="#"></a>




The Example:




The Explanation:


The anchor: First we create a link (anchor), and give it an id. The id lets us reference this specific link.

The style part 1: Then, using styles, we give it a width and height of 100 pixels. To do this, we must first define it as a "block" level element by using the "display" definition.
anchor
The image: We then create an image that is twice as high as the link. In the top half of the image is our "normal" state, and in the bottom, the "over" state.
smiley

The style part 2: We set the background image of the link to our newly created image, and set it's position to the top left.
Then, on it's hover and active states, we set it's background position to be BOTTOM left.
smiley normal state     smiley normal state    

This creates a window effect, where you're basically looking through the link, and only seeing one portion of the background image at a time.


Table-free layout - CSS Positioning

Position properties: static, relative, absolute, fixed, and inherit

Normal flow is the order in which the objects appear in your markup and how they nromally appear on the page (without be altered by the CSS positioning).


Static Positioning

This is the normal state. It stacks the elements one on top of the other. You can not use postioning attributes like top, bottom, etc.

<head>
<style type="text/css">

#block1 { 
	    position: static;
	    width: 100px;
	    height: 100px;
	    background: #FFCC00;
}
#block2 { 
	    position: static;
	    width: 100px;
	    height: 100px;
	    background: #FF7700;
}
#block3 { 
	    position: static;
	    width: 100px;
	    height: 100px;
	    background: #FF4400;
}

</style>
</head>
<body> <div id="block1"></div> <div id="block2"></div> <div id="block3"></div> </body>

Relative Positioning

is made up of three parts. First, the "position" - this is simply set by "position: relative;"

By setting something's position to "relative", you've told it you want to position it "relative" to where it would normally flow in the document.

To tell it WHERE you want to position it, use "top" or "bottom", and "left" or "right".

css absolute positioning In this example we've made a page with an image, then a paragraph of text.

The image has been set to "position: relative;" (which doesn't move it at all), "top: 30px;", and "left: 60px;"

This seems kind of backwards, because we didn't move it up OR left - but what you're telling it to do with "top", is - move this item X pixels FROM the top of where it would normally flow in the document. The same with "left" - we're telling it to move X pixels FROM the left of where it would normally flow.

You'll also notice that it overlaps the text - with position:relative, the elements "box" stays where it was, and keeps anything else from taking up the space, and moves the element where we tell it to go. Picture it as if we had a piece of paper - we set a photo in the top left, wrote some text next to it, and drew an outline around the photo. We could MOVE the photo (over the text), but it's outline would still be on the page, keeping the text from being able to move up in it's spot.

<head>
<style type="text/css">

#block1 { 
position: relative;
}
#block2 {
position: relative;
left: 10px;
bottom: 20px;
} </style> </head>
<body> <div> <img id="block1" src="../images/caricature.jpg" width="120" height="150" alt="char" /> This is my text and the block will be relative to this.<br /><br /> </div>
<div> <img id="block2" src="../images/caricature.jpg" width="120" height="150" alt="char" /> This is my text and the block will be relative to this plus I pushed it down 20 pixels from the top and pushed it 10 pixels from the left from where it was supposed to be. </div> </body>
You can use top:10px; bottom:10px; right:10px; left:10px; and change the pixels to whatever you want.

Absolute Positioning

(like relative positioning) is made up of three parts. First, the "position" - this is simply set by "position: absolute;"

To tell it WHERE you want to position it, use "top" or "bottom", and "left" or "right".

By setting something's position to "absolute", you've told it you want to position it "relative" to it's first positioned parent or ancestor (No, it's not a typo). With RELATIVE positioning, you position something "relative" to itself - with ABSOLUTE positioning, you position it relative to it's parent (specifically, it's first parent or ancestor that has a position set - relative or absolute). I'm sure that makes no sense - so lets try it out to make it more clear.

css absolute positioning In the picture to the left, we've created a document with an image, and some text. The image has "position:absolute;", and has "top:0px;" and "right:0px;".

The body is the images parent, and is the highest it will go to look for a positioned ancestor, so the image is positioned based on the <body> tag - 0px from the top, and 0px from the left.





<head>
<style type="text/css">

#block1 { 
position: absolute;
top: 0px;
left: 610px;
}
#block2 {
position: absolute;
bottom: 0px;
left: 200px;
} </style> </head>
<body> <div>
<img id="block1" src="../images/caricature.jpg" width="120" height="150" alt="char" />
The image is positioned absolute - in relationship to its parent (the body).
<br /><br /><br /><br /><br /><br />
</div> <div> <img id="block2" src="../images/caricature.jpg" width="120" height="150" alt="char" />
The image is positioned absolute - in relationship to its parent.
The parent is the thing it is inside of, BUT if its parent has not been set to position:relative; OR position:absolute; it goes up a level and looks for one of its ancestors that has position:relative; OR position:absolute; If it cannot find an ancestor that has its position set, it moves in relationship to the body.
</div> </body>

Let's see what happens when we put a div within a div and both have been set to position:absolute.

<style type="text/css">

#block1 { 
width:300px;
height:300px;
background-color:#FFCC00;
position: absolute;
top: 200px;
left: 300px;
} #block2 {
position: absolute;
bottom: 0px;
left: 0px;
} </style>
</head> <body>
<div id="block1">
<div>
<img id="block2" src="../images/caricature.jpg" width="120" height="150" alt="character" />
The image is positioned absolute - in relationship to its parent.
</div>
</div> </body>

 


CSS Float

According to W3Schools.com, "The float property specifies whether or not a box (an element) should float."

This is kind of like defining a "turtle", as "an animal that closely resembles a turtle" - not very helpful.

A good example to show what they mean by "float", is this - create a document with an image, then a paragraph of text. (Feel free to grab text from Lipsum.com (which is what most web developers user for "filler text".

You'll notice, like the first image below, your image will appear, then the text will appear to it's right. But, because an image is an inline element, it only resides in one line of text - even if it's 1000px tall, it will sit on a single line of text.

Normally, we would want that text to come up alongside the image - which is why we use "float".

css float none Without using float, if you put an image, then text, you'll notice the text starts on the baseline of the image (shown left). This is because an image is an inline element, so it resides within the line, regardless of it's height.

css float left This image (shown left) demonstrates what happens when we give the image the style of "float: left;". By "floating" the image to the left, we're telling it to allow things to slide up to the right of it.
css float right Using the same example as the previous image, we instead tell the image to "float: right;", which moves it to the right, and allows other elements to slide up to it's left.

Examples:

<style type="text/css">

#float1 
{
float:right;
} #float2
{
float:left;
} </style>
</head> <body> <div>
<img id="float1" src="../images/caricature.jpg" width="120" height="150" alt="character" />
The image has been set to float right and all the text will flow around the image.
This is not normally what happens because images usually take up a whole bunch
of space when they are put next to text. We have to tell the text to float around the image
specifically.
<br /><br /><br /><br /><br />
</div> <div>
<img id="float2" src="../images/caricature.jpg" width="120" height="150" alt="character" />
The image has been set to float right and all the text will flow around the image.
This is not normally what happens because images usually take up a whole bunch
of space when they are put next to text. We have to tell the text to float around the image
specifically.

</div> </body>