I have a div that includes contact information at the top left of the website. I want the top of the background to hide behind the blue header, but I want the email link to underline when I hover over it. By using z-index, I can get the email link to underline but the top of the background does not go behind the header. I can also get the background to go behind the header but then the email link doesn't underline when I hover. I can't get both to work at the same time. My website link is http://www.michaelgray.com/hometest.html. Can someone help me solve this problem? Thanks.
My contact info code is;
.contactinformation {
display: block;
position: absolute;
background-color: lightblue;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid gray;
z-index: -100;
font-weight: normal;
font-size: 135%;
color: darkblue;
padding: 10px;
margin-left: 75px;
box-shadow: 0px 0px 10px 0px black;
}
My header code is;
.header {
background-color: #00aeef;
z-index: 2;
box-shadow: 0px 0px 10px 0px black;
}
Right now you have your .contactinformation z-index set to -100 which causes is it to fall behind the main content. What you need to do is set it to something higher than the body content, but lower than the header.
For .header add position:relative; (which is necessary for z-index to have an effect) and for .contactinformation change the z-index to 1. You could also just remove z-index from .contactinformation completely.
Related
I want it to be like this:
Currently, it is like this:
So, as shown most of the background is highlighted in white but there is a small left and right section which is purple.
The code I have so far which correspond to the menu items is:
.collapsible-menu ul
li:hover:not(:last-child) {
background-color:white;
width:100%;
color: #4C27B3;
text-decoration: none;
outline:none;
}
It is probably a quick fix but I need a second pair of eyes to pinpoint the issue. Many thanks in advance.
All code can be seen here:
https://codepen.io/JoyFulCoding/pen/EzXowL
in Css
.menu-content{
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: bold;
padding: 0 0 0 50px;
/* add this margin left & right to make hover white full screen*/
margin-left: -79px;
margin-right: -30px;
}
in Css
.collapsible-menu {
background-color: #4C27B3;
border: none;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
Remove Padding from this class in code
How can I add a blur effect to my menu bar?
Is it even possible using css?
Its transparent right now but I want to add a blur to it.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
opacity: 0.85;
position: fixed;
top: 0;
left: 0px;
width: 100%;
border-bottom: 100%px solid #737373;
box-shadow: 0 3px 5px rgba(0, 0, 0, 10);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
I believe you can use the CSS:
-webkit-filter: blur(5px);
filter: blur(5px);
to add a blur to your menu bar. This is just off the top of my head though
A lot of cool filters (including blur) are used on http://www.cssfilters.co/ so i assume this will work for menu bars as well as images demonstrated.
You can achieve this by using text-shadow in CSS3
li {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
See Pen HERE
You would use the filer: CSS property with the blur(px) attribute. Find more HERE.
You would apply this to your Navigation <div>, whatever container that may be.
Note: You will have to have an opacity above 0 for the effect to work, However setting it to a desirable blurred color wouldn't be hard i.e. White, Black or Grey. You WILL also have create your navigation content OUTSIDE of that div and position it absolute over the blurred div. If not your content will also inherit the blur filter.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have already found an answer, but I am not sure this is the best approach for my problem. My page has two panels: one sidebar and one content view. I want to have a shadow over the sidebar as if the content view was producing it:
The problem is that my sidebar is a menu with buttons, icons, etc. So if I try to set the (inset) shadow there:
.sidebar {
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
I get:
So, where I have the buttons, they hide the shadow. If I do it the other way so the content view actually produces it:
.content {
box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
I get the shadow along with the content, but if the content is "shorter" than the total height of the screen, the shadow disappears. Similar to the previous case.
My final approach was to set a manual height for the content view or with Javascript, to adapt it to the viewport height. But I am not sure this is the best way to do it. I would like to know if there is a more CSS way to do it, without having to set things manually or getting shadows cut.
EDIT
While creating a fiddle for better understanding my problem I realized that I had a background-color on the buttons. But since I have a hover and a transition on the button, it still hides the shadow. Check it out: http://jsfiddle.net/h3cp59qd/
Check this out: http://jsfiddle.net/h3cp59qd/3/
Use position:absolute for both sidebar and content:
body, html {
background: #D8D8D8;
height: 100%;
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100%;
position: relative;
}
#sidebar {
width: 20%;
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
background: #C8C8C8;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar ul li {
padding-left: 20px;
height: 60px;
text-transform: uppercase;
color: white;
font-weight: 900;
font-size: 12pt;
line-height: 60px;
vertical-align: middle;
}
#sidebar ul li:hover {
background: #c0c0c0;
color: #EEE;
}
#content {
width: 80%;
position: absolute;
z-index: 100;
left: 20%;
top: 0;
bottom: 0;
padding: 0 50px;
box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
just change your background color to gradient:
http://jsfiddle.net/anshalexander/h3cp59qd/2/
background:-webkit-linear-gradient(left, #c0c0c0 0%,#c0c0c0 97%,#555 100%);
You can change the last color to match your shadow color
Maybe just a shadow background image with a repeat-y could do the trick in your css stylesheet.
background-image:url('your-image.jpg');
background-repeat:repeat-y;
Your image should be the shadow 1px height and as larger as you need.
Your header/footer can easily hide the shadow with their proper backgrounds.
EDIT
I saw your edit, here is mine :)
#sidebar ul li:hover {
background-color: #C0C0C0;
color: #EEE;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
There are a few things that need to be corrected. First, remove the padding from #content (it's messing up the width and forcing that div to the bottom).
Add the same box-shadow from #sidebar to your #sidebar ul li:hover style:
#sidebar ul li:hover {
background-color: #C0C0C0;
color: #EEE;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
Then on #app add position: absolute and height: 100%:
#app {
width: 100%;
height: 100%;
position: absolute;
}
Finally, on #sidebar remove min-height: 800px and add height: 100%, and that should fix it right up. See updated fiddle.
You'll notice that this adds a little bit of an edge to the buttons when they're being hovered over. This is due to the blur being greater than the offset. I think it looks good, but it can be fixed by increasing the (absolute values of) x-offset and spread values (the -7s) to greater than the blur-radius (the 9), e.g.:
box-shadow: inset -11px 0 9px -11px rgba(0,0,0,0.7);
So my problem is I have an image that when I hover over it, the box shadow changes color. However, I also have some text on the image that changes when the image is clicked, and the problem is that the area the text is in is preventing my box shadow from taking effect. The shadow only works if I hover over a part of the image that isn't occupied by text. Is there any way to fix this? Also I just realized this will affect when I make a click function as the text may prevent me from clicking the image.
HTML:
//The next pickaxe price
<p id="picklvl">Upgrade Pickaxe $<span id="picklvlc">5000</span></p>
//My location for my img
<img id="buy2" src="img/buy2.png">
CSS:
// Text that displays price of next pickaxe
#picklvl {
z-index: 100;
position: absolute;
font-family: fantasy;
top: 52%;
left: 55px;
font-size: 15px;
width: 130px;
}
// Gives location + shadow to my buy2 image
#buy2 {
position: absolute;
top: 60%;
left: 13px;
box-shadow: 5px 5px 5px black;
border: 1px solid;
border-radius: 5px;
z-index: -1;
}
// When I hover over buy2, shadow changes color
#buy2:hover {
box-shadow: 5px 5px 5px #272727;
}
Your text is laid over your image, so it's normal browser behavior that the hover wouldn't work. Because the text and image are not inside each other but elements on the same level in the DOM, you can only hover one at a time.
A fix to also apply the effect when the text is hovered:
#buy2:hover,
#picklvl:hover ~ #buy2 {
box-shadow: 5px 5px 5px #272727;
}
I'm having a bit of a problem with my codes. I have a transparent/glassy looking navigation bar on my page. I am trying to add a logo over it, however when I do, the logo as well is transparent and can see through it.
I think the problem may be that the navigation bar is coming before the logo, but in my codes, I have the logo coming first.
#nav {
background: #000;
height: 40px;
opacity: 0.15;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;">
<div id="nav">
</div>
</div>
The logo image is just a regular < img > tag with a bit styling centering it in the center.
Your question indicates the logo is outside the navigation container, but your symptoms indicate that it is a child of the nav bar. Even if it is not, your code is flawed, and you will soon experience similar issues on the children of the nav element.
The CSS opacity setting changes the opacity of the whole element, including children. Try setting a background color using rgba:
#nav {
background: #000;
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
The rgba background will fail in older browsers (IE8 and before), the #000 background is a fallback for them.
You could also create a semi-transparent png file and set it as the fallback background, this will work for IE7 and later (and IE6 if you use a png transparency hack):
#nav {
background: url('semitransparent.png');
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
If you have the logo inside of the "#nav" it will be transparent. you will have to give the logo a:
.logo{position:absolute;}
And move it over the navigation.
You can try raising the z-level of the image so that it "floats" above the other elements in the visual order.
<img src="image.png" style="z-index: 1000" />
Although it sounds like your image is inheriting styles from the parent element. If you're placing the image inside the #nav element, then this is probably the case. Make sure you set opacity: 1; on the image style in that case.
Side note: You might also want to extract that styling out of the element tag and into your CSS to make it clearer.
i think u should want this .
CSS
#nav {
background: rgba(0,0,0,0.1);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
color:black;
margin:10px 0 0 0;
position:relative;
padding-left:110px;
}
.logo{
position:absolute;
top:0;
left:0;
width:100px;
height:25px;
background:green;
}
HTML
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;margin:10px 0 0 10px;">
<div id="nav">
<div class="logo">Logo here </div>
your navi here
</div>
</div>
Live demo http://jsfiddle.net/rohitazad/yNMbt/