I've made a simple menu, every item is 300x100 pixels. There's an image in background positioned -150 pixels, when you mouseover an item it changes to 0 (so entire item has background). It works fine on Chrome, the background goes halfway on mouseover on IE, and the background is constantly positioned 0 on FF. How can I fix it?
S
HTML:
<ul class="wrapper">
<li id="webd" class="box"><span class="title">web design</span></li>
<li id="model" class="box"><span class="title">3D modeling</span></li>
<li id="digidraw" class="box"><span class="title">digital drawing</span></li>
<li id="other" class="box"><span class="title">other</span></li>
</ul>
Here's the CSS sample:
.box {
display: block;
position: relative;
width: 300px;
height: 110px;
background-color:black;
z-index: 15;
margin: 2px 2px 2px 2px;
font-family: 'web_serveroffregular';
color:white;
font-size:x-large;
transition: all .5s ease-in-out;
background-position-x:-150px;
background-repeat:no-repeat;
text-align:right;
}
#webd {
background-image:url(images/webd.png);
}
#webd:hover {
background-position-x:0px;
}
You can view the entire website at http://klaunfizia.pl/damian/ and the CSS at http://klaunfizia.pl/damian/style.css and http://klaunfizia.pl/damian/galeria.css
if you want.
#edit
changed:
background-position-x:-150px;
to:
background-position: -150px 0px;
This works fine on FireFox, but still goes only halfway on IE, background:fixed and backgroud-position:fixed ruins it for every browser.
background-position-x is invalid CSS. Use background-position: -150px 0px instead. Also, the background-attachment property must be set to "fixed" for this to work in Firefox and Opera (according to this page at W3Schools)
Related
I have a div that expands in height and changes it's border color on hover.
This is the CSS:
div.options {
width: 80%;
height: 62.7px;
margin: auto;
border-radius: 15px;
border: 3px solid #d0d0d0;
overflow: hidden;
transition: height 1s, border-color 1s;
}
div.options:hover {
height: 627px;
border-color: #656565;
}
<div class="options">Hello</div>
It works as it should on hover, but the problem is that the border color of the div changes from default black to the specified #d0d0d0 right on page load. The problem only occurs with ctrl+f5 reload, not regular reload. How do I make it not do that thing it does?
I have tested this on Firefox 72, Edge 84, and IE 11 with your code and a div like this:
<div class="options"></div>
It is functioning, there is no color flickering from black on page load with or without CTRL+F5.
Perhaps it is something from your side.
I've noticed an unanticipated effect of using CSS color transitions on an image with a transparent background. Here's an example:
:root {
--size: 4em;
--duration: 5s;
}
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu *:hover {
background: skyblue;
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image-div {
float: right;
padding: calc(var(--size) / 2);
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image {
max-width: var(--size);
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
To summarize, the issue is this. If you hover over the image-div div's padding, the background color of this div and the contained image div execute the color transition at the same rate, as expected. However, if you hover over the image div, its color appears to transition slightly faster than the image-div div's color.
Given the fact that I was able to reproduce this exact behavior on Firefox, Chrome, Safari and Edge, I get the feeling that this is expected behavior, but I would like to understand why it is happening.
When you hover over the img two hover events are triggered - one on the img and one on its parent image-div when you use * in .main-menu *:hover selector:
Instead use the hover only on the image-div as below:
.main-menu .image-div:hover {
background: skyblue;
}
and now the difference in transition will not be there - see demo below:
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu .image-div:hover {
background: skyblue;
}
.image-div {
float: right;
padding: calc(4em / 2);
-webkit-transition-duration: 5s;
transition-duration: 5s;
}
.image {
max-width: 4em;
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
Given the fact that I was able to reproduce this exact behavior on
Firefox, Chrome, Safari and Edge, I get the feeling that this is
expected behavior, but I would like to understand why it is happening.
The reason this happens is because the img transition picks up the image-div transitioned color, hence get lighter faster.
Simply put, the image-div goes from a solid black, while the img goes from black that turns into sky blue.
Additionally, since you move the mouse over the image-div before it gets to the img, the transition starts before, though the delay is based on how fast you move the mouse to the img
I'm creating a function where you hover over a div, which will result in another div appearing; a simple, CSS-only pop-over.
However, whenever the pop-over-div has an opacity:0, it still has a physical height and width, rendering other divs under the pop-over unreachable.
I know I can work with display:none and display:block, but this will remove the possibility of adding a smooth "arrival" of the div; it'll just pop in and out of the screen.
The question: Is there a way to remove the physical dimensions of a div with opacity:0?
In my JSfiddle, you will notice you can get the .iconhover to appear when you hover over the H or e. If you hover over the rest of the word, you're officially hovering over .iconhover and not .wishicon, resulting in the pop-over not showing up.
I hope my question is clear enough.
HTML
<div class="qs">
<div class="wishicon">Hello world</div>
<div class="iconhover">Hovering...</div>
</div>
CSS
.iconhover {
height: auto;
width: 100px;
margin-left:-0px;
color: #fff;
background-color: #666;
box-shadow: 0 1px 0px rgba(0,0,0,1), 0 2px 0px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5);
margin-top:-20px;
margin-left: 20px;
border-radius: 5px;
opacity: 0;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
transition: opacity 0.5s, margin 0.5s;
-webkit-transition: opacity 0.5s, margin 0.5s;
padding:4px 20px;
text-align: center;
position:absolute;
float: left;
}
.qs > .wishicon:hover + .iconhover {
opacity: 1;
margin-top: -20px;
margin-left: 20px
}
I have a terrific solution which I use often.
On the element with opacity: 0 put pointer-events: none.
It will still have the dimensions, but it will be as if all events are inactive.
Then when you want it to be opacity: 1, return pointer-events to auto.
This is the next best thing to using display: block/none but it can be transitioned!
That would certainly be nice, but alas, I'm not aware of any "ghost" CSS property.
I would treat it the same as a hover menu: make the parent hoverable instead of the previous sibling:
.qs:hover > .iconhover { opacity: 1; ... }
I posted a question last night about using media queries Fixed header and a responsive website issue
So I thought I finally cracked it but what seems to happen is when the screen is resized down the text jumps to the left and disappears. I thought all i had to do was make the #nav-wrapper the same size and the screen it will be on.
Here is the code
HTML
<body>
<div class="container">
<nav id="main-nav">
<div class="inner-nav" id="nav-wrapper">
<div class="ten columns">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</div>
</div>
</nav>
</body>
</html>
CSS - In Scss format as the CSS is compressed
//Navigation
#main-nav {
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-webkit-transition: box-shadow 0.2s linear;
-moz-transition: box-shadow 0.2s linear;
-ms-transition: box-shadow 0.2s linear;
-o-transition: box-shadow 0.2s linear;
transition: box-shadow 0.2s linear;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: block;
position: fixed;
top: 0;
left: 0;
float: left;
width: 100%;
z-index: 12;
height: 60px;
background-color: white;
#wrapper {
position: relative;
}
.inner-nav {
margin-left: auto;
margin-right: auto;
width: 800px;
}
ul {
float: right;
margin: 0;
width: 600px;
li {
vertical-align: middle;
display: inline;
margin: 0 2px;
color: black;
list-style-type: none;
a {
text-decoration: none;
}
}
}
}
And the media query I am calling
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
#nav-wrapper{
width:767px;
}
}
Can anyone tell me what I have to do so when the screen is mobile lets say the nav just resizes to fit the screen. Also I know the position:fixedthat how i want it so when the user scrolls the nav bar stays at the top. Although if there is a way to make the nav cover the top of the whole site I then wouldnt have to useposition:fixed as the framework I am using (http://www.getskeleton.com/) doesn't seem to allow me to do this.
I am trying to have a design like https://simple.com/ although not with the jQuery stuff just the nav at the top then the header across the page and content under. I have tried looks at their source but they are using custom style sheets and they are also compressed.
EDIT
It may not be clear what I am after, I want a website with a fixed header which is also responsive so on mobile devices it will fit the screen. The simple site is something im working off if anyone knows how they did there site im all ears.
The problem I see with your media query is that when the screen has a width bellow 767px you're telling the css processor to render the nav-wrapper element with a width of 767px. So, if a user accesses the page via a 480px width device, it would overflow the screen.
I'm not sure I understand what you're trying to accomplish, but my best suggest is to set the width to 100% in your media query (or delete it completely, and inherit the width:100% from the previous CSS declaration for that element).
I'm getting incorrect look in internet explorer 7,6, etc. It started when I added float: right; to #social-share div tag. I tried setting display: inline-block; to it and clear: both; but nothing worked for me.
You can see the issue live. Here is my code:
HTML
<header>
<div id="inner-border">
<div id="header-wrapper">
<div id="social-share">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4db8643a1c09a1ff"></script>
<!-- AddThis Button END -->
</div>
</div>
</div>
</header>
CSS
header {
width: 100%;
height: 115px;
background: #120c09;
margin: 50px 0 0 0;
border-top: 1px solid #100b07;
border-bottom: 1px solid #100b07;
}
#inner-border {
width: 100%;
height: 103px;
margin: 5px 0 0 0;
border-top: 1px dashed #291a10;
border-bottom: 1px dashed #291a10;
}
#header-wrapper {
width: 900px;
height: 103px;
margin: 0 auto;
}
#logo {
height: 230px;
width: 205px;
position: absolute;
z-index: 99;
margin: -57px 0 0 0;
background: url("../images/logo.png") no-repeat;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#logo:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#logo:active {
margin: -55px 0 0 0;
}
#social-share {
width: 280px;
float: right;
margin: -47px 0 0 0;
color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: 0.2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#social-share:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
This is correct look:
This is inncorrect look (ie7, 6)
Ignore css3 related stuff, the problem is that in ie 7,6 everything is squeezed to the top and search bar appears in the middle instead of on the right.
Your top nav is breaking up in IE7 because it is not properly defined what goes where and how. First, your logo is sort of "floating" inside of your document, since it is positioned absolutely with no point of reference in its container, so lets start by fixing that;
Add position:relative to your #header-wrapper CSS rule so we can properly contain your logo within its boundaries:
#header-wrapper {
position:relative;
}
Next, we have to rearrange your logo to properly sit in the middle of your #header-wrapper div. Previously you were using margin: -57px auto 0 auto; to align your logo but since you are already absolutely positioning it you don't really need margin at all (a miracle it was even working at all), so let's do some mathematics to absolutely position your logo in the middle of your header wrapper div:
First, we eliminate that margin declaration and replace it with the following:
#logo {
left: 50%;
top:-57px;
margin-left: -102.5px;
}
Now, what did we do here? First we pushed your logo 50% from the left and then pushed it back with a negative margin by -102.5 pixels. Why did we do this? Because the left declaration pushes your element with width added to the calculation, so the push actually means "50% to the left + width of your element", so, we use the negative margin to compensate for the width, 50% - width/2. Here is a better explanation of the process.
After the two changes I listed are complete, you will find that the logo sits behind your slideshow area, this is due to the ie7 z-index bug and the fix is actually very simple:
header {
position:relative;
z-index:999; /* ie7 z-index bug fix */
}
We fix it by defining your header section as position:relative and give it a higher z-index than your slideshow area, this way your logo will be over your slideshow.
Now to fix your search bar from positioning itself to the left instead of the right we have to define your #social-share section as position:absolute and then push it to the right by using right:0, why? Because IE7 is positioning your search bar right next to the #social-share who is being pushed to the top by using a negative margin, and thus is not being removed from the stream as expected (was surprised it actually worked in modern browsers). So, define your #social-share section as absolute and the problem is solved:
#social-share {
position:absolute;
right:0;
}
And the final fix is a conditional class that we're going to use to target your #_atssh <div> tag to position it relatively to your document. IE7 is not taking it into account because it is absolutely positioned and so that long space is removed.
We can take advantage of your conditional classes added to your <html> tag by the boilerplate and target IE7 alone with a fix:
.ie7 #_atssh {
position:relative;
}
Note: There is probably a billion typos and grammar errors, I wrote it during lunch so I'll comeback to this in the future and fix them.
looks like you need a clearfix:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
add this to the element that contains your floated element
Based off what I can see (sorry, no IE6 or 7 available), you might be able to fix this by using position and top instead of using the negative margins like this:
Remove the margin: -57px 0 0 0; from #logo to be top: 0px;. Since you're already using position: absolute;, this should place the logo at the top edge of the screen for you.
Remove the margin: -47px 0 0 0; from #social-share and instead add position: relative; top: -47px;
Including the proper clear or "clearfix" mentioned by JKirchartz may also be required.
Add the CSS property zoom: 1 to <div id="social-share">, header-wrapper, or inner-border.
I like how quirks mode explains the issue of hasLayout which is an IE6 & IE7 specific problem: http://www.satzansatz.de/cssd/onhavinglayout.html.