Eklog

Nov 07

CSS Tips

Web Development, CSS 1 Add comments

Here’s some tips and tricks from a few sites:

Positioning elements

Block vs. Inline Level Elements ( Webcredible.co.uk - More CSS tricks )

Nearly all HTML elements are either block or inline elements.

The characteristics of block elements include:

Always begin on a new line
Height, line-height and top and bottom margins can be manipulated
Width defaults to 100% of their containing element, unless a width is specified
Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>

The characteristics of inline elements, on the other hand, are the opposite of block elements:

Begin on the same line
Height, line-height and top and bottom margins can’t be changed
Width is as long as the text/image and can’t be manipulated
Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.

Centre aligning a block element ( Webcredible.co.uk - CSS tricks )

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:

#content {
width: 700px;
margin: 0 auto
}

For the pre-IE 6 versions you’ll have to add extra CSS rules:

body {
text-align: center
}

#content {
text-align: left;
width: 700px;
margin: 0 auto
}

This will then centre align the main content, but it’ll also centre align the text. To offset the second, probably undesired, effect we inserted text-align: left into the content div.

Vertically and horizontally centered ( Cssplay.co.uk)

Centering an image of unknown size in an outer container of known size (both horizontally and vertically) :

<style type=”text/css”>
/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
div.holder img {margin:0 auto; border:1px solid #aaa;}
</style>

<!–[if IE]>
<style type=”text/css”>
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]–>

Vertically aligning text with CSS ( Webcredible.co.uk - CSS tricks )

Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box.

[correction: Tankek.com: The only bit I might add is that due to the metrics of the specific font, the text may or may not appear precisely centred. As a result, you may need to nudge the text up or down a bit with a specific ‘vertical-align’ absolute length value.]

Positioning within a container ( Webcredible.co.uk - CSS tricks )

To position objects absolutely within a relatively positioned container assign the following CSS rule to the container:

#container {
position: relative
}

Now any element within this container will be positioned relative to it.

To position a navigation DIV exactly 30px from the left and 5px from the top of the container box, you could use this CSS:

#navigation {
position: absolute;
left: 30px;
top: 5px
}

In this particular example, you could also use margin: 5px 0 0 30px, but there are some cases where it’s preferable to use positioning.

Width & Height dimensions

Minimum Width for a Page ( Webcredible.co.uk - More CSS tricks )

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn’t understand this command, so we’ll need to come up with a new way of making this functionality work in this browser. First, we’ll insert a <div> under the <body> tag, as we can’t assign a minimum width to the <body>. Next, we create our CSS commands, to create a minimum width of 600px:

#container {
min-width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto” );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.

You might also want to combine this minimum width with a maximum width:

#container {
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? “1200px” : “auto”);
}

IE and Width and Height Issues ( Webcredible.co.uk - More CSS tricks )

IE has a rather strange way of doing things. It doesn’t understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height

This can cause problems, because we may need boxes to be resizable should we need to fit more text into them, or should the user resize the text. If we use only the width and height commands on a box, non-IE browsers won’t allow the box to resize. If we only use the min-width and min-height commands, though, we can’t control the width or height in IE.

This can be especially problematic when using background images. If you’re using a background image that’s 80px wide and 35px high, you’ll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text, the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with class=”box”:

.box {
width: 80px;
height: 35px;
}

html>body .box {
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS rule, but IE 6 will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one, which will override the values from the first rule, because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

CSS semantics

Two classes together ( Webcredible.co.uk - CSS tricks )

You can assign as many classes to an attribute as you like. For example:
<p class="text side">…</p>

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

Selectors

For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The selectors should be added in the following order:

#somewhere a { property:value; }

#somewhere a:visited { property:another-value; }

#somewhere a:focus,
#somewhere a:hover,
#somewhere a:active { property:another-value; }

:focus is integral to demonstrating which link will be activated upon pressing enter.

Use descendant selectors ( 456Bereastreet- CSS Tips & Tricks 1 )

Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. Take the following code structure:

<div id=”subnav”>
<ul>
<li class=”subnavitem”><a href=”#” href=”#”>Item 1</a></li>
<li class=”subnavitem selected”><a href=”#” href=”#”>Item 1</a></li>
<li class=”subnavitem”><a href=”#” href=”#”>Item 1</a></li>
</ul>
</div>

This could be accompanied by the following CSS:

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

You could replace all of the above with this markup:

<ul id=”subnav”>
<li><a href="#">Item 1</a></li>
<li class=”sel”><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>

and this CSS:

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

Keep it as clean as possible and both your markup and your CSS will be more efficient and easier to read.

Miscellaneous

Universal character sets ( Netmag.co.uk - 20-pro-tips )

Use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s head like this:

<meta http-equiv=”content-type” content=”text/ html;charset=utf-8” />

Tooltips tip ( Clagnut.com )

To create line breaks in tooltips just use the carriage return entity &#013; in your title attribute, for example:

title=”Kick-off : 20:00&#013;
Stadium : Rhein Energy Stadion, Cologne”

IE/Win will only display the first 64 characters of a title attribute.

Background ruler or grid ( Airbagindustries.com , Smileycat.com )

To view browser size variances, use an image of a ruler or a measured grid as a background image for any div.

Adding an image for list bullets

To use bullet point images add the following:
ul { list-style-image: url(”image.gif”); }

hoverspan:

To have the entire DIV containing a link react to the cursor ‘mouse-over’ rather than just the text link use the following code:

div#container a span {
display: none;
}

div#container a:hover {
background: #fff;
}
div#container a:hover span {
display: inline;
}

Invisible Text ( Webcredible.co.uk - More CSS tricks )

Invisible text can be especially useful for screen reader users or if using a print or handheld CSS file. Some screen readers will ignore any text that has the rule display: none assigned to it. Therefore, for screen readers users, a new approach is needed: position: absolute; left: -9000px.

written by mat