Code written in CSS
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
I use the following bit of CSS to help visualize the structure of an XHTML (or HTML) document by putting a colored outline around the border of every element. At each level in the hierarchy the color changes so you can see when �??depth�?? changes.
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
I usually keep this block of rules at the top of a stylesheet, commented out with /*�?�*/, which I remove when I want to see the structure.
Make a condition with CSS. For instance if you have to apply different background-images to one particular DIV, in this case the mainContent as seen below in the CSS. You give an ID to the Body tag according to what page it is that will decide what image will go in the background of the mainContent DIV. (note: you can do this with as many properties as you want not just one). This works in both FireFox and Internet Explorer.
CSS:
body#aboutPage div#mainContent{
background-image:url(images/image1.jpg);
}
body#contactPage div#mainContent{
background-image:url(images/image2.jpg);
}
Here I show a method for generating pagination for search results and long list pages using semantically correct HTML and CSS.