The Ultimate Website Pt. 2
Published Sunday, April 02, 2006 in (X)HTML, CSS, PHP, Web Standards
Please note: "Ultimate" is only ultimate for so long. And I don't exactly do it like this anymore, but I still believe it's an OK beginners-guide to building a dynamic, easy-to-update web site.
If you haven't read part 1 of this article, i suggest you do so before you continue reading.
So, we have the main-structure for the "Ultimate Website". But it doesn't look very fancy does it? Here's where the CSS comes in.
I love designing with CSS, it really makes you think about every aspect of your website as you step by step go through all elements in your markup.
For this article i will create a centered, two-column layout, with a header on top, and a footer in the bottom.
Style.css
If i have loads of CSS-code for a website, i sometimes like to divide it in to several files. As i always want to include just one file (style.css) from index.php, i have to create style.css, and from there import all other CSS-files i want to use with @import. For this article, just one CSS-file will do though.
Remember, place style.css in your css/default/ directory so it will be included properly by index.php.
If you downloaded the zip in part 1, style.css should already be there.
/*
=== elements ===
*/
body {
background: #def;
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
color: #333;
line-height: 180%;
}
h1, h2, h3, h4, h5, h6, p {
margin: 10px 0;
padding: 0;
}
ul, ol {
margin: 0 0 0 30px;
padding: 0;
}
a {
color: #069;
text-decoration: underline;
}
a:hover {
color: #690;
text-decoration: underline;
}
a:visited {
color: #666;
text-decoration: underline;
}
a.selected {
color: #690;
text-decoration: none;
}
h1 {
font-family: Trebuchet MS;
font-size: 24px;
color: #369;
}
h2 {
font-family: Trebuchet MS;
font-size: 20px;
color: #123;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
hr {
display: none;
}
/*
=== IDs ===
*/
#site {
background: #f3f6f9;
margin: 10px auto;
padding: 10px;
width: 700px;
border: 1px solid #a3a6a9;
-moz-border-radius: 10px;
}
#header {
background: #fafafa;
height: 130px;
padding-top: 20px;
margin-bottom: 10px;
border: 1px solid #a3a6a9;
-moz-border-radius: 10px 10px 0 0;
}
#header p {
display: none;
}
#header h1 {
margin: 0;
padding: 0;
border: 0;
}
#header h1 a {
/* you'll have to create this file yourself */
background: url("logo.png");
display: block;
width: 400px;
height: 120px;
text-decoration: none;
text-indent: -10000px;
}
#nav {
background: #fafafa;
height: 30px;
border: 1px solid #a3a6a9;
}
#nav h2 {
display: none;
}
#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
background: #eee;
display: block;
width: 120px;
height: 26px;
padding-top: 4px;
text-align: center;
border-right: 1px solid #a3a6a9;
}
#nav ul li a:hover {
background: #f3f3f3;
}
#nav ul li a.selected, #nav ul li a.selected:hover {
background: #fff;
}
#content {
width: 500px;
float: left;
}
#sub-content {
width: 200px;
float: right;
}
#footer {
background: #fafafa;
clear: both;
text-align: center;
height: 60px;
padding-top: 10px;
border: 1px solid #a3a6a9;
-moz-border-radius: 0 0 10px 10px;
}
#footer ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#footer ul li {
display: inline;
margin: 0 2px;
}
Phew! A lot of code, but it's nothing really advanced. Let's break it down.
Everything above /* === IDs === */ i hope is pretty self explanatory. I just set some nicer values for elements that don't render that beautifully by default like paragraphs, lists and headings.
Now for the interesting bits.
#site
#site {
background: #f3f6f9;
margin: 10px auto;
padding: 10px;
width: 700px;
border: 1px solid #a3a6a9;
-moz-border-radius: 10px;
}
The #site-div is the container for all other contents of the website. It's what wraps around everything else, and so we set our main width, background colour and positioning in here.
First of all i set #site's background colour, after that i use margin: 10px auto; to give #site a top and bottom margin of 10 px (to give it some space between bottom and top) and a left and right margin of auto. In other words; centered. The rest is pretty basic like padding, width and border. I also use -moz-border-radius for FF users. If you don't use FF, try it now and see what -moz-border-radius does :).
After each change to the CSS-file i often update the website in the browser to see exactly what's happening. It's fun to see the site develop from pure (X)HTML into something colourful and nicer.
#header
The #header's styling is pretty basic, just some standard padding (to position the logo), height and border.
The margin-bottom is used to give the header and the navigation some space between them.
I hide the paragraph in #header using display: none; and set #header's <h1> to have no margin, padding or border. The <a> inside #header's <h1> is the one i use to include the logo. This way the logo will be clickable, and you can even make a mouse-over effect on it that works in IE aswell.
IE users may experience some flickering in links with background-images. You can resolve this by adding the following to your .htaccess file:
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
From: Caching in IE
Or, you could (in this case) simply move the background image from #header h1 a, to #header h1.
First thing we need to do is set the <a> to display: block; so we can change it's width and height properly.
Then i use background to insert the logo image (logo.png), and set width and height to whatever width and height the image has.
Now you should have a logo with some annoying text on top of it, use text-indent: -10000px; to indent the text minus 10 000 pixels (ie outside the screen). And make sure to set text-decoration to none, i've experienced some pretty weird errors with underlines going over the whole screen without it.
#nav
The #nav-div and its heading #nav h2 are nothing special, the reason i set #nav's height is because it's going to contain floated elements, and proper browsers don't wrap a containing element around it's floated children.
The <ul> has a left margin of 30px which i want to get rid of in the menu, I also don't want any dot or image next to my list-items.
#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
Seeing as the menu is a list, we need to use CSS to make it display horizontally, we do this by using float: left; which will cause every list-item to float to the left of the list-items beneath it. Thus appearing on one row.
#nav ul li {
float: left;
}
You could use display: inline; but if you do, you can't set width and height to what you want, and for this design we want to be able to do that.
Now, the actual styling of the menu is done in #nav ul li a, that is; the links. The reason being that :hover only works on the <a>-tag in Internet Explorer, and we want to have some neat mouse-over effects on our menu.
Again i set the <a> to display: block; so we can change its width and height.
I set a different background-color for a:hover and a.selected. In IE a.selected:hover gets a:hover's attributes, so i also set a.selected:hover to the same as a.selected.
#nav ul li a {
background: #eee;
display: block;
width: 120px;
height: 26px;
padding-top: 4px;
text-align: center;
border-right: 1px solid #a3a6a9;
}
#nav ul li a:hover {
background: #f3f3f3;
}
#nav ul li a.selected, #nav ul li a.selected:hover {
background: #fff;
}
#content and #sub-content
In order to get a two-column-layout, we have to float #content to the left, and #subcontent to the right. Setting their widths to 500 and 200 respectively, as #site's width is 700.
#content {
width: 500px;
float: left;
}
#sub-content {
width: 200px;
float: right;
}
And finally, the #footer
We don't want the #content and #subcontent to float on top of the #footer, so we have to set the footer to clear both floats using clear: both; Try it without the clear if you want to understand more about how floats work.
You should be familiar with the rest of the attributes in the code. Nothing fancy.
#footer {
background: #fafafa;
clear: both;
text-align: center;
height: 60px;
padding-top: 10px;
border: 1px solid #a3a6a9;
-moz-border-radius: 0 0 10px 10px;
}
The #footer-menu is, as well as the #nav-menu, a list. We want to display it horisontally, but this time we can use display: inline; instead of float, because we don't need to set their widths and heights. I also set a little right/left margin so the links don't touch eachother.
#footer ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#footer ul li {
display: inline;
margin: 0 2px;
}
That's it for part 2. If you want to create your own CSS-design, just create a new folder in the css-directory and change the linking in index.php.
<link rel="stylesheet" type="text/css" href="css/CHANGE_ME/style.css" />
By creating one folder for each design, you can always keep the old ones, and change whenever you feel like it.
In part 3 we're going to create a styleswitcher which will make it possible to change CSS-file from the website.
I will also explain how you can easily have slightly different markup for each design. Sometimes it's easier to change the markup than to position elements with CSS.
Comments
2 comments so far, why don't you post one too?
Friday, October 03, 2008
hej och tack för en bra guide :) jag undrar om du vet hur man snyggar till url:erna lite. alltså hur man får www.mindomän.se/?page=kontakt att bli www.mindomän.se/kontakt/
jag följer din guide fullt ut och har testat med
RewriteRule ^?page=(.*)$ /$1/ men får det inte att fungera.
Sen undrar jag om det verkligen är så dåligt med ob_start(); som man kan läsa i diverse forum?
Mvh Åsa
Saturday, October 04, 2008 | View all comments by Andreas
@Åsa,
Det ser ut som du vänt på rewrite-regeln, det borde vara något sånt här:
RewriteEngine OnRewriteRule ^(.*?)/$ ?page=$1
Du vill alltså skriva om /vad-som-helst/ till ?page=vad-som-helst, inte tvärt om.
Edit: Angående ob_start så vet jag faktiskt inte hur illa det är om jag ska vara ärlig. Jag tror iaf det finns betydligt mer att spara på att göra din front-end kod så optimerad som möjligt. Runt 80% av laddningstiden på en sida sker på front-end:en. Kika på ySlow till Firebug och/eller Yahoos regler för en snabbare webbsida om du är inne på optimering.