Skemcin Posted January 25, 2007 Share Posted January 25, 2007 I had an assignment handed to me this morning to make a landing page for an email campaign set to launch next week. I'm given nothing but a logo and picture of a couple doctors hovering over a laptop - yeah, no content is't "coming this afternoon".So, a couple minutes ago I fire off an email saying "done" - lol. The code is below and I had to remove the logo and the photo, but they basically went across the top.This is EXTREMELY simple and pretty crude. The ONLY reason why I am sharing this is to demonstrate how the left navigation box has a subtle overlay on the border that contains the content. Also, I found it interesting how I set the main page div to 69%, auto margin it to center it on the page and then used half of the remaining 31% to float the left navigation. Resizing your browser window keeps everything intact - only IE has a small gap which I could care less about.To expand on this idea, one could add a few subtle touches by puttin images in the right places to rond off the corners if you wanted a softer look. Or, you could build a regular site inside this design and use the toggle (show/hide) script I have in my Javascript Snippet section of the forum to create a message or alert box.It currently validates too (for those extremists). Not bad for 2 hours of work with NOTHING to go on. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>CSS Basic</title><style type="text/css">body { margin:5px; padding:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}.ht_page { margin:0px auto; padding:0px; width:69%;}.ht_body { margin:0px auto; padding:0px; border:#C51D33 1px solid;}.ht_content { margin:0px; padding:10px;}.ht_feature { margin:0px; padding:5px; border:dashed black 1px; background-color:#FFFFCC;}.ht_title { color:#C51D33; font-weight:bold; font-size:14px; font-variant:small-caps;}.ht_navigation { margin:0px; padding:5px; background-color:#C51D33; color:#FFFFFF; float:left; position:relative; top:105px; width:15%; text-align:right;}a.ht_menulink:link,a.ht_menulink:visited,a.ht_menulink:active { color:#FFFFFF; margin:0px; padding:3px; font-weight:bold; line-height:21px; text-decoration:none;}a.ht_menulink:hover { color:#C51D33; background-color:#FFFFFF; margin:0px; padding:3px; font-weight:bold; line-height:21px; text-decoration:none;}</style></head><body><div class="ht_navigation"><a href="./" class="ht_menulink" title="xxxxxx">xxxxxx »</a><br /><a href="./" class="ht_menulink" title="xxxxxx">xxxxxx »</a><br /><a href="./" class="ht_menulink" title="xxxxxx">xxxxxx »</a><br /><a href="./" class="ht_menulink" title="xxxxxx">xxxxxx »</a><br /><a href="./" class="ht_menulink" title="xxxxxx">xxxxxx »</a><br /><a href="./" class="ht_menulink" title="xxxxxx">xxxxxx »</a><br /><a href="./" class="ht_menulink" title="xxxxxx">xxxxxx »</a><br /><br /></div><div class="ht_page"> <div class="ht_body"> <img src="xxxxxx.xxx" alt="xxxxxx" width="468" height="80" hspace="5" vspace="5" border="0" /><br /> <div class="ht_content"> <strong class="ht_title">Welcome</strong><br /> ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tristique rhoncus urna. Donec sollicitudin elementum felis. Aliquam urna leo, dictum sit amet, porttitor et, mattis nec, sem. Vivamus sodales iaculis magna. Integer ut pede a ligula consequat consequat. Etiam quis ligula. Aliquam erat volutpat. Aenean vitae libero. Maecenas et nibh in nulla pulvinar eleifend. Nullam dictum. Morbi elementum ultricies lorem. Nulla ipsum. Duis tempor facilisis purus. Morbi pellentesque massa vel arcu. Nulla elementum, dui id facilisis adipiscing, neque enim elementum dui, quis fringilla libero tellus eu metus.<br /> <br /> <div class="ht_feature"> <strong class="ht_title">Feature</strong><br /> Pellentesque urna. Etiam tristique, metus auctor volutpat volutpat, tortor risus pulvinar diam, quis aliquam purus pede eget quam. Mauris id erat semper est ultrices sagittis. Vestibulum ut elit vitae erat interdum lobortis. Etiam at neque non elit dictum tristique. Nunc condimentum egestas sapien. Donec mattis hendrerit massa. Nulla imperdiet metus id lacus. Sed euismod posuere tellus. Pellentesque luctus semper velit. Nulla facilisi. Pellentesque pede diam, venenatis eu, rutrum sed, facilisis at, pede. Curabitur condimentum, eros vel viverra pellentesque, massa quam aliquam felis, sed faucibus nisl ante et lorem. Donec euismod, orci id suscipit consequat, dolor lorem fermentum odio, sit amet placerat velit magna eget dui.<br /> </div> <br /> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum erat nisl, cursus in, porta et, congue vel, metus. Vivamus ultricies vehicula nulla. Vivamus nonummy. Duis sagittis lacus ut libero. Sed suscipit eleifend nulla. Ut luctus pulvinar purus. Nullam quis lacus a nulla convallis tincidunt. Aliquam placerat ipsum et mi. Ut pede dui, gravida eu, pharetra a, nonummy eu, turpis. Donec non eros non quam accumsan convallis. Sed scelerisque tellus sit amet libero. Duis ac nibh. Nunc auctor, ante vulputate commodo varius, erat nunc ultrices urna, vel ultrices erat nisi vel purus.<br /> <br /> <strong class="ht_title">More Information</strong><br /> In in orci. Praesent nec nisl. Duis ante diam, venenatis at, dictum id, ullamcorper vitae, neque. Ut adipiscing iaculis tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ut lorem ut lacus nonummy lobortis. In hac habitasse platea dictumst. Quisque in elit. Proin purus lectus, pulvinar eget, rutrum ac, luctus a, tortor. Morbi lorem nisi, placerat sit amet, fringilla at, rhoncus ac, enim. Curabitur ullamcorper blandit nisl. Donec sem velit, rutrum eget, ullamcorper eleifend, ullamcorper sed, massa. Aenean volutpat faucibus enim. Nunc dignissim viverra orci.<br /> <br /> Mauris sit amet sapien. Maecenas tristique. Sed id metus. Ut quis est ut lectus pulvinar vulputate. Pellentesque dapibus. Curabitur erat metus, dapibus quis, rhoncus ut, malesuada in, quam. Fusce dignissim neque ac quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae urna eget augue eleifend mollis. Nulla erat purus, consequat quis, condimentum a, vestibulum nec, arcu. Donec molestie neque eget quam. Praesent et turpis vel enim tempor consequat. Nunc justo.<br /> <br /> </div> </div></div></body></html> Link to comment Share on other sites More sharing options...
dalewb Posted January 29, 2007 Share Posted January 29, 2007 Not bad at all. Do you have a link to this in action? I'd be interested in seeing it. Link to comment Share on other sites More sharing options...
Guest Craig J Posted January 29, 2007 Share Posted January 29, 2007 Nice and clean... What did your co-workers think? Link to comment Share on other sites More sharing options...
Skemcin Posted January 29, 2007 Author Share Posted January 29, 2007 Here is the page as it stand in "production"http://www.pedialink.org/hottopics/They are refining the data as it is not entered in the database correctly. But this working version shows a few ways to make a little more out of the very basic layout. I was more interested in findingout how the code was rendered with the auto margin and percentages.Anyway, they loved it - but anything you turn around in less than a day is fodder for them. I'm glad to get them off my back.:)Its fun to stumble on to things like this.I've added a few FF things like "-moz-border-radius:10px 0px 0px 10px;" to the style sheets to round off the cornersp.s. I'm not convinced I like the in text jumps and how they work/don't work with the show/hide script I have posted here:http://w3schools.invisionzone.com/index.php?showtopic=9500 Link to comment Share on other sites More sharing options...
dalewb Posted January 29, 2007 Share Posted January 29, 2007 Skemcin,I don't really understand what special thing it is you did here. But I am curious: how long did it take you to learn all those programming languages? That's one crazy list you have going there under your name. Link to comment Share on other sites More sharing options...
Skemcin Posted February 6, 2007 Author Share Posted February 6, 2007 dalewbAdmittingly, there is nothing special about the code I recently posted here. As I pointed out, I just thought it was interesting to see how the combination of <div>s used allowed me to consistently put that one on the side - by using percentages that were a calculation of the left over widths percentages. Yeah, nothing special, just an interesting personal discovery.As for my experience, I began coding more than ten years ago when I was a Resort Manager and Ski (first snowboarder - I can't ski) Patroller at http://www.skiwisp.com/. I did their first website and it's success basically changed my career path. The variety of programming languages comes from working on a variety of projects with different requirements - and basically just forcing myself to learn something that I needed to learn to get the job done. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now