Part Time developer, as my main job is a bricklayer.Be the first to write a review
Free! - PHP and CSS: random images and CSS positioning
Until recently I was unaware of the power of CSS and Its ability to integrate with other languages. I always thought that styles were static and had to be coded into the style sheet.
It was with a visit to A List Apart when I stumbled across a PHP article about Random Images by Dan Benjamin. As I’m only a newcomer to PHP, I was interested enough to read on and found it to be a great article & script. Another blog style site Relatively Absolute is a perfect working example of the Image rotation script as it uses one for generating random header images much like the ones I’m going to be demonstrating here. In fact Absolutely Relative inspired me to write this article because I liked the transparency illusion so much.
Our HTML document
Setting up the display page is a simple matter of placing the div’s in the correct order and adding some filler text. Copy and Paste the code below, this can be saved with either a .html or a .php extension. I’ve saved mine as headers.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>DMXZone Random Images Illusion.</title>
</head>
<body>
<div id="wrapper">
<div id="menu"><a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">PRODUCTS</a> <a href="#">SUPPORT</a> <a href="#">CONTACT</a></div>
<div id="header"></div>
<div id="maincontent">
<h1>Headline #1 </h1>
<p>Today the world was rocked by a revelation that Dave Thomas of DMXZone is a bricklayer. Yes, the multi-talented, guru is in fact a builder.</p>
<p>some thought he should really have been awarded the Nobel prize for being an outstanding performer at the All-U-Can-Eat Ferrero Rocher championships last winter where he cruised home with an astounding 7,324 Ferrero’s devoured.</p>
<p> </p>
<h1> We depend on you </h1>
<p>Please rate our articles and other content on DMXZone. It will help us to give a more rapid and enjoyable experience if we have your feedback.</p>
<p> </p>
<p> </p>
<p> </p>
<h1>Headline #3</h1>
<p>and again in here until u get bored with headlines :)</p>
<p> </p>
<p>boring.......</p>
</div>
<div id="leftpanel">
<h1>Title 1 </h1>
<p>Some text for the title 1 story. lorem ipsum blah blah blah filler text.</p>
<p>Some text for the title 1 story. lorem ipsum blah blah blah filler text.</p>
<h1>Title 2</h1>
<p>Some text for the title 2 story. lorem ipsum blah blah blah filler text. Some text for the title 2 story. lorem ipsum blah blah blah filler text.</p>
<p> </p>
<p>Etc. Etc... </p>
<p> </p>
</div>
</div>
</body>
</html>
Our html code for displaying our example page.
Un-styled this will show the following in Dreamweaver.
Our un-styled html document.
Go ahead and link the style sheets to the document and see it change.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>DMXZone Random Images Illusion.</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
</head>
The HEAD with the 2 linked style sheets
Note: My CSS style sheets are saved in a folder called css
You will now see a somewhat distorted view in Dreamweaver. This is due to using the 2 positioning techniques, the relative technique renders incorrect, but is absolutely fine when viewed in a browser.
The somewhat distorted view of our CSS in Dreamweaver
But as promised, it will display fine in Mozilla Firefox and IE6 as the screenshots below will show you. If anyone has any problems with any other browsers, please let me know and I will edit the article. As of now, I only have access to the 2 mentioned browsers.
Our display in Mozilla Firefox
Our display in IE6. Notice the header image has changed, but maintains the transparency illusion.