title: CSS: Overflow:Hidden - Issues with hiding specific elements and showing others
body: <p>Good Evening StackOverflowers!<br />
  I am running into what seems to be a catch 22 with my code. 
  I am using the new CSS3 Ribbon Navigation with an image logo. <br /></p>
  
  <p><strong>Here is my problem:</strong><br /></p>
  
  <p>The Ribbon Navigation has <em>overflow:hidden;</em> in the css to hide the bottom parts of the ribbon. However, to get my logo in the middle of the navigation, I need to include it in the DIV. With <em>overflow:hidden;</em> on, it crops my logo (because it's overflow), and my navigation looks like this:<br />
  <a href="http://i.stack.imgur.com/JoXyJ.png" rel="nofollow">http://i.stack.imgur.com/JoXyJ.png</a></p>
  
  <p>Not wanting to cut off my logo, I remove the <em>overflow:hidden;</em> but then I run into the problem of the ribbon tags showing under the nav, like so:
  <a href="http://i.stack.imgur.com/bZE26.png" rel="nofollow">http://i.stack.imgur.com/bZE26.png</a></p>
  
  <p>It seems there is no simple solution to this. As a new developer, I find I am starting to pull my hair out a little. Is there a workaround that will make the ribbon tails disappear, and allow my logo to show?</p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="ribbon"&gt;
          &lt;a href='#'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
      &lt;a href='#'&gt;&lt;span&gt;Portfolio&lt;/span&gt;&lt;/a&gt;
      &lt;a href="index.php"&gt;&lt;img id="logo" src="img/logo-grungewh.png" alt="logo"/&gt;&lt;/a&gt;
      &lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;
      &lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my CSS code:</p>
  
  <pre><code>/************************* 
  * Left Ribbon Navigation *
  **************************/
  .ribbon {
      margin-top:6em; 
  }
  
  .ribbon:after, .ribbon:before {
  margin-top:0.5em;
  content: "";
  float:left;
  border:1.5em solid #fff;
  }
  
  .ribbon:after {
  border-right-color:transparent;
  }
  
  .ribbon:before {
  border-left-color:transparent;
  }
  
  .ribbon span {
  background:#fff;
  display:inline-block;
  line-height:3em;
  padding:0 1em;
  margin-top:0.5em;
  position:relative;
  
  -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
  -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
  -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
  -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
  transition: background-color 0.2s, margin-top 0.2s;
  }
  
  .ribbon a:hover span {
  background:#D55E96;
  margin-top:0;
  }
  
  .ribbon span:before {
  content: "";
  position:absolute;
  top:3em;
  left:0;
  border-right:0.5em solid #9B8651;
  border-bottom:0.5em solid #fff;
  }
  
  .ribbon span:after {
  content: "";
  position:absolute;
  top:3em;
  right:0;
  border-left:0.5em solid #9B8651;
  border-bottom:0.5em solid #fff;
  }
  
  .ribbon a:link, .ribbon a:visited { 
  color:#000;
  text-decoration:none;
  float:left;
  height:3.5em;
  }
  
  /********************* 
  * Logo In Navigation *
  **********************/
  #logo {
  margin-top:-5em;
  z-index:3;
  border:0;
  }
  </code></pre>
  
  <p>Honestly, any advice or guidance would be <strong>truly</strong> appreciated. I have read many threads that have been posted on this, and they don't seem to be on the same wave. Thank you Overflowers for putting up with newbie's like me, and not ripping your hair out. <br />
  Best, <br />
  Laura</p>