In the previous tutorials How to layout a website Part 1 and Part 2 I created a website template from scratch. Here I continue that process.
As you see making a website is a process of placing each individual part of the page in a box (DIV) and then moving this boxes into the correct position.
I hope is that through repetition you will be able to recreate any design. It really isn’t that hard to make custom website templates. It just takes some practice.
All of the code from the video follows the video.
If you like these types of tutorials spread the word [nttfblike]
Code From the Video
If you want the menu bar code look on How to Layout a Website.
Hi,
i’m following you a while ,but new i have one qustion or say one favor .
i want know how i can make wordpress shopping cart with wp ecommerce plugin and how i can design it .
i hope to get from you positive answer .
thank you anyway
Amro Eldewiny
I’ll be making 2 shopping carts in WordPress. They will be available as soon as I get them finished and tested. Thanks for taking the time to say HI 🙂
Hi again,
Thank you so much, and i’m looking forward.
You’re very welcome
Hi Derek,
Why did you give .middleTitle such a high z-index? I gave it 1 and it was enough…
Is it some kind of a trick?
Have a nice day!
I just do that to guarantee that it shows up on top. A 1 z-index will work in almost all situations. Sorry about the confusion
Does this z-index problem depend on the browser?
Anyway, I like the series because it explains how to put different elements together. You can learn about html/xhtml etc. but the question is – can you put your theoretical skills into action? Your tutorials explain a lot here.
However, manipulation of the DOM and divs is a complicated thing, I believe.
BTW, will you make a tutorial about html5?
No the Z-index is the same for every browser. I’m very happy that you enjoy the videos. Thanks for that. I also cover numerous real world tools you can build in other tutorials on my site and youtube. Sometimes it is easier to see them all on my 404 page. I hope that helps
Hi,
i’ve done everything exactly the same as you but my middle column is showing up underneath the left sidebar. The code is exactly the same.
Any suggestions?
~jack
There is probably a missing tag some place. Did you copy and paste my code?
Hi Derek
I am on the Third tutorial I am trying to get the second middle column to work the problem is that it goes on the end of the first middle column instead of having three columns I have have two instead of three
I have tried to find out where I need to cut and past the code for Second middle column. I am still trying to find out what I have to do this right.
Thanks
D Calder
Hi Derek
I have completed tutorials 1 and 2 I am trying to complete lesson three
the cut and past thing is still bug-gin me the drop down and menu things are fine but is at the end of tutorial 3 where you add the second middle side bare or Second middle column. I am have trouble with. I have check the code for error message every is ok. I gone throw tutorials One and two and I have check the code under below video tutorials. I have the sidebar and the first middle column. is adding the second middle column when I try it goes the the end of the first middle column.
Thanks
D Calder
Hi Derick, I’m sorry that you are struggling with it. Try comparing your files to mine using DiffNow. I’m sure it is a little typo. I wish you the best 🙂
Hi Derek
I have decided to do every thing again. Tutorials 1 2 and 3 to find out what I did or didn’t do to get the Second middle bar.
Thanks
D Calder
PS Great tutorials
Thanks
D Calder
Hi Derek
I have completed 1 and 2 I am now going to do tutorial 3.
I am learning a lot from the tutorials. And I must say these are the best tutorials I have seen and I will continue to follow the tutorials.
Thanks again.
D Calder
Hi Derick,
I’m very happy that you are enjoying them. I’m not very popular so it is always nice to hear that I’m helping 🙂
Hi Derek
Sorry about the past too much code from tutorial How to layout an website
Thanks
D Calder
It is better to upload the code to the internet. I have a tool I use to find errors in CSS, but the code must be online. Send me the URL and I’ll take a look.