Webforumz Newsletter - November 2007

FAQ

I have many pages for my website and when I add a menu item, I am stuck changing it on every pages! Is there an easier way?

It's high time you jump on the "includes" band-wagon! You're missing out on something so easy and simple to implement that could have saved you from replacing that "one word" in your menu on 20 different pages!!

The best option is to use the PHP include() function. It's so simple to implement, you will be hitting yourself for not asking earlier.

The Syntax


<?php include('directory/file.php'); ?>

How to use it

Here's your index.php file (note that all your files using the php include() function must have the .php extension)


...
<body>
<?php include('navigation.inc'); ?>
<div id="content">....</div>
</body>

And this would be your navigation.inc file (note that your included file can have the extension you want – .html, .php, .inc, .whatever)


<ul>
<li><a href="home.php">Home</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

There's is also the SSI version (Server-Side Includes). It is also the same syntax for ASP includes

The Syntax

Using a virtual path (most commonly used)


<!––#include virtual="/directory/page.html" ––>

Using a relative path


<!––#include file="page.html" ––>

How to use

Here's your index.shtml or index.asp file (note that all your files using the SSI or ASP include function must have either the .shtml or .asp extension)


  ...
<body>
<!––#include virtual="/navigation.inc" ––>

<div id="content">....</div>
</body>

And this would be your navigation.inc file (note that your included file can have the extension you want - .html, .asp, .inc, .whatever)


<ul>
    <li><a href="home.shtml">Home</a></li>
    <li><a href="services.shtml">Services<</a></li>
    <li><a href="contact.shtml">Contact</a></li>
</ul>

I have a wrapper and 2 floating divs but my border from my wrapper doesn't "wrap" around the floating div?

This is a common problem with Float-based layouts. The float's container doesn't want to "stretch" to accommodate the floating divs.

Likely you have something like this:

Clearing Floats

And the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
<title>Clearing floats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width: 800px;
    border: 2px solid #900;
    margin: 0 auto;
}

#content {
    float: left;
    width: 500px;
    margin: 10px;
    border: 1px solid #090;
}

#side {
    float: right;
    width: 180px;
    margin: 10px;
    border: 1px solid #009;
}
</style>

</head>

<body>

<div id="container">
<div id="content">Some content here</div>
<div id="side">A sidebard here</div>
</div>


</body>
</html>

The desired effect would be to have the box around two divs like so:

Clearing Floats

The cure?

Adding the overflow: hidden property to the container.

A very basic example:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
<title>Clearing floats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width: 800px;
    border: 2px solid #900;
    margin: 0 auto;
    overflow: hidden;
}

#content {
    float: left;
    width: 500px;
    margin: 10px;
    border: 1px solid #090;
}

#side {
    float: right;
    width: 180px;
    margin: 10px;
    border: 1px solid #009;
}
</style>

</head>

<body>

<div id="container">
<div id="content">Some content here</div>
<div id="side">A sidebard here</div>
</div>


</body>
</html>
Clearing Floats

How do I put text on an image in my HTML?

This is quite simple really: just apply the image as a background.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
<title>Clearing floats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#sometext {
    background-image: url(background.jpg);
    width: 300px;
    height: 200px;
}
</style>

</head>

<body>

<div id="sometext">Here's some text over my background</div>


</body>
</html>