Talking HTML 4o2k3e

A mixin allows developers to create reusable CSS blocks. This helps avoiding writing repetitive code. Also allows to make quick changes without searching code for every instance. @mixin image-rotate { margin: 20px auto 0 auto; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } @mixin image-rotate-hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } img#norm { @include image-rotate; } img#norm:hover{ @include image-rotate-hover; } Sitepoint example A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given when you @include the mixin. The arguments are then ed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name. @mixin headline ($color, $size) { color: $color; font-size: $size; } h1 { @include headline(green, 12px); } h1 { color: green; font-size: 12px; } h2 { @include headline(red, 10px); } h2 { color: red; font-size: 10px; } @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } Compiling program & link (Koala) Where to learn about SASS – http://sass-lang.com/ Codeacademy has a SASS class @tommnorman @tnpwdesign TNPWDesign.com WebDevPod.com   The post Eps 31: SASS MixIn appeared first on Talking HTML.

What is SASS? Considered an extension of CSS. I consider it a streamlined version of CSS. How it works Set up on your personal system – I use Koala to compile my code Done locally then ed to the server via Filezilla Create a .SCSS file Write ANY CSS code as you normally would Add the SASS styling code as you see fit variables mixins Code Nesting Putting code inside of code imports Get into it in a future eps Save file Compile code may do so automatically once SCSS file is saved. Compiling transforms your SCSS file into a CSS file Benefits Streamline CSS writing – The one change will be distributed accross to all the corresponding instances of whatever it is you changed. Negatives You have to learn how to use SASS You have to figure out how to get it to work on your computer, which can be a feat if you aren’t Computer savvy Variables Not usable in standard CSS SASS integrates a way to create variables which then translates to regular CSS when compiled $primary-color: #113e6d; /* BREWER BLUE */ $secondary-color: #c1c4c4; /* COWBOY GRAY */ $tertiary-color: #ffbf00; /* PACKER GOLD */ $quaternary-color: #294239; /* PACKER GREEN */ $quinary-color: #b70101; /* BADGER RED */ $font-stack1: 'Merienda One', cursive; $font-stack2: 'Kite One', sans-serif; $font-stack3: 'Sintony', sans-serif; body { background-color: $primary-color; font-family: $font-stack3; font-size: 62.5%; } #center { margin: 0 auto; background-color: $secondary-color; width: 800px; } Compiling program & link (Koala) Where to learn about SASS – http://sass-lang.com/ Codeacademy has a class @tommnorman @tnpwdesign TNPWDesign.com WebDevPod.com The post Eps 30: SASS Basics appeared first on Talking HTML.

Check your workflow Review EVERYTHING. Look at where you work Desk setup Are you in an external office or do you sit in your living room at home Do you need to find a new spot What are you sitting in Type of chair matters How many monitors are you using Do you need a new one? Do you need to add another? You can’t be productive if you are distracted or uncomfortable How do you work What is your text editor of choice Does it access FTP? Do you work off of your local machine and via an FTP client like Filezilla? How often are you checking your results. changes often and make minor tweaks along the way vs doing giant loads of work and fine tuning later How much time do you waste sweating the small problems vs waiting until the end of the day – or even the project – to move pixels Are you taking time to update your software? Very important, especially if you are using wordpress Checking for theme and plugin updates can be the difference between a hacked site and a site that loads quickly and efficiently Biggest question ARE YOU USING YOUR TIME WELL Biggest distractions: In home Kids Pets Technology Tv or phone Office setting Co-workers Technology Disorganized business Random meetings Too much watercooler talk How do you fix the issues Force yourself to take time – maybe 5 minutes a day – to organize your desk, clean up your computer desktop, reorganize files and folders On top of basic housekeeping ask yourself this: Can I improve myself Are you keeping up on current topics in design and development Are you trying new resources @tommnorman @tnpwdesign TNPWDesign.com WebDevPod.com The post Eps 29: Back to Basics appeared first on Talking HTML.

This episode is being used as an update to what is to come in the near future.SASS, Bootstrap and JavaScript for starters. Also a giant thank you to everyone who has ed, listened or rated this podcast. I have read the comments and I appreciate the nice words. Come back again for more episodes coming soon. @tommnorman @tnpwdesign TNPWDesign.com WebDevPod.com The post The Update Episode appeared first on Talking HTML.

