How to Layout a Website 3

Here I continue showing you how to layout a website. 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.

Code is Here:






20 responses to “How to Layout a Website 3”

  1. Abhishek Chakrabarti Avatar

    i'm not getting the second middle column

    when i'm making the second column it continues with the first column

  2. Phan Văn Cương Avatar

    you can share to me photoshop file? thanks!

  3. Jerry Kim Gomez Avatar

    Too much good stuff!

  4. mrbeanslefthandman Avatar

    Derek's speech is a cut and paste job too.

  5. Matt Ng Avatar

    What makes the middle column move back up the website next to 'Who we are'?  When I did it my middle column popped up below 'ARTICLES'.  I then had to reposition it using crazying top and left coordinates and relative positioning and its also messing up some other stuff.

  6. Mark Avatar

    It's like watching Bob Ross paint!  😉

  7. Derek Banas Avatar

    Yes I tend to make WordPress sites now as well. The needed security is my main reason, but allowing customers to edit their own site is great. I make my living by running a bunch of online stores. I gave away much of what I use on my site for free. Feel free to use it if you'd like.

  8. Derek Banas Avatar

    I see the menu is fixed 🙂 Yes, you can stretch it to fit in any way you need. I really made this tutorial to show how a fixed site would be put together

  9. soyboy Avatar

    I fixed a couple of my problems but I have a question.
    Will the words in the Article tags overflow or can you put a lot of text and the containers expand to fit it? Cause since the page seems to be fixed and not fluid I think its size of the text becuase im using the same font u are but it still seems different.
    I uploaded it online so you can see what i mean

  10. Derek Banas Avatar

    That is the only way to learn. I figured it was something silly.

  11. Dr Strangelove Avatar

    Derek, I solved the issue of my menu dropping under the main page content, onmouseover. I failed to close my "contentWrapper" div. Talk about bonehead…
    It is a pain to re-type your work rather than cut and past, but when I make a mistake on something that actually works, I know if I can find my mistakes, it will work again. It is like having to write a word on a chalk board a hundred times, it is not pleasant, but it helps the learning process.
    Thanks again for posting these videos…

  12. Derek Banas Avatar

    I have a couple of WP menu tutorials. Check out my channel. I cover them from multiple angles. They should clear up ay issues

  13. Dr Strangelove Avatar

    No, I am using notepad++. I follow along with your video's and hand code
    most everything for the practice. Although it take a lot longer and I can
    not keep up with you (you are fast), I learn a lot more doing so… I did
    cut and pasted your JavaScript and your DOCTYPE declaration. Everything
    else I typed.

  14. Derek Banas Avatar

    Thank you very much 🙂 if you like using dreamweaver that is great. I just didn't learn how to make sites from the beginning and so I was never comfortable with it. Everybody is different and that's a good thing

  15. Prateek Singh Avatar

    I'm learning on dreamweaver and your codes to put things together. I think for new people to see so much text and no GUI makes things a bit scary. It's a matter of getting used to the controls coding gives us perhaps.
    Thanks a ton for your efforts to teach us all. Excellent tutorials

  16. Derek Banas Avatar

    You're very welcome 🙂 It is great to be able to help so many people. I have a few questions. Are you using this in WordPress and did you copy the code from my site?

  17. Dr Strangelove Avatar

    Im attending web/development classes for certification. The classes are great, but your tutorials bring everything together, clear up a lot of questions and make the whole process so much clearer and easier. You have sped up my learning curve significantly.
    Thanks for that..
    Now my question. I am using your template on this tutorial, but my drop down menu is going under the main content, rather than over the top. The Z-index is set at 200 in my div#menu. Any suggestions?

  18. Georgereee ! Avatar

    Great work again D! Can't wait to watch the 4th in the series.

  19. Derek Banas Avatar

    @krysyourbabe Dreamweaver makes sloppy sites. I like my sites to be easy to understand for browsers and people. I've also been doing this since before Dreamweaver existed 🙂 If you like Dreamweaver feel free to use it. Many web developers do

  20. Krys Sedlar Avatar

    I am wondering why you chose to hand code everything if you have Dreamweaver?

Leave a Reply

Your email address will not be published. Required fields are marked *