Comments on: Coding – Website Header & Navigation

By: ashish

ashish — Fri, 07 Aug 2009 19:33:48 +0000

nice tutorial

By: Andrew Houle

Andrew Houle — Sun, 03 May 2009 17:29:58 +0000

@Hegbirts – Looking at your code the first thing I noticed is that you’ve declared your info twice and you’ve got two tags. Your html should look something like this:

Also it seems IE is padding from the bottom of the header div. Try adding a .clear element. So something like this in the css:

.clear { clear: both; overflow: hidden; height: 0px; }

Then in the html after the closing div of nav add:

That may not be the issue, but it’s worth a try. If you are still having some trouble. Please feel free to email me at info@myinkblog.com and send index.html, style.css and the image files so that I can take a look at your code.

By: Hegbirts

Hegbirts — Sun, 03 May 2009 15:44:31 +0000

Ok, fixed my style sheet issue but still have not solved the IE issue. Any suggestions would be GREATLY appreciated!

By: Hegbirts

Hegbirts — Sun, 03 May 2009 14:59:43 +0000

Thanks Andrew, I worked with SSI yesterday but PHP worked better. I have Frontpage so my question was just regarding placement of the code, I figured out it should go at the top of the body (surprisingly no websites tell you where to put the code but perhaps it’s so basic I should have known). My trouble now is making it look good for IE. I have IE 7 and the navigation bar is way off compared to Firefox. If you want to take a look at my site, it’s http://www.birtsbags.com. I’m going to do some research on the css code for IE, hopefully I can figure it out. Do all my files need to be a PHP in order to use the header.php?
Another thing I am having trouble with is applying css to the rest of my site, once I added the php code, everything else lost it’s styling.
Thanks again, the tutorial was really good.

By: Andrew Houle

Andrew Houle — Sat, 02 May 2009 23:14:43 +0000

@Hegbirts – I’m not sure exactly what you mean by the first question? If you mean what text editor to use, you could use anything from notepad to Dreamweaver. I recommend Dreamweaver or Coda. If you mean where to place your file, that depends on the setup of your server. Most hosts will have a folder like public_html for that sort of thing.

You can add the header code to all the pages a number of ways, like Server Side Includes or PHP Includes. I prefer using PHP Includes. Here’s a simple example to get you pointed in the right direction: http://www.tizag.com/phpT/include.php

Let me know if this doesn’t answer your questions. I’m more than happy to help with this stuff :)

By: Hegbirts

Hegbirts — Sat, 02 May 2009 19:01:54 +0000

Hi – this tutorial was terrific but I don’t know how to add the code into my index.html file, can someone explain exactly what code to use and where it should be placed? I am very new at this. I also would like to add it to all of the other pages in my website. Thanks!

By: Trupti

Trupti — Sun, 26 Apr 2009 04:07:22 +0000

Thanks Andrew for the link. I never thought tables could create a problem from SEO and also load slower. Will be troubling you over more queries.

Thanks again.

Trupti

By: Abhineet

Abhineet — Fri, 24 Apr 2009 03:28:02 +0000

Hi Andrew!!
I am pursuing engineering in Electronics.
It was last year when I found web designing very interesting & it emerged as my biggest hobby.
I found your blog while searching for a photoshop article & was stuck at what I found here.
Its amazingly easy to follow your blogs to create awesome content.
You are a source of inspiration as well as knowledge for me.
Please include some more material, links or ebooks which would serve as starting points for the people who are very new to this field.
Anyways, great work.
Thanks
Abhineet

By: Andrew Houle

Andrew Houle — Sun, 19 Apr 2009 12:24:02 +0000

@ Trupti – There are a number of reasons that HTML/CSS layouts are better than table based layouts. Tables are best left to only large amounts of tabular data. For layouts they are slower to load, less flexible, can hurt SEO, and so on… If you’d like to learn more, this article is a pretty good starting place: http://www.wplancer.com/why-you-shouldnt-use-tables-for-web-layouts/

By: Trupti

Trupti — Sat, 18 Apr 2009 15:58:10 +0000

Hi Andrew,
I want to pursue a career in web designing and I found your tutorial very helpful. Thank you for sharing this great tutorial.

I would like to know what is the difference between using a table to format the html compared to the div tags.

thanks for all your help :)