A float allows an element to be moved/placed on the webpage Float event: elements are removed from the flow of the website. Will cause issues with non floated elements. Use: Float: left, right, none Clear: left, right, both ORDER MATTERS!!! Items in the first position will be placed first. Go to itunes, stitcher, or wherever you get your podcasts and leave the show a rating and a comment. Ratings get listeners! If you don’t leave a rating/comment then please tell a friend. @tommnorman @TNPWDesign Link to the Youtube video: https://youtu.be/vD3hA5xh7lA webdevpod.com CODE body {     Width: 980px; } #box1 {     height: 400px;     width: 300px;     margin: 10px;         background: #000; } #box2 {     height: 300px;     width: 300px;         margin: 10px;     background: #F00; } #box3 {     height: 200px;     width: 300px;         margin: 10px;     background: #0F0; } footer {     height: 200px;     width: 300px;     margin: 10px;         background: #00F;  } <div id=”box1″ class=”box”></div> <div id=”box2″ class=”box”></div> <div id=”box3″ class=”box”></div> <footer></footer>   The post CSS Float appeared first on Talking HTML.

A very basic tutorial on how to build a Material Design expanding circle as seen on Google products. Smashing Magazine Transition article Material Design Instructions https://design.google.com/ HTML <div class=”container_circle”> <div class=”circle circle1″> <!– <img src=”YOUR-URL-IMAGE.png”> –> <p>+</p> </div> <div class=”circle circle2″><p><a href=””>t</a></p></div> <div class=”circle circle3″><p><a href=””>f</a></p></div> <div class=”circle circle4″><p><a href=””>g+</a></p></div> </div> CSS .circle { width:60px; height:60px; box-shadow: 3px 3px 6px #333333; border-radius:50%; position: fixed; bottom: 10px; right: 10px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } .circle p { margin: 0; padding: 0; font-size: 40px; font-weight: bold; } .circle1 { background-color:#db4531; z-index: 4; } .circle2 { background: #00aced; z-index: 3; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .circle3 { background: #3b5998; z-index: 2; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .circle4 { background: #dd4b39; z-index: 1; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .container_circle:hover .circle2 { bottom:75px; } .container_circle:hover .circle3 { bottom:140px; } .container_circle:hover .circle4 { bottom:205px; }   The post Material Design: Expanding Circle appeared first on Talking HTML.

PHP includes are a vital aspect of websites and should be incorporated into every Web Developer’s workflow. Code via Chris Coyier and the CSS Tricks website    Main reason for using a PHP include: All code for a specific function is under 1 roof. If you need to make a change you change it in 1 spot instead of going to each and every individual page When using and creating includes the files need to have the php extension on the file.  Index.html turns into index.php   Popular includes to create: Footer.php Header.php Navigation.php  Other examples: Meta data/ stylesheets/ head information Social media Separate website tracking code if you don’t/can’t include it in the footer.   General include statement:  <?php include(“header.php”); ?> PHP include statement from root. <?php $path = $_SERVER[‘DOCUMENT_ROOT’]; $path .= “/common/header.php”; include_once($path); ?> DISCLAIMER: when using PHP includes you HAVE TO ensure ALL OF YOUR LINKS are sourced from the root. All internal navigation Direct links from 1 page to another that is not in the navigation Image file locations Generally speaking this is something to get into the habit of doing anyway, that way if you move something you don’t have to to fix the link. Also I do believe that this is a general web standard. webdevpod.com @tommnorman @TNPWDesign The post PHP Includes appeared first on Talking HTML.

