Category Archives: HTML CSS

HTML CSS

The Clearfix

12 Comments

You may be wondering what the hell a clearfix is? Well quite simply its a better way of doing clear:both. Its fool proof and works in all browsers, and if you’re not sure what clear:both does, it basically puts a full stop after any floating div.

I see it a lot of the times on forums where people are having problems with their layouts or with the new staff at my work its generally the first thing we have to teach them, there are many problems that can occur when you apply floating div’s but 9 times out of 10 the clearfix will fix it! That’s how fool proof it is. If you can remember to use this you will find that coding sites will be much easier.  Below is an example of the most basic error so you can see what I mean.

Clearfix Eample

Live Preview [opens in new window]

So you must be thinking if this clearfix fixes so many problems it must be a pretty hefty piece of code, well no its really simple actually:

.clearfix:after { content:'.'; display:block; height:0; clear:both; visibility:hidden }
.clearfix { display:inline-block }
* html .clearfix { height:1% }
.clearfix { display:block }

That is all it is! Its CSS so its cross browser compatible, which if you’re in the web design industry you will find everything needs to be these days as you can see there are several different rules, these are as the first one .clearfix:after won’t be accepted by all browsers so there are separate rules that if all else fails the other rules will work.

There is even a shorter version but this hasn’t been tested on ie6 but it works all the way down to ie7 so if you’re like me and don’t really care about the people using ie6 as if they can’t update their browser they shouldn’t be on the internet (either because they are at work or they obviously don’t care about the quality of the websites they visit) you can use the code below.

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Ok so we know what we need to put into the style sheet but if you don’t put it in your markup correctly it’s just not going to work, so to make sure we know how to put it into the markup we need to understand what it does.

Like I said above what you are basically doing is putting a full stop after all the floating div’s that are causing you problems, to illustrate this I’ve mocked up a problem I’ve seen in the past and generally the most common problem.  Where you can see the wrapper div doesn’t fully extend the two floating div’s. You may think it’s not a problem now, but if you wanted to add a footer or add a background to the wrapper div you’re going to have a problem.

By simply adding the class of clearfix to the surrounding div you can see that the div now extends around the entire layout which is great if you want to create sections to sites you can clearly define the area while not being limited to what you can do within the area.

I have created a wireframe of the homepage of Lucid Fanart to show you how it would look without the clearfix and the simple css has saved me a lot of time, and a lot of screwy hacks trying to make everything fit into the space perfectly. As you can see from the example the dark black lines are the areas where I’ve put the clearfix and you can see a difference in the way everything lines up I haven’t even set positions on things I’ve simply written out the markup and done a few lines of CSS and it simply falls in to place.

Clearfix Lucid Fanart Example

Live Preview [opens in new window]

I hope you found this tutorial useful and that you are able to use the clearfix, if you need any help please post below and I’ll talk you through it, if you have an example please add it in and I’ll try and help specifically to your design.

HTML CSS, Tutorials

HTML/CSS Structure

2 Comments

The people have voted! and 31% of you would like to see some HTML and CSS tutorials, Okay, well to be honest I don’t know where to start teaching you things, I started when I was but 14 years of age, and I learned VERY slowly simply becuase I was learning from the internet which I only had a little bit of access to at the time and in my spare time. I had no idea where to start or what was right or wrong and that long ago there weren’t the big websites that help you out like there are today and there wasn’t any right or wrong way of doing.

I’m not saying I’m an expert but these are a few things I learned along the way.

probably the most basic and helpful tip I can give anyone is STRUCTURE if your code and your files are tidy it is so much easier to write it, rewrite it and learn from it. In my job I have had to rewrite other people’s work or look at other people’s code to decipher if the website needs recoding, and lets face it most of the work we get in from clients their current websites need a total rewrite at the very least so I can read the code properly so I can make the changes the client wants.

