Pig Work

Pig Work skip to main content

Weblog of Freelance Designer Steven Clark


Centre a Page with CSS (Newbie Tip)

Filed under: — 5:31 pm

Another repeat question that seems to baffle when it shouldn’t is the old - ‘how do I centre a page with CSS’? While this isn’t rocket science either its a handy little tip if you’re just thinking about transitioning to tableless layout designs.

On a page like this one I generally make a div called #pagecontainer into which the content of my page will go like a big box. In it I’ll put other boxes (well divs) like #header, #content, #nav and #footer. The hash simply means they’re an ID (and not a Class) and they only occur once on a page.

So when it comes to the CSS for this page you would simply put inside your body declaration text-align: center and then in your #pagecontainer declaration margin: 10px auto and width: 700px. What this does is ensures that in IE as well as better browsers the page is displayed as centered and has a 700px width. It will also be 10px below the top of the page due to the margin attribute.

Once again this is a very basic CSS tip but from the number of times I see it asked and the obvious number of new designers taking up CSS layouts every day it might just help someone save a half an hour.


Keeping Floats in Boxes Tip

Filed under: — 2:24 pm

Some things we take for granted but then we look at them and realise that maybe even though its written in a thousand other places it would be useful to write again. So here goes…

If you’re developing with CSS and you have a situation where
a) the floated content automatically stays in its container in IE, and
b) it doesn’t in Firefox and seems to want a height (dont’ go for height)

then you can do the following to easily keep child elements inside the box. Simply put overflow: auto in the parent elements CSS.

Its not a rocket science tip but its also not very intuitive and so warrants an occasional mention.


WordPress 1.5 and Customisation

Filed under: — 3:40 pm

Initially frustration slapped me on the head with this one until I realised how simple the WordPress crew had made it (and how extendable). I’d originally customised WordPress 1.2.2 a few times (including both my blogs as well as a friend’s). So all I’d do was basically meld my already created page straight into full morph with the WordPress template and it was up and away. Then to change different PHP functionality I’d just jump into the other folders and have a bit of a play until whatever I’d envisioned came to pass.

So I installed WordPress 1.5 for a client and initially I wasn’t very impressed. I didn’t like that on the default installation the RSS links at the bottom of the page returned 404 errors. It also took me a little bit to get used to calling the new file structure. So here’s a bit of an explanation of where I went yesterday.

First I went to the forums and found that if I commented out 4 lines in the wp-blogheader.php that seemed to call the 404 by default and then changed the links on my page to normal relative URLs the RSS worked fine. The big problem here was realising that while index.php sits in the main directory the theme, and therefore its resources, sit in a folder about 5 levels down the heirarchy. So its not good enough to reference ’style.css’ but instead you need to write ‘wp-content/themes/default/style.css’ for example.

That said, I’d been looking at doing this the same way as I’d looked at version 1.2.2 which was to just take over the default page and make it my one and only prison bitch. But WordPress 1.5 has these themes you can either make, install or choose from. Its a very powerful option once you look into it. So I guess that’s the way I’ll be going on this operation…

Well I’ve only briefly covered the top ether of what customising WordPress is about but hopefully it’s enough to get someone else up and running. To create a theme by the way just copy the default folder, change its name to your theme name and edit the top of the CSS file’s comments to reflect your theme name and description.

I’ll be the first to admit it made me squirm for the first hour but when I read the documentation and visited the forum I was up to speed fast enough. Its just a new file structure and a different (better) way of looking at things.


Some Beginner Coding Tips

Filed under: — 11:01 am

One of the first tips I can give is if you’re doing CSS layouts then either put borders or different background colours on your containers so you can see what’s pushing where because its not always obvious. Its simple and I’ve been called a ‘Duh’ but 2 seconds of putting it in can make you slap your forehead.

Document your work either internally with comments, externally or both. This will save you so much trouble when you realise last week’s pages are falling over and the form has scroll bars (don’t laugh that was me yesterday).

Get your hands dirty on the coal-face and don’t rely on WYSIWYG editors to do it all. You need to understand what the code means and how it reacts to different browsers. Try HTML Kit which is what I use or something similar. If you’re interested in Java try Eclipse.