http://www.w3schools.com/cssref/css3_pr_background.asp Individual Properties Background -image Background -repeat Background -position Background -size Shortcode background : #cccccc url(“img_tree.gif”) no-repeat fixed top left; Multiple Background Images background -image: url(“img_tree.gif”), url(“img_flwr.gif”); Properties positioning: top, bottom, left, right, center repeat, repeat-x (horizontal), repeat-y (vertical), no-repeat, horizontal% vertical% (top left is 0% 0%) horizontalpos verticalpos – ex= (0px 0px), (0em, 0em) background -image default is top-left corner of an element and repeated You can set a background to inherit, though I don’t recommend it. Gradients can be created – however it is not ed by all browsers. Use with caution. If you are interested in background gradients simply search css background gradients to find some tutorials @TNPWdesign @tommnorman Dreamhost.com – promo code: TNPW The post Eps 25: CSS Backgrounds appeared first on Talking HTML.

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out W3 Schools The headers attribute specifies one or more header cells a table cell is related to and has no visual effect in ordinary web browsers, but can be used by screen readers. Please go to iTunes and Stitcher and rate the show! Ratings get listeners!! http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw   HTML Code <div id=”table”> <table>    <tr class=”odd”>       <th id=”project”>Project Type</th>       <th id=”price”>Price</th>       <th id=”description”>General Requirements</th>    </tr>    <tr>       <td headers=”project”>Websites</td>       <td headers=”price”>$750+</td>       <td headers=”description”>Personal, Business (non e-commerce) or Informational.</td>    </tr>    <tr class=”odd”>       <td headers=”project”>E-Commerce</td>       <td headers=”price”>$2,500+</td>       <td headers=”description”>Websites in which selling merchandise is the main function.</td>    </tr>    <tr>       <td headers=”project”>Hourly Rate</td>       <td headers=”price”>$30/hour</td>       <td headers=”description”>Reserved for projects under 10 hours of work and website maintenance.</td>    </tr>    <tr class=”odd”>       <td headers=”project”>Charity and Non-profit</td>       <td headers=”price”>Negotiable</td>       <td headers=”description”>Reserved for organizations that deal with charities and non-profit organization.</td>    </tr>    <tr>       <td headers=”project”>Podcast Setup</td>       <td headers=”price”>$20/hour (minimum 1 hr)</td>       <td headers=”description”>The setup and demonstration of the programs and options available in beginning and maintaining a FREE! audio and/or video podcast.</td>    </tr> </table> </div> CSS Code div#table {    width: 600px;    font-size: 10px;    margin: 5px auto 5px auto; } table {    width: 400px;    border: 3px solid #000;    margin: auto;      padding: 10px;    border-spacing: 0;    text-align: center; } td, th {    border: 1px solid #000;    padding: 10px;    text-align: center; } tr.odd {    background: #333;    color: #FFF; } table tr th {    font-size: 1.6em;    font-weight: bold;    background: #999; } table tr td { font-size: 1.3em; } The post Eps 24: Building A Table appeared first on Talking HTML.

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out This is a basic web development tutorial on styling a primary navigation using HTML and CSS. As always, the code will be in the show notes. Please go to iTunes, Stitcher or Google Play Music and rate the show! Ratings get listeners!! http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw   /* HTML */ <nav id=”nav”>        <ul>       <li></li>      <li></li>    </ul> </nav>   /* Navigation */ #nav { padding-top: 205px; margin-left: 105px; } #nav ul li{ color: white; background: #113e63; display: block; width: 150px; position: relative; list-style-type: none; float: left; padding: 0px; margin: 0 3px 0 0; height: 40px; border: 0px solid #ffbf00; /*border-bottom: 3px solid #ffbf00;*/ border-top: 5px solid #fff; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; } #nav ul li a { display: block; text-decoration: none; color: white; font-size: 1.6em; line-height: 40px; text-align: center; } #nav ul li:hover, #nav ul li:focus, #nav ul li#current { background: #c1c4c4; line-height: 40px; border-top: 5px solid #7c765b; } #nav ul li a:hover, #nav ul li a:focus, #nav ul li#current a { color: #000; } The post Eps 23: Styling Your Navigation appeared first on Talking HTML.

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out <aside></aside> section of the page with content related to the page separate from that content. Used as a sidebar or an inserted box/space ments bio/blurb/profile information   related links on a site Does NOT have to be on the side of the site/page Be creative, use a circle or other shape Place it in the middle of the page, wrap wording around the container. Whatever you decide to do with it, make sure it sticks out as separate content Different background color, use a border of some sort As always, ease of use is most important over all Please go to iTunes and Stitcher and rate the show! Ratings get listeners!! http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw The post Eps 22: An Aside appeared first on Talking HTML.

