Comments on: Coding – Website Header & Navigation http://www.myinkblog.com/coding-website-header-navigation/ A Resource For All Things Design Thu, 05 Jan 2012 16:05:32 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Marçau http://www.myinkblog.com/coding-website-header-navigation/#comment-145758 Marçau Thu, 31 Mar 2011 08:00:47 +0000 http://www.myinkblog.com/?p=501#comment-145758 Hi Andrew, Very well explained step by step tutorial. I'm glad you say things in a way that even beginners can understand them. I thought a bit the same as Rick in the first comment. Why put the slogan in a separate div if you already placed it well in Photoshop? I understand the operation for the logo to be clickable but then you don't need a "home" item in your navbar… Nevermind if it works well this way. Anyway, what is on my mind is how does Internet Exploder deal with the transparency of the .png pictures? …and how to get sure it won't ruin your design? I was wondering if coding the whole header as an image map was to be the unique compulsory multi-browser solution Hi Andrew,
Very well explained step by step tutorial. I’m glad you say things in a way that even beginners can understand them.
I thought a bit the same as Rick in the first comment. Why put the slogan in a separate div if you already placed it well in Photoshop? I understand the operation for the logo to be clickable but then you don’t need a “home” item in your navbar… Nevermind if it works well this way.
Anyway, what is on my mind is how does Internet Exploder deal with the transparency of the .png pictures? …and how to get sure it won’t ruin your design? I was wondering if coding the whole header as an image map was to be the unique compulsory multi-browser solution

]]> By: Tianyer http://www.myinkblog.com/coding-website-header-navigation/#comment-117365 Tianyer Sun, 20 Feb 2011 16:33:49 +0000 http://www.myinkblog.com/?p=501#comment-117365 Hello, i arrived to this blog although looking for some thing else, but to my joy i discovered this web site. Maintain performing what you're doing, its excellent. Hello, i arrived to this blog although looking for some thing else, but to my joy i discovered this web site. Maintain performing what you’re doing, its excellent.

]]> By: ashish http://www.myinkblog.com/coding-website-header-navigation/#comment-29625 ashish Fri, 07 Aug 2009 19:33:48 +0000 http://www.myinkblog.com/?p=501#comment-29625 nice tutorial nice tutorial

]]> By: Andrew Houle http://www.myinkblog.com/coding-website-header-navigation/#comment-22139 Andrew Houle Sun, 03 May 2009 17:29:58 +0000 http://www.myinkblog.com/?p=501#comment-22139 @Hegbirts - Looking at your code the first thing I noticed is that you've declared your <head> info twice and you've got two <body> tags. Your html should look something like this: <code><!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"> <head> <!-- All you head declarations here --> </head> <body> <!-- All your page stuff here --> </body> </html></code> 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: <code>.clear { clear: both; overflow: hidden; height: 0px; }</code> Then in the html after the closing div of nav add: <code><div class="clear"></div></code> 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. @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:

<!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">
<head>
<!-- All you head declarations here -->
</head>
<body>
<!-- All your page stuff here -->
</body>
</html>

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:

<div class="clear"></div>

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 http://www.myinkblog.com/coding-website-header-navigation/#comment-22136 Hegbirts Sun, 03 May 2009 15:44:31 +0000 http://www.myinkblog.com/?p=501#comment-22136 Ok, fixed my style sheet issue but still have not solved the IE issue. Any suggestions would be GREATLY appreciated! Ok, fixed my style sheet issue but still have not solved the IE issue. Any suggestions would be GREATLY appreciated!

]]> By: Hegbirts http://www.myinkblog.com/coding-website-header-navigation/#comment-22133 Hegbirts Sun, 03 May 2009 14:59:43 +0000 http://www.myinkblog.com/?p=501#comment-22133 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 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. 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 http://www.myinkblog.com/coding-website-header-navigation/#comment-22099 Andrew Houle Sat, 02 May 2009 23:14:43 +0000 http://www.myinkblog.com/?p=501#comment-22099 @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 :) @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 http://www.myinkblog.com/coding-website-header-navigation/#comment-22084 Hegbirts Sat, 02 May 2009 19:01:54 +0000 http://www.myinkblog.com/?p=501#comment-22084 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! 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 http://www.myinkblog.com/coding-website-header-navigation/#comment-21718 Trupti Sun, 26 Apr 2009 04:07:22 +0000 http://www.myinkblog.com/?p=501#comment-21718 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 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 http://www.myinkblog.com/coding-website-header-navigation/#comment-21598 Abhineet Fri, 24 Apr 2009 03:28:02 +0000 http://www.myinkblog.com/?p=501#comment-21598 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 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

]]>