CSS Solution

Positioning with DIV

2008-07-12T02:05:00.000-07:00

This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.
1. position:static
The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.
#div-1 {
position:static;
}
2. position:relative
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
Let’s move div-1 down 20 pixels, and to the left 40 pixels:
#div-1 {
position:relative;
top:20px;
left:-40px;
}
Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That’s because div-1 still occupies that original space in the document, even though we have moved it.
It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.
3. position:absolute
When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
Let’s move div-1a to the top right of the page:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.
Also notice that div-1a was positioned in the top right corner of the page. It’s nice to be able to position things directly the page, but it’s of limited value.
What I really want is to position div-1a relative to div-1. And that’s where relative position comes back into play.
Footnotes
There is a bug in the Windows IE browser: if you specify a relative width (like “width:50%”) then the width will be based on the parent element instead of on the positioning element.
4. position:relative + position:absolute
If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
5. two column absolute
Now we can make a two-column layout using relative and absolute positioning!
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.
But wait - what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?
6. two column absolute height
One solution is to set a fixed height on the elements.
But that is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
7. float
For variable height columns, absolute positioning does not work, so let’s come up with another solution.
We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it’s the only tool we have).
#div-1a {
float:left;
width:200px;
}
8. float columns
If we float one column to the left, then also float the second column to the left, they will push up against each other.
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
9. float columns with clear
Then after the floating elements we can “clear” the floats to push down the rest of the content.
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
10. Disclaimer & Resources
These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are many).

Stylizer

2008-07-09T08:22:00.000-07:00

Stylizer (Windows)
Two things make Stylizer a slightly different mindset than the others: it uses a grid interface instead of a text editor, and it has Firefox and IE embedded, so when the user changes the CSS, it’s propagated right away to the browser. The grid system makes CSS feel like “CSS on rails”, because it makes it impossible to have any CSS errors. It lets Stylizer do things such as a Firebug-like element inspector that lets the user diagnose and edit in the same place, and an editable, spotlight-style filtering system.

CSS Editor Screenshot

In Stylizer dimensions can be adjusted on the fly. To change a height, a margin, or a background-position, the user can literally click on the value, drag the mouse around, and watch the element be manipulated in real time. Colors are the same. The user can click on them, drag the mouse, and see the color of the text, background, or border change in the browser, in real-time, creating a “Photoshop for the web” type feeling. Stylizer Basic is free. The premium version (Price: $69.95) isn’t that different, however in a free version it’s impossible to filter a style sheet to only show rules with specified content.

External Style Sheet

2008-07-04T22:56:00.000-07:00

This will be very useful when we have so many styles defined. We will want to take all the styles in to a different file. That's what we do in External CSS. We take all the styles in a external file and map it with the html page.

Example:
We will put the following style in a text file say mystyle.css

In our head we will link to the external style sheet using the tag link in header portion
Tag:

<'head>
<'link rel="stylesheet" type="text/css" href="mystyle.css"/>
<'/head>
(Note : ignore the "'" text )
The names used for user defined styles should not belong to any html tag. We set the style for the tag using the attribute "class".
EX1:
MY STYLE
Result1: MY STYLE

EX1:
MY STYLE
Result1: MY STYLE

CSS Sprite Navigation Tutorial

2008-06-30T11:21:00.000-07:00

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

HOW DOES SPRITING HELP?
Sprite images takes the many images of a navigation and pushes them all into one larger image. Although the larger image may be significantly bigger than the individual buttons, you can usually save some size from all of the images added together. More importantly however, is the fact that the server only has to load one image to view your site navigation. This can greatly minimize server connections and can take seconds off of your load time. This technology has saved companies like apple and yahoo thousands of dollars a month on server requests.

1) GETTING STARTED IN PHOTOSHOP
I have started by designing my navigation in photoshop, slicing up my images and then combining my slices. Each button looks like this:

2) WHIP-UP SOME HTML
After collecting all of my images I dive into writing some simple html for the navigation. Here is what it looks like.

Putting your navigation in a ul list helps organize your navigation and makes it much easier to change and edit through css. Each button has been given a class which is easily defined and easy to edit in the css file. To set a button to active you simply add _a to the class name. Have a look at my services button as an example. Now lets take a look at the meat of the navigation… the css.

3) STIR A LITTLE CSS INTO THE MIX
Each button has a style for it’s 3 different states. Here is what the about button looks like:

a.navAbout, a.navAbout_a {
display:block;
float:left;
width:148px;
height:58px;
background: url(”../images/about_button.jpg”);
}

a.navAbout:hover {
background: url(”../images/about_button.jpg”) 0 116px;
}

a.navAbout_a {
background: url(”../images/about_button.jpg”) 0 58px;
}

The first navAbout defines what the button will look like. This defines the width and height of the button and the background image.
The hover state uses the same width and height, but shifts the x and y coordinates of the background image to reveal the rollover state of that sprite. The same goes for the active state of the image.
The css is a little more complex, but still fairly easy to follow. Have a look and good luck. Feel free to use this navigation anywhere you like, and if you think of it post a comment or shoot us an email letting us know.

The Display Property

2008-06-28T02:34:00.000-07:00

A key trick to the manipulation of HTML elements is understanding that there's nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser's default visual representation of most HTML elements consist of varying font styles, margins, padding and, essentially, display types.

The most fundamental types of display are inline, block-line and none and they can be manipulated with the display property and the values inline, block and none.