Have a combination of long term and short term goals. Break goals into bite sized chunks. If you want to learn a language make weekly checkpoints. For long term goals have monthly or bimonthly checkpoints. Know who you are and be realistic about your goals.  Before you begin down your path it may be helpful to map out your plans. Create a calendar on your phone/computer and use notifications to keep you on track. social groups or local meet ups to enhance your experience. If you share your experience with friends, family or even strangers that may go a long way in having ability to someone more than yourself. Nobody likes disappointing other people. Give me a rating on iTunes, Stitcher or any other place you get your podcasts. Leave me comments! Webdevpod.com for all content and shows @tnpwdesign @tommnorman The post Eps 21: Resolutions appeared first on Talking HTML.

All about Google Fonts   <!– BEGIN GOOGLE FONTS –> <link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’> <!– END GOOGLE FONTS–> Ensure readability and accessibility before choosing a final font for your website! If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site! http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw   The post Eps 20: Google Fonts appeared first on Talking HTML.

Info about meta tags http://www.w3schools.com/tags/tag_meta.asp Info about HTML 5 Shiv https://en.wikipedia.org/wiki/HTML5_Shiv   If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site! http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw   <!DOCTYPE html> <html lang=”en”> <head> <title>TNPW Design</title> <meta charset=”utf-8″> <meta name=”description” content=”TNPW Design is a Freelance Website Design And Website Development Business in Green Bay, WI 54301. Podcast Creation Services Available.” /> <meta name=”keywords” content=”HTML,CSS,Web Development,Web Design”> <link rel=”stylesheet” href=”css/screen.css” media=”screen”> <link rel=”stylesheet” href=”css/phone.css” media=”screen”> <link rel=”stylesheet” href=”css/tablet.css” media=”screen”> <link rel=”stylesheet” type=”text/css” href=”css/jquery.fancybox.css” media=”screen” /> <!– BEGIN JQUERY LIBRARY –> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script> <!– END JQUERY LIBRARY –> <!– BEGIN GOOGLE FONTS –> <link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’> <!– END GOOGLE FONTS –> <!– FANCY BOX JAVASCRIPT BEGIN –> <script type=”text/javascript” src=”js/jquery.fancybox.pack.js”></script> <script type=”text/javascript” src=”js/jquery.fancybox.load.js”></script> <!– END FANCY BOX JS –> <!– Only use when building media rules –> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <!– End: meta – viewport –> <!–[if lt IE 9]–> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script> <!–[endif]–> </head> </html> The post Eps 19: Head Code appeared first on Talking HTML.

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out.   If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site! http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw <footer> <div class=”footer-box-1″> </div> <div class=”footer-box-2″> </div> <div class=”footer-box-3″> </div> <p id=”copyright”></p> </footer> <style> #center { width: 960px; } footer { clear: both; background: #7c765b; color: #FFF; height: auto; padding: 10px; } .footer-box-1 { width: 31%; background: red; color: black; float: left; padding: 5px 4px 5px 4px; margin: 5px; height: auto; font-size: 1.2em; } .footer-box-2 { width: 32%; background: red; color: black; float: left; padding: 5px 4px 5px 4px; margin: 5px; height: auto; font-size: 1.2em; } .footer-box-3 { width: 31%; background: red; color: black; float: right; padding: 5px 4px 5px 4px; margin: 5px; height: auto; font-size: 1.2em; } footer p#copyright { float: none; clear: both; margin: 15px 10px 0px 0px; font-size: 1.3em; text-align: right; line-height: 2em; } </style>     The post Eps 18: Coding A Footer appeared first on Talking HTML.

WordPress Optimization Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Child Themify WordPress Plugin allows for easy coding without actually changing the original theme starts with only the css file but you can add any file that you want. robots.txt the code for this file is in the show notes makes your site more accessible to search engine crawling/indexing if you use google dev tools you can see what your website looks like when it’s crawled by the google wizards. 1 of my sites looked completely broken. The images weren’t showing up and the content was a bit misplaced. When I added the robots.txt file and looked at it again the site looked as it should. Images were there and it looked like a complete website. P3 Profiler WordPress plugin by GoDaddy, the hosting company several different breakdowns of page load speed and how fast your plugins are loading Optimize your images Stay away from pngs if you can help it use JPG, smaller file size by default. Can be optimized in Photoshop to become smaller Ask yourself if social media share buttons are necessary or if you can get away with linking directly to the source   If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site!   http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw   The post Eps 17: Optimizing WordPress appeared first on Talking HTML.

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out     If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site! http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw   The post Eps 16: Code With Confidence appeared first on Talking HTML.

