I need a clean, flexible CSS/HTML template built from the sketch that is attached. The sketch includes all of the colors and measurements that you should need. All of the measurements are approximations as I will want to slide things around once you've got it in CSS. I know that you could build this with absolute positioning in about 5 minutes, but I want something built properly that won't break if I add a menu item or change the width of the content area. A few more details:
Layout: It's ok if the design is pinned to the top left.
1) The width of the menu bar will be approximately 500px (like the content), but I have not yet settled on a width. Further, I will be playing with the font size and spacing on the menu and submenu, so the width should be flexible and it should resize cleanly. If possible, I would also like to be able to play with the vertical bar heights and spacing to correspond to font and size changes. It wouldn't be a bad idea to make the spacing and heights here dependent on ems rather than pixels.
2) The top left corner is open for a logo, but I don't know what size it will be. This means that you should include a background image in the css, but allow me to shift the whole site down and left if the logo is bigger than I have planned.
3) Colors and lines: I have included red lines with px numbers to indicate sizes of things. I have also included color swatches and hex values for the colors I need. NEITHER of these should be included in the final CSS. They are just for your reference.
4) The blue lines (under the menu, vertical bars on the menu, the long horizontal line under the title, the long vertical line to the left of the content) are all the blue on the swatches (16314F) and all 2px wide. The long vertical line should extend to the bottom of the content, no matter how much there is.
5) The darker yellow is only used in the submenu for "unselected" items. Selected items on the submenu are white. Selected items on the menu are the light yellow. Unselected menu items are blue.
6) Basically ignore the gradient image underneath the submenu. You have the dimensions, so include space for it in the css. If you want to make a placeholder and you have the necessary image skills, go ahead and make one but don't feel that it is necessary. Again, I will be playing with the gradient and the width when you're done.
7) Fonts: I will definitely play with these after you finish:
Sans for menu, title, submenu
Serif for the content
submenu: 12 pt
Obviously, these should be easily changeable in the css.
8) Possible left column. I may put some content (possibly advertisements or something similar) in the left column (that blank space to the left of the content). It's not in the sketch, but the css you create should allow me to add text or leave it blank without wrecking the spacing on the rest of the site.
This template should look good in:
FF (latest) both PC and MAC (test on both, they treat fonts differently)
Safari (latest) both PC and MAC (test on both, they treat fonts differently)
The most important things are these:
- Clean, standards-based CSS. If you need help on standards, see the W3C
- Flexible layout. I will tweak the spacing and the fonts in your CSS. Your work must allow that without breaking.
- I too can make a sloppy, rigid layout using absolutes that holds together like a house of cards. I am requiring something better. If you are only learning CSS, this is not a good project to try.
Bids should include samples of your CSS work. Please let me know if you have any questions.
38 freelancers are bidding on average $108 for this job
expert in css/xhtml works, can do your work perfeclty, have done many similar projects, can provide u with w3c validated, css based layout, cross browser supporting, tablelesss, neat and clean css codes, seo optimized Daha Fazla
Experienced and serious team ready to start, please view pmb
I am expert in css/xhtml and design works and can provide 100% satisfaction, I can do your work perfectly and provide you with w3c validated, css based layout, all browser supporting, tableless and clean css codes. plz Daha Fazla
expert in css/xhtml/HTML/HTML5,Jquery works,Please check PMB for details and allow me to do the job. Thanks
HI, I am interested to work on your project,please check your PM,thanks.
i m looking for work with [url removed, login to view] [url removed, login to view] see pmb.
Please see Private Message Box for Details. Best Regards.
hello there, its a html/css expert with excellent knowledge of web design with clean, fresh, unique and web 2.0 design capability. hope to hear from [url removed, login to view] can visit my folio site for the works done. [url removed, login to view] Daha Fazla
Hi Please check our portfolio at [url removed, login to view] & our designer who will work if we win bid at [url removed, login to view] Thanks
Hi Sir, I Have good experience in PSD Slicing and XHTML and CSS coding. I have read all your requirements and I am very much interested in working with you. I have attached samples of my work in PM, pls take a look. A Daha Fazla