Note that no matter what or who you do anything for you have to keep backups or previous versions if you don’t want to eventually have to go back and fix the unfixable.

If you cut and paste code (particularly with PHP in my case) either put it underneath and rewrite it by hand or paste it onto MS Notepad first and then onto your page to get rid of the invisible characters. Many a PHP line fails simply because of this.

Another PHP tip is never leave spaces before your PHP opening tag. Often simply backspacing the tag to the beginning of a line gets code working.

Do one thing at a time and then check it in several browsers. This sounds like its going to take more time than just hacking it all better at the Fantastic Code Hospital but in the long run it nearly always works out quicker to test after each change of your code.

Go to forums, good ones like Webdeveloper.com, PHP Freaks or Codewalkers. Active forums mean more likelihood of responses to your questions faster.

Use DOCTYPES and the correct validators to check your (X)HTML and CSS. Get the relevant specs for your code and keep them handy. A short list (for example of simple XHTML no-no’s) pasted to your wall will save you a lot of time.

Understand separation of content from display from behaviour (XHTML, CSS and Unobtrusive JavaScript respectively). Try not to use inline styles for example as this mixes the display within the content.

I guess that’s all I can fit in here off the top of my head while avoiding my current email issues - yet again. If you’re new to coding of any sort maybe these short tips could help you save an hour or so of work later on. Write good clean code, comment, test and be sure to backup your work. Finally, ask questions and be annoying until you get the right answers!


Absolute and Relative URLs

Filed under: — 10:19 am

Its not always easy to get the idea of absolute and relative addressing through to people at first but once it’s in there it’s like riding a bike.

An absolute URL (or URI for that matter, don’t worry about splitting hairs here) consists of something like ‘http://www.nortypig.com/graphics/pic1.jpg‘. This simply says the message is http (hypertext transfer protocol) and the file is located on the domain name of nortypig.com in a folder called graphics and that it’s a jpg file called pic1. That’s about it really. You can if you wish use this method to reference files on your site but most often it’d be for external ones.

A relative URL on the other hand is a reference to a file relative to the file calling it. So if you look at the first example and assume that we’re in the nortypig.com folder already and you want to reference that same jpg from the index page you would simply write ‘graphics/pic1.jpg‘. The server is savvy enough to know you just mean look in the graphics folder that sits next to my index.html file and get the pic1.jpg image. Likewise you’ll often have to go up a directory.

Doing that one is easy too if you can imagine another folder called test sitting next to the graphics folder and index.html. In the test folder is a file called testpage.html and you need to display the jpg on it so you would write ‘../‘ to go up a directory and leave the test folder and then ‘graphics/pic1.jpg‘. So the complete reference to do it is ‘../graphics/pic1.jpg‘. Its pretty cool really and you can always figure out any issues by looking at the actual file structure on your server to see where you’ve gone wrong.

So what about this one? I have a CSS stylesheet in a folder called stylesheets that sits next to the folders called test and graphics and next to the index.html file. The CSS file in the stylesheets folder is styles.css and it is called into the head of the index.html file with a link in the head section of the (X)HTML. If you can visualise it great but if not then draw it on a napkin while you try to work out what I’m getting at. So in my styles.css file I want to call a background image into a div perhaps. How would I do it? Is it from relative to the index.html file or the styles.css file? The answer is it’s relative the styles.css and requires you to go up a directory and into the graphics folder by writing ‘../graphics/pic1.jpg‘.

The obvious advantages of using relative referencing are that you have shorter addresses to deal with and that your site is portable. It can be moved onto another domain and will work perfectly, wheras with absolute referencing you would have to change the nortypig.com part. I guess a lot of what you do with this comes down to judgement calls and personal taste but its important you do understand the difference and how to access resources in both ways effectively.


Classes and IDs

Filed under: — 11:56 am

