How to Layout a Website 4

[ad_1]
Here I finish off the website I started creating in part 1 of How to Layout a Website.

I finish up the right sidebar and the footer. Then I move on to clean up any loose ends that exist.

Code is Here:


Posted

in

by

Tags:

Comments

40 responses to “How to Layout a Website 4”

  1. dave withmore Avatar

    What books do you Recommend for Front-end Web Development Derek ?

  2. Ákos Verseny Avatar

    12:02 from filter line to firefox line

  3. Derek Banas Avatar

    Are you referring to the copyright at the bottom?

  4. Ákos Verseny Avatar

    how did you create the text in the footer?

  5. Derek Banas Avatar

    I try to avoid using clear because it can do some wacky things to a layout

  6. Shay Avatar

    Hey I have a question…
    Do you ever use the clear property to move divs below, or do you only use floating to adjust their position? Thanks!

  7. Derek Banas Avatar

    Here is all the code in one place newthinktank. com/2011/10/how-to-layout-a-website-4/

  8. Wael Salman Avatar

    you are floating the whole wrapper or per container?

  9. Derek Banas Avatar

    Because I'm floating everything to the left. Kind of like stacking books

  10. Wael Salman Avatar

    Why rightContainer is left floated??
    It is on the right side so why left floated??

  11. Derek Banas Avatar

    Thank you 🙂 check out the z-index. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. I also provide all of this code on my website to help

  12. Junaid Akram Avatar

    Hello..
    I really appreciate you work to providing a learning environment for beginners and also professional. Actually I am following your tutorials. I am facing a problem in lecture of layout a website.And my problem is that “When I open top menu bar it always display behind the middle container part. So that I cannot look at sub menus”. Please provide me solution for this why it that happening. –

  13. Derek Banas Avatar

    Thank you 🙂 yes defining distances with percentages is fine. Here is the answer to your other question cssreset. com/how-to-keep-footer-at-bottom-of-page-with-css/

  14. David Jensen Avatar

    Great video(s)! I have a question about footers: How should we get those darn things to stick to the bottom of the browser? In your case, the footer is at the bottom because the content and header sections have specific heights, but consider a case where the content div had nothing inside, but you still want the footer at the very bottom.
    Actually, that brings up another question: Instead of exact widths/heights in pixels, what's your opinion on using percentages? (with exception of header).Thx

  15. Derek Banas Avatar

    That would be very nice! The world definitely still needs some fun math tutorials. I always hoped to do them, but it will be awhile till I get there. I wish you the best of luck

  16. Steve Heller Avatar

    Thanks again…will try to pay it forward with some Math videos I hope to create once I get the right setup

  17. Derek Banas Avatar

    You're very welcome 🙂 I'm happy that you found them useful. I record everything with Camtasia 2 and I edit everything with iMovie. My mic is a regular iPod last gen mic.

  18. Steve Heller Avatar

    Thank you so much for these videos which in less then an hour, have been more helpful then a pile of encyclopedic books. Can you explain what software and equipment you use to record your videos. Thanks again.

  19. Derek Banas Avatar

    Always feel free to watch the videos as much as possible 🙂 Thank you for the kind words

  20. Georgereee ! Avatar

    Wow! I think I am going to have watch this series of videos over and over and fiddle around with stuff ad nauseum to get somewhat close to your level of speed and dexterity. Great work, Derek. Thanks again.

  21. Derek Banas Avatar

    Sorry, but this isn't very fresh in my mind. I'll check it out. Till then I have all of the code on my site for free. There is a link for it under the video

  22. x x Avatar

    At about 5:35 you create div with class socialIcons and put the social network images inside that with a class of socialNetwork on each image. It doesn't look like you style the socialNetwork class though. Am I missing something? Thanks

  23. Derek Banas Avatar

    You're very welcome 🙂

  24. R Edmonds Avatar

    This was great! Thanks so much!

  25. Derek Banas Avatar

    @UchihaElroy It will have an animated menu and slider that you can easily change transitions, etc. It will also autoslide

  26. Elroy B. Hidan Avatar

    @derekbanas Excellent. And since iSubscribe to your channel iMay be able to see it. So please notify me when you make the video. It wil benefit me and others 🙂
    And one more thing, since you'll be making a Javascript video with slideshow animation, would the video be able to have also a Javascript animated transition menu

  27. Derek Banas Avatar

    @UchihaElroy I'll try to put up a tutorial on how to make a featured content slider, slideshow. It should be easy to understand and the code will be easy to just cut and paste and then edit

  28. Elroy B. Hidan Avatar

    @derekbanas iSaw you jQuery Tutorial and there is one more question iHave at least two more. I created a slideshow using Javascript on my page but how can iCreate a fading/animated transition between the pictures? Do you have a tutorial doing that with the code/script?

  29. Derek Banas Avatar

    @UchihaElroy Drop down menus are very easy to make. Check out this video JQuery Video Tutorial Pt 5 on my YouTube channel. JQuery is very easy to learn. There is very little coding required for some nice tools

  30. Elroy B. Hidan Avatar

    @derekbanas Well…. it really appears you use a software like notepad (or some free text editor). But anyhow iWant to animate Drop down effects menu, animate a slideshow on my page (fade, slide effects, etc.). just some really awesome effects without thinking much about coding, Flash designs using Adobe Fireworks. etc. Thanks

  31. Derek Banas Avatar

    @UchihaElroy I use a free text editor and a browser to make all of my sites. Most good designers that I know do the same. All of my videos are based on free software. As per effects, what do you want to animate?

  32. Elroy B. Hidan Avatar

    Hey there. iHave two questions. What are the Best Web Designing Software(s) other than the Expensive CS5 Dreamweaver?
    And what software(s) can iUse for animated effects without knowing much about Coding?
    Thnx

  33. Derek Banas Avatar

    @supprof1 I was a grunt assembly language programmer at Apple. I made device drivers for quicktime and stuff. When I worked there it was very cult like. I have no idea what it is like today? Everyone was part of a different team there. The one thing that definitely amazed me was how many products that were just shelved and forgotten. The quote about Apple not shipping unless a product was perfect is definitely true!

  34. Ahmed Cherif Avatar

    @derekbanas being apple's CEO was not about somme economics degrees. it was not about marketing. steve jobs didn't ask people what they like he knows it by his own. it was about being crazy, foolish and hangry. i mean people who can leade apple to a success have to break the rools, and people who break the rools don't know those rools. they didn't recive an academic training about theme. that's the first reason why they broke theme.

  35. Derek Banas Avatar

    @supprof1 My wife picked the name. Think tanks normally try to solve economic problems. I thought the world needed a Think Tank that solves problems people deal with every day like Weight Issues, Communication Problems, Tech Skills, etc. So, I looked toward the experts to solve these problems. It's been fun. It didn't have anything to do with Apple though. That was a completely different adventure 🙂

  36. Derek Banas Avatar

    @supprof1 We're all great in our own way. I can't even imagine what would go into being a CEO though 🙂

  37. Ahmed Cherif Avatar

    @supprof1 and quite frankly it'snot fair because the goal of every compagny is to take maximum parts of the of his business. and when this this compagny succeds its concurrent accuses it to take over the market. so we forgot that people(clients) and its good are behind its succes.
    steve jobs was great.
    bill gattes is great
    …….
    ……
    derek is great.
    ………
    ………
    the probleme is i'm not great
    what i gona about it?!!
    thank you derek
    may be you deserve to be a candidate to be apple's CEO

  38. Ahmed Cherif Avatar

    @derekbanas a hah than you worked for steve jobs?!!! So I present you my condolences
    good!! than if you didn't know him than tell us a bit about the ambiance and serenity at work in apples offices
    does your website name NEW THINK ank.com something to do apple slogan think diffrent
    a lot of people think that bill gates won because of steve's death?! but i think that microsoft will be more seen as bigbrosers because of the steve lost.

  39. mr roshik Avatar

    thanks again for this tutorial 🙂

Leave a Reply

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