inline does just what it says - elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline.
block puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line.
none, well, doesn't display the element, which may sound pretty us
eless but can be used to good effect with accessibility considerations (see Accessible Links), alternate stylesheets or advanced hover effects.

The original default style-sheet for this site for example, manipulates a few traditionally in-line and block-line elements to fit the design.

h1 { display: inline; font-size: 2em; }
#header p { display: inline; font-size: 0.9em; padding-left: 2em; }

This enabled the title 'htmldog.com' and the tag-line to be displayed next to each other rather than above and below each other while maintaining optimum accessibility.

#navigation, #seeAlso, #comments, #standards { display: none; }

The above code is used in the print-only styles to basically 'turn-off' those elements, such as navigation, which are insignificant to the single page.

display: none and visibility: hidden vary in that display: none takes the element completely out of play, where as visibility: hidden keeps the element and its flow in place without visually representing its contents. For example, if the second paragraph of 3 were set to display: none, the first paragraph would run straight in to the third whereas if it were set to visibility: hidden, there would be a gap where the paragraph should be.

CSS Property: border-style, border-top-style, border-right-style, border-bottom-style, border-left-style

2008-06-28T02:17:00.000-07:00

border-style specifies the style of an element's complete border.
border-top-style specifies the style of an element's top border.
border-right-style specifies the style of an element's right border.
border-bottom-style specifies the style of an element's bottom border.
border-left-style specifies the style of an element's left border.

Possible Values

none - no border.
dotted - A series of dots (IE will display this as dashes if the border width is one pixel).
dashed - A series of dashes.
solid - A solid line.
double - Two solid lines.
groove - Patterned border that is supposed to represent a carved groove (opposite of idge). Renders differently in different browsers.
ridge - Patterned border that is supposed to represent an embossed ridge (opposite of roove). Renders differently in different browsers.
inset - Patterned border that is supposed to represent an inset depression (opposite of outset). Renders differently in different browsers.
outset - Patterned border that is supposed to represent an outset extrusion (opposite of inset). Renders differently in different browsers.
hidden - Used with tables. Same as "none", except where there are conflicting borders. Not supported by IE.
border-style can have:
one value, such as solid, to specify the style of the entire border
two values, such as solid dotted, to specify the style of top/bottom (first value) and right/left (second value) borders
three values, such as solid dotted dashed, to specify the style of top (first value), right/left (second value) and bottom (third value) borders
or four values, such as solid dotted dashed groove, to specify the style of top, right, bottom and left borders respectively

Example

.curtains { border-right-style: solid; }

.blinds { border-style: dotted dashed; }

CSS Property: background-repeat

2008-06-28T02:15:00.000-07:00

Specifies how a background image will repeat itself within a box.

Possible Values

inherit
repeat (default) - tiled, repeating the image both horizontally and vertically.
repeat-x - repeating the image horizontally only.
repeat-y - repeating the image vertically only.
no-repeat - not repeating the image at all, showing just one instance.

Example

#header { background-repeat: repeat-x; }

Background Images

2008-06-28T02:09:00.000-07:00

There are a number of properties involved in the manipulation of background images.

Luckily, the property background can deal with them all.

body { background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right; }

This amalgamates these properties:
background-color, which we have come across before.
background-image, which is the location of the image itself.
background-repeat, which is how the image repeats itself. This can be repeat (equivalent to a 'tile' effect across the whole background), repeat-y (repeating on the 'y-axis', above and below), repeat-x (repeating on the 'x-axis', side-by-side) or no-repeat (which shows just one instance of the image).
background-position, which can be top, center, bottom, left, right or any sensible combination, such as above.

Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results, such as shaped corners.

It is easy to get carried away with background images and plaster them all over your web pages. Some visually hyperactive people might believe it looks good to have a full-on brightly coloured photograph tiled across the background of a page, giving the user a Mensa-esque challenge in deciphering the foreground text. This is an extreme example, but the fact is that the most user-friendly, readable text is black on a plain white background or white on a plain black background (there is also a suggestion that a slightly off-white or off-black background is better as this reduces glare).
So, the best use of background images is either to use them where there will be no content over the top or making the background image very light, which would also reduce the file size of the image, because there should be less colours involved (supposing you are using an indexed-colour format, such as GIF).

Pseudo Classes

2008-06-28T02:02:00.000-07:00

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.
link is for an unvisited link.
visited is for a link to a page that has already been visited.
active is for a link when it is gains focus (for example, when it is clicked on).
hover is for a link when the cursor is held over it.

a.snowman:link { color: blue; }
a.snowman:visited { color: purple; }
a.snowman:active { color: red; }
a.snowman:hover { text-decoration: none; color: blue; background-color: yellow; }

Grouping and Nesting

2008-06-28T01:59:00.000-07:00

Grouping
You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.
For example, if you have something like:

h2 { color: red; }

.thisOtherClass { color: red; }

.yetAnotherClass { color: red; }

You could make it:

h2, .thisOtherClass, .yetAnotherClass { color: red; }

Nesting

If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
For example:

#top { background-color: #ccc; padding: 1em }

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold; }

This is because, by separating selectors with spaces,

we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.
This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.

Class and ID Selectors

2008-06-28T01:35:00.000-07:00

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).
So the CSS might look something like:

#top { background-color: #ccc; padding: 1em }
.intro { color: red; font-weight: bold; }

The HTML refers to the CSS by using the attributes id and class. It could look something like this:

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever } will only be applied to paragraph elements that have the class 'jam'