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. 

The Style Sheet

For the example site, I am going to be using a Centered 2-column set up, with a header and a menu div overlapping the header div to form the transparent menu effect.

Setting up the style sheet for the layout is going to consist of 5 DIVS and a BODY tag. I will also be using a style sheet for styling my fonts and A tags, but I like to keep my layout and styles separate, so these will be in 2 separate files.

Now I know a lot of designers/developers use Dreamweavers built in method for writing CSS, but I much prefer to write my own. For this example, I’ll supply the CSS code I have written, and leave the basics of adding a style out as I am assuming you know how to do this already.

The CSS for the layout

Our layout CSS code for positioning the DIV’s

Breaking the CSS for the layout down we start with the body element.

The Body Element in our CSS

This will remove the default margins set on the body, and assign a background color of white.

Next we have the div to hold and center the main elements.

div#wrapper{
position:absolute;
margin-left: -400px;
top: 0px;
left:50%;
width: 800px;
height: auto;
}

The Wrapper div to hold or Div’s

This has a fixed width and is centered using the negative margin technique. You can also center using the auto margin technique but I prefer to use this method when I have fixed width elements. Because this element is fixed width, you don’t need to specify a width for any other elements that you wish to be 800px as they will auto span the div they are nested in.

Next we have our Header div which will display the graphics.

div#header{
height: 100px;
border-bottom: 1px solid black;
background: url(../headers/rotate.php) #000 no-repeat center top;
}

The Header CSS

Here we set a height of 100px to accommodate our header graphics which if you remember were created to be 800x100px. No width is needed as a Div will automatically span across the available space. A bottom border has been declared just for ease of viewing, so you can see where the Header div ends. And finally we set our background image, color, repeat and position using the shorthand method of CSS. The line consisting of :
background: url(../headers/rotate.php) #000 no-repeat center top;

The background code in shorthand CSS

can also be written like:

background-image: url(../headers/rotate.php);
background-color: #000;
background-repeat: no-repeat;
background-position: center top;

The background code as Dreamweaver will want to write it.

Notice that our background-image url is pointing to a .php file and not an a .jpeg or .gif like normally. This is how the randomisation as a background image works. The .php file which we looked at earlier automatically generates the image name and file extension for us, allowing us to use it as a background element in CSS as well as in a normal <img> tag.

Next we set up our Menu div so it stacks above the header div. We do this using the z-index attribute.

div#menu{
z-index: 5;
position: absolute;
top:0px;
height:20px;
line-height: 17px;
}

The Menu Div

Here we set up a stacking order of 5 using z-index, this will keep the Menu div on top of the Header div. Absolutely positioned inside our Wrapper div we set it to Top 0px and give a height of 20px which will match our graphic’s faded black bar.

Again no width is needed as the div will auto span across the 800px, and finally by setting a line height of 17px we should have any text nicely aligned vertically within the div.

The last 2 div’s #leftpanel and #maincontent are provided as examples on different techniques of using positioning.

div#leftpanel{
position: absolute;
top:106px;
left:5px;
width: 200px;
border: 1px solid black;
float:left;
}
div#maincontent{
position:relative;
top: 5px;
float: right;
right:5px;
width: 580px;
border: 1px solid black;
}

2 techniques of how to position divs.

You will see that #leftpanel is absolutely positioned at top: 106px & left: 5px, and because this div is nested in a wrapper div, the absolute position relates to the 0,0 co-ordinates of the holding div and not the browser window.

#maincontent on the other hand is positioned relatively, and because it comes in order after the header div, it will position itself relative to that element. So our top measurement here is top: 5px. Which translates to 5px off the bottom of the header div. This will place the div directly in line with the #leftpanel at a Y co-ordinate of 106px, which you can easily figure out by looking at the sum below.

Our layout model

All we need to add now to our CSS, is some styling for the text and links. I’ll store these in a separate sheet to keep my layout separate. This is good practice if you wish to accommodate older browsers, as you can choose whether to link or import the style sheet at runtime. Now lets add some styles for the <p>, <a>, and <h1> tags. I’ve saved this as styles.css

body{font-size:10px;}
p, h1, a {font-family: Verdana, Arial, Helvetica, sans-serif;}
p{
margin: 0px;
padding: 0px;
font-size:1em;
}
div#leftpanel h1{
font-size: 1.8em;
background-color:#CCC;
padding:0px;
margin: 0px;
}
div#maincontent h1{
font-size: 1.8em;
background-color:#666;
padding:0px;
margin: 0px;
}
div#menu a, a:link{
padding: 0px 10px 0px;
border-right: 2px solid #000;
color: #fff;
text-decoration: none;
font-size:0.9em;
font-weight:bold;
}
div#menu a:hover{
color: #00FF00;
}

Our styles for the P, H1, and A tags

I start off the styles declaring a font-size of 10px for the body of the document. This allows us to use a relative em sized font for our other elements. This is particularly useful for viewers who like to scale their fonts up a little for readability. Using a fixed pixel sized font means that certain browsers will not scale the font size, so all your readers will be stuck with 10px.

Recommended reading: CSS Units by Matt Machel

Calculating em values is quite easy. With it being a relative font-size, it takes it value from the parent element, in this case the body tag. So 10px = 1em. 11px would be 1.1em, 12px would be 1.2em and so on.

I told you it was easy.

Removing the margins and padding from the p tag, makes it act like a shift+enter, rather than a default paragraph block with the empty line underneath, and this can also help with certain layout problems where alignment is off.

Next I add the styles for the H1 tags in each div, giving each a different background colour so you can categorise them easier.

All we need to add now is the styles for the menu a tags.

padding: 0px 10px 0px;

Left & Right padding set to 10px

border-right: 2px solid #000;

2px border acts as a separator like you typed the ‘|’ character

text-decoration: none;

Removes the underlines from the hyperlinks.

The rest of the CSS for the a tag is pretty self-explanatory, the only thing we change in the a:hover is the color of the text.