CODEWITHSUNDEEP
htmlcssoverflow
Laura Mabee
Laura Mabee

Reputation: 51

CSS: Overflow:Hidden - Issues with hiding specific elements and showing others

Good Evening StackOverflowers!
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.

Here is my problem:

The Ribbon Navigation has overflow:hidden; 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 overflow:hidden; on, it crops my logo (because it's overflow), and my navigation looks like this:
https://i.sstatic.net/JoXyJ.png

Not wanting to cut off my logo, I remove the overflow:hidden; but then I run into the problem of the ribbon tags showing under the nav, like so: https://i.sstatic.net/bZE26.png

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?

This is my HTML code:

<body>
    <div class="ribbon">
        <a href='#'><span>Home</span></a>
    <a href='#'><span>Portfolio</span></a>
    <a href="index.php"><img id="logo" src="img/logo-grungewh.png" alt="logo"/></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Contact</span></a>
</div>

and my CSS 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;
}

Honestly, any advice or guidance would be truly 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.
Best,
Laura

Upvotes: 4

Views: 1112

Answers (1)

Musa
Musa

Reputation: 97672

What I would do is set the anchors in the ribbon to overflow hidden except the one that holds the logo

.ribbon a:not(#logo-anchor){
    overflow:hidden;
}

​ Fiddle

If you target browser doesn't support :not then give all the anchors except the one with the logo a class.

.ribbon a.overflow-hidden{
    overflow:hidden;
}

Fiddle

Upvotes: 2

Related Questions