Okay so the easiest thing to teach you would be file structure, if you mix all your files up it can be quite difficult to find things and move things about but if you keep things in order then its easy peasy, all the images should be kept together, (and maybe in folders within an image folder if you have LOTS of images) css, scripts and anything else should have its own folder. Below is a diagram of a basic website filing structure which I use every day.

file structureAs you can see I use Dreamweaver, which in the past I have hated with a fiery passion, and I still thing it promotes laziness but if you are in the web design business you will know what time is very precious and you will need a programmes that will help you out, and I think Dreamweaver is one of the best in the market. Anyhow this is the file structure I use in all my websites, the ‘includes’ folder is used when using PHP which I will write a tutorial about later on but basically it contains small snippets of code that needs to be included on every page. (this is also very useful and I will write a tutorial on it later).

The ‘assets’ folder is where you keep all your CSS, images and javascript, I would also create a folder for pdfs, or word documents, or any other kind of file you upload to your server. I used to just shove everything in the main folder and it took ages to find what I wanted.

HTML Structure.

What with the HTML 5 coming into play, structuring websites could get a lot easier and a lot more straight forward but thanks to the evil of Internet Explorer that has infected the internet with its F*** You’s to anything that you try to write that is semantic or anything that validates, and all those people who are forced to use Internet Explorer or people who are too lazy, or don’t know enough to update their browsers anything better, HTML 5 will have to wait around for a bit or you as a website designer will have to learn all the tricks to back date all your websites.

below is my basic HTML structure which I would recommend if you want to make it easy to update. (please note there may be easier ways out there to layout your work but this is what I have found to work best for me)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SITE NAME</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="YOUR NAME AND WEBSITE ADDRESS" />
<meta name="language" content="en-gb"/>
<meta name="robots" content="index,follow"/>

<!--STYLE SHEETS-->
<link rel="stylesheet" type="text/css" media="all" charset="utf-8" href="assets/css/main.css" />

<!--JAVASCRIPT-->
<script type="text/javascript" src="assets/js/jquery-1.4.2.min.js"></script>

</head>
<body>

<div id="wrapper">
   <div id="header"></div >
   <div id="content"></div>
   <div id="footer"></div>
</div>

</body>
</html>

Head:

This is the basic format I use, and I’m just going to break it down for you now.

DOCTYPE: This little piece of code that tells the browser what version of code has been written in. There are several types of these Doctype

  • HTML Strict : contains all HTML elements but doesn’t include deprecated elements like font.
  • HTML Traditional : contains all HTML elements including deprecated tags.
  • HTML Frameset : the two above don’t include frame sets so if you want to use them use the frame set version. (I wouldn’t recommend framesets they are old and horrible 😉 )
  • XHTML Strict : this is the most strict version it doesn’t allow for any deprecated tags, or framesets and the mark up must be written as well-formed XML.
  • XHTML Traditional : this is what I use, becuase it allows for a few errors, and I am not saying I make a lot of errors but simply becuase if you want your site to work for ie6 and old browsers sometimes you have to use deprecated tags and little hacks to get the site working across the board. but the mark up must be written in well-formed XML.
  • XHTML Frameset: I think you are getting the flow of things right?

for more information about DOCTYPES visit W3School

I would hope you all not what the <html> tag does, there is a little extra code in there that basically sends information to the browser to say what type of html has been written and in what language etc.

META TAGS: The next block of information is the meta tags. These are hidden bits of information that tells the browser things about your website, in the past these have been the main source of information that search engines have used to determine what your site is about, however lately search engines are must more advanced and they are able to read all the content of your site and determine what your site is about from what your write about, so meta tags are no longer the be all and end all of SEO (Search Engine Optimisation)  you now have to write the content of your site very carefully, and search engines also determine the value of your site by the type of code you write. ( I know very little about SEO, it is very in-depth and long winded and if you ask me very boring. you can find out a lot more about SEO here at SEO Moz one of the best SEO blogs on the net)

  • <title></title> this is pretty self explanatory put the title of your site here … duh lol.
  • “description” : here you should put a detailed description of what is on the page, if you have 10 page you need 10 different descriptions becuase different things are written on different pages.
  • “keywords” : these are the keywords that describe your site, these can be the same on every page to make it easier or if you want to be complex you can create new ones but keywords are hard to choose especially if you think about it, there may 1000’s of sites with the same keywords as you
  • “author” : this is basically to say you wrote it, its a good thing to put your name and website address, this is if you are writing it for someone else so if anyone wants to know who coded it they can find you.
  • “language” : pretty self explanatory
  • “robots” : this defines rules for robots (web crawlers for search engines)

