CSS, HTML, and some PHP - part 2
October 16th, 2008
Before I dive too deep into it, I’m going to give a brief overview of the files and folders. I’ll go more into them when building the site. You can download the basic set-up we’ll be working with here.
DONOTUPLOAD Folder
When working on a site, I like to keep a folder on my development machine, and in the site folder called DONOTUPLOAD. I keep all of my working files in this folder. They’re usually photoshop files. Sometimes there is only one, for the entire site, sometimes there are many if I have image templates for a gallery. I just add a new layer when I add a new image. This ensures that all images are the same size.
images Folder
This is my folder for images. I keep all the common images here, for like the header, background, etc. I use subfolders in this file for images that appear only on single pages. On really large sites, I’ll have subdirectories for section in the main site directory. Each subdirectory gets its own images folder.
js Folder
This is the folder where javascript files go. I always start off with a copy of jquery in it because for the most part, if I’m using javascript it’s going to be built off of the jquery library.
css Folder
This is pretty straight forward, but it is where I stash my style sheets. I always start off with 2, and try to stick to only having 2. The first is the one that I use to build the site off of. The second one, named ie6_style.css I link to from the header from a conditional statement. If I have to use any css trickery to make ie6 work then this is where it goes. Sometimes my css folder grows larger. I may need an additional conditional style sheet for IE7, sometimes I’ll break up my style sheet for jquery plugins.
includes Folder
If you’ve been following along up to this point, here is where you might run across something new. I use includes for things like the header, footer, and most often the main navigation of the site. This makes it easier because these items are almost always common to every page. If I add something to main navigation, it’s much easier adding it one time, to one file, then it is to add that link to every file in my site. Using includes means using PHP. This is why we installed Apache.
Inside the includes folder there are 3 files, one for the head, one for the foot, and one for the main navigation. If the main nav is horizontal and at the top, then I’ll include the main nav file inside the header include. The main nav include is currently blank, because we don’t have any pages yet. But the footer file, named inc.foot.php has some simple html in it, which we’ll add to. But right now, you’ll see a closing div tag, commented to show that it closes the wrapper div. There is also a closing body tag, and a closing html tag. Not too hard.
Now open up the header include named inc.head.php. Looks somewhat familiar. We see it starts of with a document declaration, in this case HTML 4. Then we see our opening html tag, our content declaration, standard meta tags used by some search engines like yahoo and msn, our title tag, a link to our style sheet, a conditional statement for the ie6 style sheet, we close our head, then we have the body tag, with an id (this will be used for navigation), and the opening of our page wrapper div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ >
<meta name=”keywords” content=”<?php echo $keywords; ?>” >
<meta name=”description” content=”<?php echo $description; ?>”>
<title><?php echo $title; ?></title>
<link rel=”stylesheet” href=”css/default.css” type=”text/css” media=”screen” charset=”utf-8″>
<?php echo $extras; ?>
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”css/ie6_style.css” />
<![endif]–>
</head>
<body id=”<?php echo $page; ?>”>
<div id=”wrapper”>
The confusing part, if any are the sprinkled bits of php. This is really basic - it is simply echoing - which is like printing - the value of a variable, which in php begins with the $ sign. Where we pass those values is in the actual page, because these are the unique parts of the header to every page.
index.php Page
This doesn’t look like an html page that you’re used to, but it is. Here at the top, wrapped in php tags are the variables that we’re passing to the header. At the end of those variables we’re inserting the code from our header file. Then we’ll see a comment for the content, which where we put in the stuff that is displayed on screen. Finally, we call the footer to close the page out.
<?php
$title = ‘Page Title’;
$page = ‘home’;
$keywords = ‘ ‘;
$description = ‘ ‘;
$extras = ‘ ‘;
include(’includes/inc.head.php’);
?>
<!– content here –>
<?php include(’includes/inc.foot.php’); ?>
We use an include for the footer for things like Google Analytics. Why copy and paste some javascript at the bottom of every page when you can include it in your footer?
If we look closer at the variables, the variable names are pretty easy to understand - most of them anyway. $title is the page title, that is inserted in the
If my navigation looks like this:
<ul class="mainNav">
<li><a class=”home” href=”index.php”>Home</a></li>
<li><a class=”about” href=”about.php”>About</a></li>
<li><a class=”contact” href=”contact.php”>Contact</a></li>
</ul>
Then I can set active states of those nav elements by telling them in my css that if the body id is home, and the class is home, do something. So my css may look like:
ul.mainNav {list-style: none; padding: 0; margin: 0;}
ul.mainNav a, ul.mainNav a:visited {color: #fff;}
ul.mainNav a:hover {color: #999;}
#home ul.mainNav .home, #about ul.mainNav .about, #contact ul.mainNav .contact {color: #666;}
I just told it that a normal link in my nav is white (#fff). When a link is hovered it is really light grey (#999), but when a link is active, as in you’re on the page that the link goes to, it is a medium shade of grey (#666). We do this because every page has a unique id attached to the body tag, in this case home, about, or contact. We then give each link a specific class, I usually name the class the same as the id to make it easier. So when a link with the class of home is displayed on a page with an id of home, it is medium grey - our active color, and all the other links would be white.
Sorry for the long post - but could you image going into all of this while building a site?
Tags: css for active navigation, css php html, nav css
This entry was posted on Thursday, October 16th, 2008 at 12:19 pm and is filed under CSS, php. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Jason Says:
Jason Says:
Josip Says:
Leave a Reply