Step 18 - Coding Client Zone

Instead of making new page for login panel, we will get advantage of jquery (that is already implemented into our code) and will create a fixed div that will be hidden by default. Let's make some design at first. The form will slide from the top. It's position will be fixed and it will be stretched on 100% width of page and shouldn't be longer that the header so the user will have possibility to hide it with menu item. I kept my design simple. It's just to show off above all. Check the sources for more informations. In psd file you will find mock-up of the form, in graf folder two background images that I used here. If you wish, you can prepare your very own, more complex backgrounds. Ok, this is the html. Place it anywhere in the body tag.

And here's css for that piece of html:

#wrap_login{ width:100%; margin:0 auto; height:140px; background: url(graf/loginbg.png) repeat-x 0 0; position: fixed; top:0; z-index:9999; } #wrap_login #login{ width:980px; margin:0 auto; height:140px; position:relative; background: url(graf/login.png) no-repeat top center; } #login #loginform { padding: 24px 0 44px 40px; width: 600px; position: relative; height: 36px; } #login #loginform .logininput { color: #686767; line-height: 36px; padding: 0 10px; position: relative; width: 176px; height: 36px; background:url(graf/newsletterform.png) top left no-repeat; border:0px; } #login #loginform .loginbutton { color: white; line-height: 37px; width: 143px; border:0px; position: relative; height: 37px; background:url(graf/darkbutton.png) top left no-repeat; margin-left: 20px; } #login #loginform .loginbutton:hover { color: black; background:url(graf/darkbutton.png) 0 -37px no-repeat; } #login a { margin-left: 40px; text-decoration: none; color: #333; } #login a:hover { text-decoration: underline; }
Don't forget about javascript. Place it inside head tag in your document:

And it's done. Now we can name it blank.html and make few copies of it for further pages. There won't be any additional cutting (well, maybe just a few elements actually), so the only part here is proper html and css. Download mine html sources to see it all. Hope you learned something with this tutorial and let me know if you wish to see more of that kind. See you around! Oh, I almost forgot to admit: To shrink the jpg files use IrfanView. Just open up a jpg file in this image browser and save it with 90% quality. Your image shouldn't loose a lot of quality, but it's weight could lower twice time or so. Alright, that would be all for now. Remember, when you learn html and css it is most important to analyze, analyze, analyze... Edit already created file, change some value, save, refresh and check out what's happened. It is the best way to learn.