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:
http://i.stack.imgur.com/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:
http://i.stack.imgur.com/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>
<img id="logo" src="img/logo-grungewh.png" alt="logo"/>
<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
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
Related
I'm trying to do a sidebar for my html page. But i could not adjust the width of the sidebar. Also the menu icon when click should be closing/open the sidebar but it does not work.
Im a new learner , please help.
My code at here!
#sidebar {
background:#151719;
height:1000px;
width:20%; <!--- Cannot adjust width --->
position:absolute;
left:-248px; <!--- this will let the sidebar disapper --->
transition:all .3 ease-in-out;
-webkit-transition:all .3 ease-in-out;
-moz-transition:all .3 ease-in-out;
-ms-transition:all .3 ease-in-out;
-o-transition:all .3 ease-in-out;
}
You are close, but comment separators should be /*..*/, not <!---..--->. CSS is not HTML. Those comments prevent the CSS from being parsed correctly.
Then there is a #sidebar {width: 100%; halfway down, which overrides the width:248%; on the top.
And finally, the selector for moving the sidebar on selecting the checkbox should be #menuToggle:checked ~ #sidebar. Yours did nothing.
If you correct those errors, the page works flawlessly.
*{padding:0px;
margin:0px;
font-family:sans-serif;}
#sidebar{
background:#151719;
height:1000px;
width:248px; /* Cannot adjust width */
position:absolute;
left:-248px; /* this will let the sidebar disapper */
transition:all .3 ease-in-out;
-webkit-transition:all .3 ease-in-out;
-moz-transition:all .3 ease-in-out;
-ms-transition:all .3 ease-in-out;
-o-transition:all .3 ease-in-out;
}
#sidebar .menu li{
list-style-type:none;}
#sidebar .menu a{
text-decoration:none;
color:rgba(230,230,230,0.9);
display:block;
padding:15px 0;
border-bottom:1px solid rgba(100,100,100,0.45);}
#header{
width:100%;
height:5%;
margin:auto;
border-bottom:1px solid #EEE;}
#header .brand{
float:left;
line-height:50px;
color:#151719;
font-size:30px;
font-weight:bold;
padding-left:20px;}
#sidebar{
/* width:100%; */ /* removed because this would override the 248px above */
text-align:center;}
#sidebar .menu li:last-child a{border-bottom:none;}
#sidebar a:hover{
background:grey;
color:black;}
.menu-icon{
margin:2.5px 5px 0px 0px;
padding:10px 15px;
border-radius:5px;
background:#151719;
color:rgba(230,230,230,0.9);
cursor:pointer;
float:right;}
#menuToggle:checked ~ #sidebar {
position:absolute;
left:0;} /* Not sure is it correct or not, by clicking the checkbox, the sidebar should be displayed nicely, back to original */
<input type="checkbox" id="menuToggle" style="display:none;">
<label for="menuToggle" class="menu-icon">☰</label>
<div id="header">
<div class="brand">Cinema</div>
</div>
<div id="sidebar">
<ul class="menu">
<li>Dashboard</li>
<li>Help Center</li>
<li>Summary</li>
<li>Customer Interface</li>
</ul>
</div>
you can set width like this :
width: 20vw;
left: 0; // left: -20vw;
Your styles are applied to the #menuToggle item. Therefore the sidebar never hears about this change.
#menuToggle:checked {
position:absolute;
left:0;
}
Also because both elements do not have HTML relations, a CSS workaround might be risky. It's important to mention the selector #menuItem ~ #sidebar which will select #sidebars that precede #menuItem.
#menuToggle:checked ~ #sidebar {
position:absolute;
left:0;
}
Although it is definitely more prone to break in the future when the website has more content.
I suggest you have an event listener on the checkbox to toggle a class on the sidebar element. This can be done like so:
document.getElementById('menuItem').addEventListener('change', function(e) {
let sidebar = document.getElementById('sidebar');
this.checked ?
sidebar.classList.add('active') :
sidebat.classList.remove('active');
});
hi i want to make a effect like this to my div on a hover:
website with the effect, hover over the people div's to see
I have tried to make a grid but I am strugling to get the hover effect on top of the div.
my codepen link, need the hover on the blocks
You'll need a container div and at least one foreground div to cover the background (could be just an image). Then you'll want to target the parent on hover and change the foreground child. I used transform instead of animating a position property because it's more performant.
.card{
position:relative;
width:200px;
height:200px;
border:1px solid blue;
overflow:hidden;
}
.card > div{
height:100%;
width:100%;
}
.card .foreground{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform:translateX(100%);
background-color:blue;
transition:.5s ease;
}
.card:hover .foreground{
transform:translateX(0);
}
<div class="card">
<div class="foreground"></div>
<div class="background"></div>
</div>
You can attach styles to a div by using the :hover keyword.
Example, you want to change some effect on the div on hover:
div:hover {
background-color: black;
}
You want to change some effect on a child, on parent hover
div:hover .child {
background-color: black;
}
EDIT
Ok, check the class changes when you force hover on their page, their original element has these styles:
z-index: 200;
content: "";
height: 263px;
width: 102px;
background-color: #91c6c2;
display: inline-block;
position: absolute;
top: 0px;
right: -50px;
-webkit-transform: skew(21deg);
transform: skew(21deg);
-webkit-backface-visibility: hidden;
-webkit-transition: right 0.5s;
transition: right 0.5s;
On hover, they just change the elements "right", to 80px, which makes it float in via the mentioned transition, "transition: right 0.5s".
you require a overlay effect on hover of a div.
Please refer this link
<div id="overlay">
<span id="plus">+</span>
</div>
CSS
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px;}
Found this in google search and also lots of plugins are avila
This may not be the most efficient way but it was most definitely the easiest that I've found. You can add the absolute position to the hidden div to make it on top of the image if you so choose!
HTML:
<div id='backgroundImg' onmouseover="hoverOver('show');" onmouseout="hoverOver('hide');">
<div id='hiddenDiv'>
</div>
<img src='myImage.png'>
</div>
Javascript:
<style>
function hoverOver(type) {
if (type=='show') {
document.getElementById('hiddenDiv').style.display='inherit';
} else {
document.getElementById('hiddenDiv').style.display='none';
}
}
</style>
I am trying to create an event with just CSS that will have a DIV (which is coloured white) turn from 0.6 opacity to 1.0 opacity when I hover over a separate div, so much so that when I hover over one div the other looks as if it is faded out.
My code can work if I wanted the div I hover over to fade but I want to hover and change the other div not the one I am hovering over.
HTML
<div id="sell1">
<div class="s1"></div>
</div>
<div id="gap"></div>
<div id="sell2">
<div class="s2"></div>
</div>
CSS
#sell1 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#sell2 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#gap {
height:50px;
background-color:white;
}
.s1, .s2 {
width:100%;
height:247px;
position:absolute;
background:rgba(255, 255, 255, 0.6);
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#sell2:hover .s1 {
opacity:1;
}
http://jsfiddle.net/UgsyL/186/
So here I want to hover over the "sell2" div and have .s1 turn from 0.6 to 1.0 opacity.
Any help?
With your current setup of HTML, that's impossible. However, as LinkinTED pointed out, it's possible to hover #sell1 and make .s1 fade, by styling #sell1:hover ~ #sell2 .s2 { ... }.
If you need only to hover #sell2 and change .s1, you can switch their places in the HTML, making it:
<div id="sell2">
<div class="s2"></div>
</div>
<div id="gap"></div>
<div id="sell1">
<div class="s1"></div>
</div>
And then style the divs with relative and absolute positioning to be switched, as well as styling the hover with the code provided by LinkinTED.
This isn't THE answer to the question I asked originally but it is a work around I finally figured out that works for what I am wanting to do.
HTML
<ul>
<li><div></div></li>
<br/>
<li><div></div></li>
</ul>
CSS
div {
background-color: rgb(40,80,120);
height: 100px;
width: 200px;
}
ul li {
display: inline-block;
}
ul li div {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
}
ul:hover li div {
opacity: .5;
}
ul:hover li div:hover {
opacity: 1;
}
http://jsfiddle.net/xbMtN/7/
I have developed an CSS and HTML code to create some kind of accordion multi-banner. I'm not using javascript at all.
Every thing works fine,except for I issue I can not resolve:
Start point is the first image "expanded"
If you hover over some other image, the former hovered one srinks,and the current also expand. Remainig ones accomodate their witdh
PROBLEM: if you hover fast from left to rigth to the last image you come to a point where you can over a greyed on (wrapper background) and all iamges remain then collapsed.
A must should be that,always, no matter what, there's at least one image expanded to show let's say an ad,product to choose...
How can I resolve that? The reason I'm not using width:auto is that it currently doesn't make any transitions with that value set.
CODE at http://jsfiddle.net/7NR4Y/
<style type="text/css">
#wrapper div.sector {
width:50px;
height:250px;
background-position:top center;
background-repeat:no-repeat;
float:left;
max-width:300px;
opacity:0.5;
overflow:hidden;
-webkit-transition:all 1s ease-out; /* Chrome y Safari */
-o-transition:all 1s ease-out; /* Opera */
-moz-transition:all 1s ease-out; /* Mozilla Firefox */
-ms-transition:all 1s ease-out; /* Internet Explorer */
transition:all 1s ease-out; /* W3C */
}
#wrapper #first{
width:300px;
max-width:300px;
min-width:50px;
opacity:1;
}
#wrapper:hover div.sector{
width:50px;
max-width:100%;
opacity:0.5;
}
#wrapper:hover #first{
width:50px;
max-width:100%;
}
#wrapper div.sector:hover{
width:300px !important;
opacity:1;
}
</style>
<body>
<div id="wrapper" style="width:500px; height:250px; background-color:#CCC; overflow:hidden; position:relative;">
<div id="first" class="sector" title="Imagen 1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTpTF_3Pjjnsum_miN1hicvsPb-44qUm4Qban2_MfzEHevwK0_" /></div>
<div class="sector" title="Imagen 2"><img src="http://1.bp.blogspot.com/-dazqpbQnahc/UaxhFz6mwgI/AAAAAAAAGJQ/pVhtFcqEBiY/s640/Ideal-landscape.jpg" /></div>
<div class="sector" title="Imagen 3"><img src="http://2.bp.blogspot.com/-XegWV6RbUmg/UKIA7m7XgDI/AAAAAAAAAtA/6yQKXMkTjmA/s640/village-vector-the-dock-pixels-tagged-beach-landscape-512305.jpg" /></div>
<div class="sector" title="Imagen 4"><img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" /></div>
<div class="sector" title="Imagen 5"><img src="http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg" /></div>
</div>
I have added the following to your CSS
a:last-child div.sector {
position: relative;
overflow: visible !important;
}
a:last-child div.sector:after {
content: "";
position: absolute;
left: 100%;
top: 0px;
height: 100%;
width: 100px;
background-color: green;
}
This creates a pseudo element after the last div of your series.
This pseudo will receive the hover state and transmit it to the element. This, way, even if the cursor goes in the zone of the wrapper that gets exposed sometimes, it will still get it selected.
I have it green so that you can se what is happening, of course in production make it transparent.
fiddle
Disregard all the previous answer !
All you need is
a:last-child div.sector {
overflow: visible !important;
}
fiddle 2
What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!
***I'd prefer a pure CSS/HTML solution as I don't use javascript.***
What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.html and mouseover some of the links).
What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).
I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/ but would like to have the option of an image in the top left corner.
Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay.
The first two css classes are what you need in your code, rest is just for example.
http://jsfiddle.net/ctJ3d/8/
.popupBox {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
transition: all 0.4s ease;
transition-delay: 1s;
}
.popupHoverElement:hover > .popupBox {
visibility:visible;
opacity:1;
transition: all 0.3s ease;
transition-delay: 0s;
}
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
}
<div id="button" class="popupHoverElement">
<h3>hover</h3>
<div id="two" class="popupBox">Hovered content</div>
</div>
I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/
HTML:
<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>
CSS:
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}
There is a tutorial called Sexy Tooltips with Just CSS that might be exactly what you're looking for. There are two things to watch for:
This solution requires that your tooltip be in your HTML markup, instead of reading from the title attribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the title attribute as the value of the content property for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltips and Stack Overflow: How to change the style of Title attribute inside the anchor tag?
If you are still providing support for older browsers, be aware the IE7 will not obey the :hover selector for anything but A tags. If you need the tooltips to appear in IE7 for any element but an A tag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.
<div id="one"><h3>hover over me</h3>
<div id="two">Hovered content</div>
</div>
#one {
background:#443322;
position:relative;
width:100px;
height:30px;
display:block;
color:#FFFFFF;
}
#two {
background:#223344;
position:absolute;
width:100px;
height:100px;
display:none;
color:#FFFFFF;
}
#one:hover #two {
display:block;
left:100px;
}