When I put in a margin it adds 5px to the right as I expect it too, but it creates problems with my box-shadow. I want the box-shadow to be able to cover that space (white space) created by the margins. Is there a work around for that? Obviously if you don't have any margins the box-shadow looks fantastic.
Here is my CSS
#horizontalNav{
margin: 0;
padding: 0;
}
#horizontalNav ul{
margin: 0;
padding: 0;
box-shadow: 5px 5px 10px #888888;
}
#horizontalNav ul li{
margin-right: 5px; /* Make this margin a 0 to see what it looks like without margin added */
padding: 0;
list-style: none;
position: relative;
float: left;
background: linear-gradient(to bottom right, rgba(181,147,38,0.1), rgba(181,125,22,1));
}
#horizontalNav ul li a{
text-align: center;
width: 150px;
height: 30px;
display: block;
color: white;
border: 1px solid black;
text-decoration: none;
text-shadow: 1px 1px 1px black;
}
#horizontalNav ul ul{
position: absolute;
visibility: hidden;
top: 32px;
}
#horizontalNav ul li:hover ul{
visibility: visible;
}
#horizontalNav ul li:hover{
background: linear-gradient(to bottom right, rgba(167,120,38,0.1), rgba(167,136,42,1));
}
#horizontalNav ul li:hover ul li a:hover{
background: linear-gradient(to bottom right, rgba(180,105,45,0.1), rgba(180,135,15,1));
}
#horizontalNav ul li a:hover{
color: black;
}
#horizontalNav ul li ul li a:hover{
color: #120801;
}
Here is my HTML
<div id="wrapper">
<div id="horizontalNav">
<ul>
<li>Home
<ul>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
</ul>
</li>
</ul>
</div>
</div>
If you don't want the box shadow on the ul, then try putting the box-shadow on another element. The actual link seems to achieve what you want, but then grabs the top level link, so you might need to target even more specifically.
#horizontalNav ul ul a {
box-shadow: 5px 5px 10px #888888;
}
Actually... that's not the best element to add it too. Here is a stripped down fiddle with a complete answer. I also urge you to see how giving the right elements classes, (the fist ul) it makes things much more readable.
jsFiddle
why you are adding margin-right to 5px it seems worthless. For space you should add padding-right to 5px;
Related
I have a anchor containing a span element containing my text. The span element has these attributes
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
Now I want to create a shadow behind the border, but not the whole text. How would I do that without giving up on responsiveness?
.selected {
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 10px 10px 10px #59DFB8;
}
<div class="nav">
<ul>
<li><span class="selected">Home</span><span class="shadow"></span></li>
<li>Projects</li>
<li>About</li>
</ul>
</div>
Example:
The box-shadow property always uses its containing element's bounding box. You can't apply it to just part of an element, so you'll need to create an element specifically for the part that you want to have a shadow.
One solution would be to use pseudo-elements to create a child of the .selected element, and make that child look like an underline / bottom border. Then you can apply box-shadow to that.
Make your .selected element inline-block, so that its width is sized to its content. Then use the ::after pseudo-selector to create a block element inside of that, sized to the parent's width with a height of 5px and a solid background.
.selected {
/* so that its bounding box is only as wide as its contents */
display: inline-block;
}
.selected::after {
/* pseudo-elements must have content in order to render; give it a blank string */
content: '';
/* so it fills the parent horizontally */
display: block;
/* adjust to how tall you want the "bottom border" to be */
height: 5px;
/* color for the "bottom border" */
background: #59DFB8;
/* here's the shadow effect, adjust offsets and color as desired */
box-shadow: 10px 10px 10px #59DFB8;
}
Here is a full example, with simplified markup and some extra styles to make it look more like your example image.
ul {
list-style: none;
display: block;
background: #003447;
padding: 20px;
}
ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
}
ul li a {
font-family: Arial, sans-serif;
font-size: 20px;
color: #59DFB8;
text-decoration: none;
text-transform: uppercase;
}
ul li a::after {
content: '';
display: block;
margin-top: 5px;
height: 2px;
background: #59DFB8;
}
ul li a.selected::after {
box-shadow: 0px 0px 10px 1px #59DFB8;
}
ul li a:active::after,
ul li a:hover::after {
visibility: hidden;
}
ul li a.selected:active::after,
ul li a.selected:hover::after {
visibility: visible;
}
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
</ul>
You could do so with an :after or :before psudo-element.
.selected {
display: block;
float: left;
position: absolute;
width: 100%;
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 10px 10px 10px #59DFB8;
}
<div class="nav">
<ul>
<li><span class="selected">Home</span><span class="shadow"></span></li>
<li>Projects</li>
<li>About</li>
</ul>
</div>
I was going to expound but I see Woodrow beat me by a minute. ;p
Without seeing an example of how you want it to look I'm having to guess. The approach may depend on how subtle an effect you're going for. Here i've added a box shadow with a negative spread and semi-transparent fill:
a{text-decoration:none; color:#555;}
a:hover, a.active {
color:#000;
border-bottom: 5px solid #59DFB8;
padding-bottom: 2px;
box-shadow: 0 8px 10px -8px hsl(0, 0%, 40%);
}
.nav ul {margin:0; padding:0; display:flex;}
.nav li {margin:15px; list-style-type:none;}
<div class="nav">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>A Long One</li>
</ul>
</div>
I am trying to implement LI items horizontally as seen in the screenshot however I am not able to increase the height of the li item. I tried creating a class and assigning it to the li item and that still doesnt seem to work. Tried applying the height to the UL item and still doesnt seem to work. Could somebody tell me what the problem is ?
html
<div id="navcontainer">
<ul class="liheight">
<li class="liheight">Team Management</li>
<li class="liheight">User Management</li>
</ul>
</div>
CSS
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
.liheight {
min-height: 50px;
}
Desired height
Current implementation
Applying the solution
First answer explains it, but if you really want to keep 'inline' on li element, then just add line-height: 25px, or anything like that. It will increase line height and thus increase height of li element.
I am trying to implement LI items horizontally as seen in the
screenshot however I am not able to increase the height of the li item
This is accomplished using, display: inline-block. The reason is that when you try to increase the heigh of inline elements it has no effect, with inline-block it does.
Another way to make the li elements is to use floats: float: left
But it seems that what you are trying to accomplish is increase the height and width of the anchor tags, <a>, within the li elements and when the user hovers the pointer over it you get the blue color. This is done by making that inline element, the anchor tag, a block element and applying padding to make it grow.
Here are two possible solutions to your problem, you can choose the best one that fits your needs.
Solution one:
#navcontainer ul {
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
Solution two (using floats):
#navcontainer ul {
list-style-type: none;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
float: left;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
For further reading check out these articles:
CSS display: inline vs inline-block
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://alistapart.com/article/css-floats-101
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Change #navcontainer ul li to use display: inline-block, as the use of inline is restricting its height.
Additionally:
I'd recommend you use classes rather than your very specific and non-reusable structure you're current implementing.
Do not use min-height, as this just prevents an element from going below this height, usually used when it's scalable.
Here's a js-fiddle, I've just changed the display property and added a height value. https://jsfiddle.net/g9aspo90/
EDIT:
To fix the background colour not filling out, you should set the background-color on the li tag, rather than the a tag. When you set the background-color on just the a tag, then it will only cover the a tag's area, which in our case was smaller than its parent (once we increased its size). And since in actuality all we want to do is give the li tag a white background, it makes much more sense to set it there.
Here's the fiddle: https://jsfiddle.net/g9aspo90/1/.
And these are the changes I made:
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover {
color: #fff !important;
background-color: #009ddc;
}
Becomes
#navcontainer ul li {
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
color: #24387f !important;
}
#navcontainer ul li:hover {
color: #fff !important;
background-color: #009ddc;
}
Further comments:
I'd recommend you wrap the li tag in the a tag, rather than the other way around. This way the entire block will be a link, which I think is much nicer. So this:
<li class="liheight">
User Management
</li>
Would become this:
<a href="#">
<li class="liheight">
User Management
</li>
</a>
This messes up your styles a bit, but it should only take a few minutes to resolve. Good luck!
EDIT2: Here's how to resolve the styling issue, just changes the css selector #navcontainer ul li a to #navcontainer ul a li. https://jsfiddle.net/g9aspo90/3/
You can increase size of borders, your height and width will change according to that. Like this:
#navcontainer ul li {
display: inline;
border: 5px solid #009ddc;
border-left: 50px solid #009ddc;
border-right: 50px solid #009ddc;
border-bottom: 50px solid #009ddc;
border-top: 50px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
My suggestion would be to use bootstrap, it has navigation class so you can group all things together and control all on same time.
I have shifts in my NAV menu that I am having trouble resolving. The menu is CSS & HTML based. Issue 1 > Mousing over Headings 1 through 4 causes a slight shift to the right of any headers to the right. How do I stop that? Issue 2 > Mousing over Header4 reveals a sub menu that initially appears fine. But when you hover over the sub menu the item of focus gets larger than the other sub menu items, so it looks sloppy. How do I correct this? Issue 3 > The Setting menu's sub menu (last menu item) expands in width when the sub menu is hovered over. I'd like it to be the same width whether it is being hovered over or not. How? Perhaps the same answer as #2.
Lastly, a general observation I'd like some feedback on. My original CSS for this NAV seemed pretty straight forward to me. As I've observed things that need to be "adjusted" I've added a tweak here, another there, and still another there, until now it seems completely convoluted. Is this common, or am I just mucking things up with bad tweaks? Thanks for your help.
CSS:
/* NAVIGATION */
#menu{
padding 0;
margin: 0;
}
.nav{
margin: 0;
padding: 0;
}
.nav ul{
padding: 0;
background-color: #003366;
}
.nav ul li{
display: inline-block; /*added*/
padding: 10px 22px 10px;
border-right: 1px solid #dadada;
position: relative;
background-color: #003366;
}
.nav ul li:hover{
background-color: #336699;
/* Adding the padding makes the hover selection not jump */
padding: 10px 22px 10px 26px;
left: -4px;
}
.nav ul li:hover ul{
display: block;
position: absolute;
}
.nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
.nav ul li ul{
display: none;
left: 0px;
/*width: 403px;*/
margin-top: 10px;
padding-top: 0px;
box-shadow: 0px 1px 1px rgba(85, 85, 85, 0.75);
border-top: 1px solid #dadada;
}
.nav ul li ul li{
width: 143px;
border-bottom: 1px solid #dadada;
background-color: #336699;
}
.nav ul li ul li:hover{
background-color: #FFF8DC;
left: 0px;
}
.nav ul li ul li a{
text-decoration: none;
color: #FFFFFF;
}
.nav ul li ul li:hover a{
color: #000;
}
#settings {
padding: 6px 22px;
/*vertical-align:middle;*/
float:right;
border-right:none;
}
#settings:hover {
padding: 6px 18px;
}
#settings > ul {
position: absolute;
left: -124px;
top: 27px;
}
Web Page:
<?php
$access = 0
?>
<html>
<head>
<title>Nav</title>
<link rel="stylesheet" href="basicnav2.css"/>
</head>
<body>
<div id="menu">
<nav class="nav">
<ul>
<li>
Heading1
</li>
<li>
Heading2
</li>
<li>
Heading3
</li>
<li>
Heading4
<ul>
<li>
Item 1
</li>
<li>
Item 2
<li>
</ul>
<li>
Heading5
</li>
<?php
if ($access < 2)
{ ?>
<li id="settings">
<img src="images/settings.png" alt="Settings" height="25" width="25">
<ul id ="settings ul">
<li>
Logout
</li>
</ul>
</li>
<?php
} ?>
</ul>
</nav>
</div>
<div id="textarea">
<p>This is sample text.</p>
</div>
</body>
</html>
What is the reason for this part of your code:
/* Adding the padding makes the hover selection not jump */
padding: 10px 22px 10px 26px;
left: -4px;
Removing it appears to fix the problem at my end.
Issue1:
The expansion of li elements is caused due to addition of
left: -4px;
in .nav ul li:hover css section
However, removing it is causing little space on left of each li.
Issue 2 solution is removing the padding in the same above css section :
padding: 10px 22px 10px 26px;
Instead just use below line to jump to sub-menu:
padding-bottom: 10px;
Demo : http://jsfiddle.net/pdfn0auw/2/
Edit : new demo included
This is how I want the navigation bar, as in : http://themediaoctopus.com/social-media/nostalgic-approach-advertising
How to change the complete color of <li> when hovered on or selected?
Any idea on how to get those seperators between those buttons?
Selection action doesn't work, why? I'm on a particular page and that button on navigation bar is not highlighted. Why and how can I do it?
Here is my current navigation bar when hovered:
Here is my HTML :
<body>
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>GET IT</li>
<li>WHAT YOU CAN DO</li>
<li>ABOUT</li>
</ul>
</nav>
</body>
Here is my CSS :
body {
color : #F9F9F9;
}
nav {
background-color: #26AD60;
margin: 10px 10px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 15px 0px 15px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
color: #F9F9F9;
border-bottom: none;
font-weight: bold;
text-decoration: none;
}
nav ul li a:active {
background-color: #1C8148;
text-decoration: none;
}
nav ul li:hover {
background-color: #1C8148;
color: #F9F9F9;
}
Add this:
padding: 15px 10px 15px 10px;
To your nav ul li:hover{ CSS
Fiddle: http://jsfiddle.net/39Lzp/
In order to have that item be highlighted based on the page you are on you can add a class to it and style that class accordingly. Then, in each different HTML file, you add that class to the corresponding element. For example, index.html would look like this:
<li class="current">HOME</li>
<li>HOW IT WORKS</li>
But how_it_works.html would look like this:
<li>HOME</li>
<li class="current">HOW IT WORKS</li>
Now, for the borders, all you need to do is use the border property like so:
nav ul li {
border-left: 1px dashed white;
}
nav ul li:first-of-type {
border-left: none;
}
Also, in order for the border to span the entire height of the nav bar, change this:
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
To this:
nav ul li {
display: inline;
padding: 15px 10px 15px 10px;
}
http://jsfiddle.net/LbBEK/
Also, for future reference, you have 3 separate questions here. Next time, break your questions up to be more concise and you'll find yourself getting a much better response here on SO.
Its good if you use a:hover and the properties given to it... which allow user to have clickable area been selected and highlighted.
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>project</li>
</ul>
</nav>
CSS:
nav{
display:block;
background:#26AD60;
}
nav ul{
list-style:none;
margin:0px;
padding:0px;
overflow:hidden;
}
nav ul li{
float:left;
border-right: 1px dashed rgba(255, 255, 255, 0.25);
}
nav ul li:last-child{
border:none;
}
nav ul li a{
transition: all 0.25s linear 0s;
padding: 0px 20px;
line-height: 50px;
outline: medium none;
font-family:arial;
font-size:12px;
color: rgb(255, 255, 255);
text-shadow: none;
text-transform: uppercase;
text-decoration:none;
display:block;
}
nav ul li a:hover{
background: #229b56;
}
Please check this jsfiddle to see the same.
Just change the hover statement background-color
nav ul li:hover {
background-color: blue; // here
color: #F9F9F9;;
}
You may want to change the active statement too
nav ul li a:active {
background-color: red;
text-decoration: none;
}
For the border, you can like something like this :
nav ul li {
border-right: 1px dashed rgba(255,255,255,0.25)
}
nav ul li:last-child {
border: 0; // they dont do this, but I prefer with it. As you want.
}
Demo JSFiddle
Apply this on hover padding: 15px 10px 15px 0px;
See demo
Apply border property border-right: 1px dashed #fff for dashed separation between li.
I have a problem with z-index in a CSS-Menu. I built the menu with nested ul Tags.
Clearly, the first ul is the first level in the menu-hierarchy. As a background-property of this first ul, I set a gradient and a box-shadow, all with CSS of course.
The second ul (the nested one) is the second level in the menu-hierarchy. I gave it a gray background-color.
Unfortunately, the second ul overlays the first ul. I tried to play around with z-index, but I can't get it to work. I'd like to get the shadow of the first ul over the nested ul.
Here is the code so that you may reproduce it:
CSS:
ul.menu {
/* Gradient: */
background: #444;
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
background: -moz-linear-gradient(top, #999, #777);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#777');
height: 25px;
/* Box-Shadow: */
-moz-box-shadow: 1px 3px 3px #888;
-webkit-box-shadow: 1px 3px 3px #888;
box-shadow: 1px 2px 3px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
position: relative;
z-index: 20;
}
ul.menu, ul.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu a {
display: block;
text-decoration: none;
color: #000;
line-height: 22px;
padding-right: 15px;
padding-left: 15px;
}
ul.menu li {
padding:0;
margin:0;
float:left;
}
ul.menu ul {
margin-left: 15px;
padding: 0;
position: absolute;
display: none;
background-color: #CCC;
z-index: 10;
}
ul.menu li:hover ul {
display: block;
}
ul.menu ul li {
float: none;
}
Here is the HTML:
<ul class="menu">
<li>ONE
<ul>
<li>SUB_ONE</li>
<li>SUB_TWO</li>
<li>SUB_THREE</li>
</ul>
</li>
<li>TWO</li>
<li>THREE</li>
</ul>
Is there any way that the first ul overlays the second ul or is it just not possible?
I have a work-around. By inserting a DIV above the nested UL that has its own shadow, you can get it on top of the sub-menu.
See: http://jsfiddle.net/SLkrN/6/
Short answer after some testing appears to be: even setting all elements to float, the containment of the sub menus in the parent .menu ul is causing them to not respond to z-index changes except relatively, never decreasing below the parent UL. I'll continue experimenting. May I suggest, however, putting the submenus lower so they at least are inline with the bottom of the parent ul?
ul.menu ul {
margin-left: 15px;
margin-top: 5px;
padding: 0;
position: absolute;
display: none;
background-color: #CCC;
z-index: 10;
}