I have have made a site which has a dropdown menu. The rest of the web page doesn't change when the dropdown menu is called for because I have given the page position:relative;.
And the dropdown has a higher z-index than the page so it is visible at all times. The only problem I have is that I also want to change the background-color of the dropdown-menu when someone hovers over it.
But unfortunantely, when I hover over the dropddown, the browser thinks that I am hovering over the page and for some reason doesn't understand that I am actually hovering over the dropdown-menu. Can anyone please help me with this.
#page {background-color;
height: 2500px;
width: 1600px;
margin: auto;
position: relative;
}
#dropdown {
margin: 0px;
}
.dropdownitem {
opacity: 0.7;
z-index: 1;
background-color: red;
}
.dropdownitem:hover {
background-color: aqua;
color: white
}
I think I have come to understand what the problem is. The thing is that I have a div with
position:absolute
And inside that div there are a number of list items. Because my parent div has absolute positioning, the element has been taken out of document flow and when I hover over the list items, the :hover pseudo class does not work on those nested list items. So now I have found the reason, but what only rests is the solution, and I haven't yet found that.
This may help
ul,
li {
padding: 0;
margin: 0;
}
li {
list-style: none;
padding: 1em;
}
#page {
margin: auto;
position: relative;
}
.mainmenu,
.submenu {
border: thin solid darkgray;
text-align: center;
}
.submenu {
display: none;
}
.mainmenu:hover>.submenu {
position: absolute;
top: 50px;
left: 0;
display: inline-block;
}
.mainmenu,
.dropdownitem {
width: 4em;
}
.dropdownitem {
opacity: 0.7;
background-color: red;
}
.dropdownitem:hover {
background-color: aqua;
color: white
}
<div id="page">
<nav>
<ul id="dropdown">
<li class="mainmenu">Main
<ul class="submenu">
<li class="dropdownitem">One</li>
<li class="dropdownitem">Two</li>
</ul>
</li>
</ul>
</nav>
</div>
Related
This is my first time implementing the standard html nav. However, the list elements inside nav are not positioned inside nav the way I want them to be, and although I've changed most of the obvious properties that come to mind, I haven't been able to:
Center the li elements inside nav
Make the width of the li elements fit perfectly inside nav
I don't understand why they are by default positioned so awkwardly to the right of their parent container, or why setting 'width: 100%' isn't the solution. When I set the positioning on the li elements to absolute, it seems to mucks up everything since I need each list element to be positioned relative to where the element before it is placed.
There seems to be a few possible ways I could go about solving this problem, but they seem sort of hackish, and I'm wondering if there's a more obvious solution I lack the experience to see.
nav {
width: 40%; height: 500px;
left: 50%;
transform: translateX(-50%);
position: relative;
border: 2px solid black;
}
nav ul li {
list-style: none; text-align: center;
width: 99%; height: 100%;
position: inherit;
padding: 1%;
border: 2px solid black;
border-top: none;
margin: 0;
display: block;
background: blue;
}
<nav><!--
--><ul><!--
--><li class="user">WelcomeVids</li>
<li class="user">Diablo</li>
<li class="user">FreeCodeCamp</li>
<li class="user">OtherStuff</li>
<li class="user">Dota2</li><!--
--></ul><!--
--></nav>
To see the output, view my Codepen: http://codepen.io/sentedelviento/full/grzrgR/
This is because most browsers default to adding a padding-left to <ul>. You can override that:
/* Added */
ul {
padding-left: 0;
}
nav {
width: 40%; height: 500px;
left: 50%;
transform: translateX(-50%);
position: relative;
border: 2px solid black;
}
nav ul li {
list-style: none; text-align: center;
/* width: 99%; height: 100%; */
position: inherit;
padding: 1%;
border: 2px solid black;
border-top: none;
margin: 0;
display: block;
background: blue;
}
<nav><!--
--><ul><!--
--><li class="user">WelcomeVids</li>
<li class="user">Diablo</li>
<li class="user">FreeCodeCamp</li>
<li class="user">OtherStuff</li>
<li class="user">Dota2</li><!--
--></ul><!--
--></nav>
I'd recommend the following changes to your CSS:
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
box-sizing: border-box;
width: auto;
}
I have a menu using ul/li items, and they have a background image.
All over the Internet, and in stackoverflow, there is information on how to hack background image opacity. For example: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
But not for my particular use case when using menus. It seems particularly tricky. From everything I have tried, one of the solutions in the aforementioned website seems to work the best.
But still, the image is not vertically aligned. I cannot seem to be able to center the image in the menu...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {background-color: #4CAF50;}
.my-container {
position: relative;
overflow: hidden;
}
.my-container a {
position: relative;
z-index: 2;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.2;
}
<ul>
<li><div class="my-container">Aaaa <img src="http://www.joaobidu.com.br/jb/content/uploads/2012/03/cancer3.png"></img></div></li>
<li><div>Bbbb</div></li>
<li><div>Cccc</div></li>
<li><div>Dddd</div></li>
<li><div>Eeee</div></li>
</ul>
Hi,Please try this one.
If we will use top:-14px,It will affecting the modern browser like chrome and safari which is not accepting negative values.So we can use below format for background images.
.my-container {
background-image:url("http://www.joaobidu.com.br/jb/content/uploads/2012/03/cancer3.png");
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
I have a slideshow which works by absolutely positioning images one on top of the other and then changing the z-index of whatever slide I want to appear. The problem is I'd like to move it to the center and have the "prev" link and the "next" link on either side of the slideshow.
I've been trying to create a container with relative positioning around the absolutely positioned items and can get the slideshow to move around, but the next link doesn't show up on the other side of the slideshow (and I hope not to use hacks with margins to mess up the flow of the page).
My goal is to be able to treat the slideshow box just like any other box that flows with the rest of the page. Is there a way to do that?
my html
<a id="prevLink" href="#">Prev</a>
<div class="container">
<ul id="slideshow">
<li class="current">First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<a id="nextLink" href="#">Next</a>
my css:
.container {
position: relative;
}
#slideshow {
position: relative;
list-style-type: none;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
Link to the slideshow: http://codepen.io/KenjiCrosland/pen/QyqVaz
A couple changes you need:
Set the #container to display:inline-block and give it a width so that it stays inline.
remove the default padding from #slideshow.
Try this CSS:
.container {
position: relative;
width:15em;
display:inline-block;
}
#slideshow {
position: relative;
list-style-type: none;
padding:0;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
Here's a fork of your Pen.
You need to give a width and height to .container and center it.
Set in absolute prev and next, add some padding to .container so it has room for buttons. http://codepen.io/anon/pen/MKERWZ
.container {
position: relative;
width: 15em;/* 3x5em of lis */
height:15em;
padding: 0 4em;/* room on left/right for buttons */
margin: auto;
background: gray;/* demo purpose, lets see where it stands */
}
#slideshow {
list-style-type: none;
margin:0 ;
padding:0;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
#prevLink,
#nextLink {
position:absolute;
top:50%;
line-height:0;/* to set in center without translate() */
}
#prevLink {left:0.75em;
}
#nextLink {right:0.75em;
}
What I have:
I have a navigation menu with box-shadows assigned to each of the links.
Immediately beneath the navigation menu follows a div that touches the bottom of links.
The bottom of the box-shadow breaks the illusion of my tabbed interface.
What I need:
I need to prevent the box-shadow of the links from casting on the following div.
My code:
ul {
list-style: outside none none;
padding:0; margin:0;
}
li {
display: inline-block;
}
a {
background-color: grey;
color: white;
padding: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: inline-block;
text-decoration:none;
box-shadow: 1px 1px 3px #222;
}
.selected a{
background-color: blue;
}
div {
background-color: blue;
height: 20px;
}
<nav>
<ul>
<li class="selected">Home
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</nav>
<div class="divider"></div>
Very simple:
Just add position:relative; to the div
div {
position: relative; /* add this */
background-color: blue;
height: 20px;
}
Demo: http://jsfiddle.net/a2wLb1fz/
Why does this work?
Basically you will need to establish stacking contexts to make the layout layered using z-index.
To do this, you need to have an explicitly defined positioning and a z-index for the layers.
BUT, since in your case it's only two layers, the links container and the bar below it, you can omit the extra definitions since defining positioning on the bar below the links is sufficient.
This is a longer version of what will do the job for you:
nav {
position: relative;
z-index: 1;
}
div {
position: relative;
z-index: 2;
background-color: blue;
height: 20px;
}
Demo http://jsfiddle.net/a2wLb1fz/1/
The code validates. There should be two more images in the menu on the left, above the visible one of the silo. And each should be a link.
http://www.briligg.com/agnosticism.html
css is: external style sheet:
.menu {
position: relative;
float: left;
margin: 10px;
padding: 0;
width: 150px;
}
.menu li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 0;
top: 260px;
}
.menu li, .menu a {
width: 150px;
height: 150px;
}
internal style sheet:
.menu {
height: 450px;
}
.mirror {
top: 0;
}
.mirror {
background: url(http://www.briligg.com/images/menu-ag.png) 0 0;
}
.wormcan {
top: 151px;
}
.wormcan {
background: url(http://www.briligg.com/images/menu-ag.png) 0 -151px;
}
.wormsilo {
top: 301px;
}
.wormsilo {
background: url(http://www.briligg.com/images/menu-ag.png) 0 -301px;
}
html:
<ul class="menu">
<li class="mirror">
</li>
<li class="wormcan">
</li>
<li class="wormsilo">
</li>
</ul>
In your internal stylesheet, you have to specify better. Because .menu li is very specified, it overruns .wormcan.
Try .menu li.wormcan in the internal stylesheet.
Haven't tested this, but from a quick look, this seems to be the problem.
Hum - maybe you should try setting the links (.menu a) to display: block to have the links working properly. Otherwise the link won't stretch to use the specified size, links are inline elements (correct me if I'm wrong, didn't test it).