Window Resizer Chrome Extension –  After installing it shows up in the upper right hand corner of your Chrome window at the end of the address bar. It allows you to see the “Viewport Size” and “Window Size” of the current browser window in pixels.   This code goes into the HTML <!– Only use when building media rules –> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <!– End: meta – viewport –>   This code goes into the CSS @media screen and (min-width: 768px) and (max-width: 1024px) { Write CSS code as normal } @media screen and (max-width: 450px) { Write CSS code as normal } * { /*zero-out the default margin and padding on all elements*/ margin: 0; padding: 0; } <link rel=”stylesheet” href=”css/screen.css” media=”screen”> <link rel=”stylesheet” href=”css/phone.css” media=”screen”> <link rel=”stylesheet” href=”css/tablet.css” media=”screen”>   If you enjoy listening please share with your friends. Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site. http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw The post Eps 15: Media Queries appeared first on Talking HTML.

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site!   http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw     Code <!DOCTYPE html> <html lang=”en”> <head> <title> </title> <meta charset=”utf-8″> <!–[if lt IE 9]> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> </head> <style> #wood { /* 1st set of icons. Rotate them 360deg onmouseover and out */ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } img#wood:hover{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } </style> <body> <img src=”images/other-room.png” id=”wood”> </body> </html> The post Eps 14: Rotating Images appeared first on Talking HTML.

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Code will be attached to show notes for you to reference as you listen, or go ahead and copy it to try it out for yourself.   Start out with html  Use an Unordered list  Nest your lists Display: none; hides the dropdown menu display: block; makes the menu appear when attached using :hover to a <li>   If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site!   http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw   <style> <!–CSS–> #nav ul li{ position: relative; color: white; background: #113e63; display: block; width: 150px; position: relative; list-style-type: none; float: left; padding: 0px; margin: 0 3px 0 0; height: 40px; border: 0px solid #ffbf00; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; } #nav ul li a { display: block; text-decoration: none; color: white; font-size: 1.4em; line-height: 40px; text-align: center; } #nav ul li:hover, #nav ul li:focus, #nav ul li#current { background: #c1c4c4; line-height: 40px; } #nav ul li a:hover, #nav ul li a:focus, #nav ul li#current a { color: #000; } ul#pod-links { position: absolute; display: none; top:100%; left:0; } ul#pod-links li { color: white; background: #113e63; display: block; width: 150px; position: relative; list-style-type: none; float: left; padding: 0px; margin: 0 3px 0 0; height: 40px; border: 0px solid #ffbf00; border-top: 5px solid #fff; } ul#pod-links li a { display: block; text-decoration: none; color: white; font-size: 1.4em; line-height: 40px; text-align: center; } ul#pod-links li:hover, ul#pod-links li:focus, ul#pod-links li#current { background: #c1c4c4; line-height: 40px; } #nav ul ul#pod-links li a:hover, #nav ul ul#pod-links li a:focus, #nav ul ul#pod-links li#current a { color: #000; } #nav ul li:hover > ul#pod-links { display: block; } </style>   <!–HTML–> <nav id=”nav”> <ul> <li id=”current”><a href=”index.html” class=”button”>Home</a><span></span></li> <li><a href=”portfolio/index.html” class=”button”>Portfolio</a><span></span></li> <li><a href=”/.php” class=”button”>Hire Me</a><span></span></li> <li><a>The Podcasts</a> <ul id=”pod-links”> <li><a href=”http://www.talking1265.com” target=”_blank” class=”button”>Talking 1265 </a><span></span></li> <li><a href=”http://www.webdevpod.com” target=”_blank” class=”button”>Talking HTML</a><span></span></li> </ul> </li> </ul> </nav> The post Eps 13: CSS Drop Down Menus appeared first on Talking HTML.