There are more than this but you only really need to use title, description, keywords. the others are just filler.

JavaScript and CSS: after the meta tags I always put the assets, CSS first and then the JavaScript if need be, many people like to put the JavaScript at the bottom of the site as it can take a while to load and most people want their site to load before waiting for the JavaScript, but many sites these days rely heavily on JavaScript as it is a common language and most people have browsers that enable JavaScript.

As all the code above is written within the head tag it is hidden from the viewer now we get onto the actual content the body of the the HTML file.

Body:

I like to keep this a simple as can be, I always cut my sites into three second HEADER, CONTENT and FOOTER, almost all sites run on this structure, even if the author doesn’t realise it, you may notice that I haven’t put menu in there, well I put that anywhere I want, as long as it fits into one of these three sections. (cutting your site up this way helps when it comes to using PHP includes tutorial soon)

Wrapper: this is probably the most important thing in the site, the wrapper keeps everything within a certain space. even if your site is a liquid layout (a layout that changes width with the size of the browser window) I tend to do all my sites as a fixed width as it make it easier to code and to be sure what it looks like across different resolutions. but adding a wrapper around things means you can control the shape of everything inside the wrapper.

Header: this has everything that appears on every page at the top of the site your website title, main image, and possibly a menu. you can put as many <div> or content in the header as you want, but the main thing is that everything you want on every page should be contained in the header.

Content: this area should contain all your unique copy, from the title of the page down to the last full stop, these shouldn’t be anything that is going to appear on more than one page (unless you have included a sidebar but if you have included a side bar the best way to do it is to divide your content div into two section, the less confusion between the DIV’s the better. (and I implore you DIV’s not tables!)

TABLES ARE EVIL: just a quick note, I learnt tables first, and I used tables for years!! they are easy to use and make it really easy to divide up your page but they are not supposed to be used for content, or layouts or anything like that, the true use for tables has always been data. I remember when my friend Kitty first told me to use DIV’s I was so against them tables were safe and worked so well but they didn’t they were difficult to move and although they layout the site into blocks which is what I am asking you to do with DIV’s using DIV’s you can move things around the page so much more easily and use the CSS to do so much more with them. Tables are great for any kind of data like a size guide, or a pricing table, or anything like that, but keep it data only please.

Content and Sidebars: as I said above try to keep your content separate from the static content of your site, it will help you when you want to edit your site later on and will cut down the amount of time that it takes to redesign your site when you get bored of your layout and if you are anything like me, I always get bored of my layouts almost as soon as I’ve finished the redesign.

Footer: well all your footer information goes here, most websites have contact details in here, or important information that isn’t very pretty, this could be accreditation, or outbound links, for example my site (at the moment) has a poll, a bit of information about me and all the links to my social networking places, these are important bits of information but they are thing I wanted to show people. I also use this section for a quirky little thing that promotes my commenter, so the more you comment on my site the higher up your name and your website link will appear on the site. However the important thing to remember about the footer is this is for things that appear on every page at the foot of your website.

current footer 2010

Okay well I think that’s it, you may think that is a really in-depth way to describe the structure of  web site, and most of you probably already know about everything here, but just hope there was maybe something you didn’t know about or something you are going to try out and if you learnt nothing oh well your doing great and didn’t need to read the post 😉 but like I said there are other ways to do thing this is just what works for me.

Organisation is the key to speed and understanding