One of the things that most eluded me with CSS was the use of IDs (# symbol) rather than Classes (. symbol) and why they were different. Not because its complicated but because Classes had seemed to do the job up until that stage so where was the need to look? Here’s a basic view of ID’s and Classes if you don’t already know.

The most obvious difference is that while a Class can be used many times on a page an ID can only occur once on a page. This makes ID a great tool for creating your (X)HTML page sections such as banner, leftnav, content or any other section you might want. By using the ID you can easily target as an example every second paragraph in the content section or lists in the navigation section.

The next thing about the ID to note is that by using it in your (X)HTML you can target an element for DOM scripting behaviours (yeh JavaScript) by using getElementById. An example of this is the banner on Translucent where random images fade in (programmed by lavalamp over at the Webdeveloper.com forums). In the page code you’ll notice the banner image has an ‘ID=banner’ allowing the script to hook into the element in question.

They’re the main differences I can think of at the moment and enough to get you rolling off a couple of ID’s on your pages. Like anything in this business planning helps so before you start coding you can look at your design and spot good candidates for the ID attribute in advance such as a block section or an element with behaviours. Just remember Classes can have many instances on the (X)HTML page but IDs only occur once.


Mockups and Prototypes

Filed under: — 8:45 am

Recently there was a conversation of sorts between two developers and something tweaked my ears. One developer suggested jumping directly to XHTML / CSS prototypes and skipping the mockup stages for the simple reason at the end of prototyping they would have the shell to build, it would all be sitting there. They asked the advantages of doing mockups in FireWorks or PhotoShop rather than in code. So I guess my comment would go something like this.

Firstly to each their own and I really don’t ever want to be a soapbox guy who thinks he’s got the only answer to every single issue. But I’d suggest that its in fact quicker to get signed off on graphic mockups simply from a logistical point of view - they are much easier and quicker to come up with, they can go in the bin and start again with very little time involved (personal heartbreak aside of course) and graphic mockups can just be emailed back and forth or printed out and handed around the table. Everything I’ve been taught has actually said this is the best process to get the best software out to market, too.

Wheras with an XHTML / CSS prototype to develop the actual design takes a lot of grunt if the client is on the other end of the phone working out the look and feel as you go. What if they decide the right navigation should be top navigation or that every second paragraph in a specific section needs some special case. By this I mean that you have to hunt through the CSS trying to work out sometimes complex inheritance issues or browser bugs on the fly. I’ve chewed a lot of days doing this very same thing just because I’m the kind of guy who gets a video game and reads the instructions like next week or later when I’m stuck. But process should be about discipline and the process should make for a better product one would expect.

So personally I won’t be throwing mockups away to jump straight to prototyping as it just seems bad sense. Of course, you just might find me breaking my own rules tomorrow but hey I’m also a human lol. I make my fair share of bad moves like everyone.


Semantics vs Design

Filed under: — 12:57 pm

Its a constant in this business that if you say one thing or another either side of the argument will beat you senseless and take your dignity like its an Unreal Tournament game of Capture the Flag. One of those minefields is to mention the XHTML word in front of the wrong audience who’ll crunch your skull and flay your bacon just for the internal insanity of it all. So with some trepidation I embark on the line of the semantics vs design issue.

For the most part I like the idea of a semantic web and in all sincerity I do try to be as semantic in my approach to marking up pages as possible without becoming just that little bit too anal for my own good. Often in real life you come to a fork - semantics or kick arse design - although they are not always exclusive of course. Sometimes you just want it to work like you saw it in your head regardless of best practise. So what am I on about?

Ahhh of course this cool method of elegantly wrapping a space character in paragraph tags floated to the left and given differing widths. I guess you need to go to What Can I Do and look under the hood in view source. By floating the paragraphs (or divs for that matter) you can quite unsemantically create cool text effects like wrap content in a curve around an image, something particularly handy in some situations. So perhaps I’m a novice, naive or just dumb but for works in the trenches its really a handy little bit of extra markup whichever way you go. Please don’t hunt me down and beat me senseless though…. pleeeassssseeeeee..


Hacks and Filters - Need to Know

Filed under: — 9:40 am

So far I’ve been able to get by without using hacks and filters but as a CSS designer its important (!important) to have an idea what to do it if at the end of a long struggle you can’t get a target browser to fall into line. After all, what do you do - pull out your WYSIWYG and make a dodgey copy and supply that? God forbid!

So, although they are to be avoided and only used as a last resort, no CSS coder of any standing could go without the knowledge of what these innocuous little excerpts of code do and some idea as to why. A good starting place is this article, Intro to CSS Hacks over at Sitepoint. For more hardcore hacks and filters information there’s no place like css-discuss.