http://goldencraft.co/stackoverflow-test/
HTML:
<ul class="list">
<li>item 1</li>
<li>item 2
<ul class="list">
<li>item 2 -> sub item 1 <span>Stack Overflow</span></li>
<li>item 2 -> sub item 2
<ul class="list">
<li>sub item 2 -> sub-sub item 1</li>
<li>sub item 2 -> sub-sub item 2</li>
</ul></li>
<li>item 2 -> sub item 3
</ul></li>
<li>item 3</li>
</ul>
CSS:
ul.list li {
padding-left: 12px;
line-height: 2em;
background: url('../images/list_arrow.png') no-repeat 0px 8px;
}
ol ol,
ol ul,
ul ol,
ul ul {
padding-left: 40px;
}
I cannot figure out the following:
Make the line-height and/or padding match up with the button css style (click here to view [see .button span])
Align the (background-image) arrow to the line of text (if 1 gets fixed, this is easy to do with simple background-position)
I'm hoping someone here has a solution, as I'd love to finish this.
If I understand the question correctly you might be looking for something like the following:
a.button, a.button:hover
{
text-decoration: none;
margin-top:-0.1em;
height:1.4em;
top:0.5em;
}
button span
{
position: relative;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
/*border-top: rgba(255, 255, 255, .2) 1px solid;*/
line-height: 1em;
text-decoration: none;
text-align: center;
white-space: nowrap;
margin: 0px !important;
padding: 0 0.75em;
top:-0.3em;
}
Related
I want to override the nav a css using something like nav> li >a
I don't want to manually add some class and them override from there.
<style>
nav a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
</style>
<nav>
<ul>
<li>
CSS
<ul>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
</ul>
</li>
</ul>
<nav>
I've searched for this and can't seem to find a decent solution.
I'm trying to make a left border on a given <li> element so it marks the active option. The effect I'm going for is similar to Gmail where they mark the open folder with a red border, e.g:
I inspected how it's done on Gmail but looks like a series of <div>'s. I'm just trying to do it with list items.
I have this: https://jsfiddle.net/5txj3dpe/2/
So my markup is straightforward - a set of list items, with a .active applied to the active element ("Item 2" in this case):
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
li {
list-style: none;
}
li.active {
border-left: 4px solid red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
I want to make it so that the red border is flush with the .list-container and there is some space between the red border and the text. Basically I want to make it look similiar to the Gmail screenshot.
Please can anyone advise how to do this. Is it possible with an unordered list, or do I need additional <div>'s, etc?
You need to remove the padding on the ul, not the div like you're doing. Then you can add padding to the li elements. Remember to subtract the size of the border from the padding of the active li:
.list-container {
border: 1px solid #ccc;
}
.list-container ul {
padding: 0;
list-style-type: none;
}
.list-container li {
padding-left: 20px;
}
.list-container li.active {
border-left: 4px solid red;
padding-left: 16px; /* 20px - 4px = 16px */
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
We'll need to remove the browser's inherited padding from the ul, to make the elements flush with the container. Then we'll give all the li elements a transparent border, and change the border-left-color of the .active element to the desired color.
.list-container {
border: 1px solid #ccc;
margin: 0;
padding: 0;
}
.list-container ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
padding: 5px 20px;
border-left: 4px solid transparent;
}
li.active {
border-left-color: red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
You could also use box-shadow inset to achieve this.
https://jsfiddle.net/kL5n2d1e/
You should remove the padding from the ul and apply it to the li's this way you can use the border shadow to create the effect you need without moving anything in the flow of the document.
Alternatively you can just add padding to the li and this will also work.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
ul {
padding:0;
}
li {
list-style: none;
padding: 1em;
}
li.active {
box-shadow: inset 3px 0px 0px red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
You just need to play with padding and margin parameters to get this effect.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0px;
}
li {
list-style: none;
padding-left:10px;
}
li.active {
border-left: 4px solid red;
margin-left: -4px;
}
The border should be always present. Just make it transparent if li is not active.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
li {
list-style: none;
padding: 3px 8px;
border-left: 4px solid transparent;
cursor: pointer;
}
li.active {
border-color: red;
}
li:not(.active):hover{
border-color: #ccc;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
I have created a CSS dropdown menu but it is not working in IE. However, in Firefox and Chrome, it works perfectly. I am wondering what is the defect in the code that makes it not work in IE! Please help!.........
ul {
list-style: none;
padding: 0px;
margin: 0px;
float: left;
left: 40%;
display: inline;
}
ul li {
display: block;
position: relative;
float: left;
left: 85px;
}
li ul {
display: none;
margin: 0;
}
ul li a {
display: block;
background: #660000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-left: 1px solid #660000;
border-right: 1px solid #660000;
}
ul li a:hover {
background: #3300cc;
margin: 0;
}
li:hover ul {
display: block;
position: absolute;
margin: 0;
}
li:hover li {
float: none;
}
li:hover a {
background: #3300cc;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
position: relative;
padding: 0px;
z-index: 100;
border-bottom: 0px;
margin: 0;
right: 0;
left: 0;
}
li li:hover a {
display: block;
}
li li ul a {
display: none;
border-left: 1px solid #660000;
margin-left: 60px;
margin-top: -30px;
margin-bottom: 30px;
}
li:hover li:hover ul li a:hover {
background: #660000;
margin-top: -30px;
margin-bottom: 30px;
margin-left: 60px;
border-left: 1px solid #660000;
}
<div class="nav">
<ul class="drop-nav">
<li>Item 1
</li>
<li>Item 2
Item 2 sub 1
</li>
<li>Item 2 sub 2
</li>
<li>Item 2 sub 3
</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3 sub 1 »
<ul>
<li>Item 3 sub 1.1
</li>
<li>Item 3 sub 1.2
</li>
<li>Item 3 sub 1.3
</li>
</ul>
</li>
<li>Item 3 sub 2 »
<ul>
<li>Item 3 sub 2.1
</li>
<li>Item 3 sub 2.2
</li>
<li>Item 3 sub 2.3
</li>
</ul>
</li>
<li>Item 3 sub 3
</li>
<li>Item 3 sub 4
</li>
<li>Item 3 sub 5
</li>
</ul>
</li>
<li>Item 4
</li>
<li>Item 5
<ul>
<li>Item 5 sub 1
</li>
<li>Item 5 sub 2
</li>
</ul>
</li>
<li>Item 6
</li>
<li>Item 7
</li>
<li>Item 8
</li>
</ul>
</div>
Add this to your html file.<meta http-equiv="X-UA-Compatible" content="IE=9"/> in your and make sure you use <!DOCTYPE HTML>
For these type of errors, just go to developer tools and see whether you can find any css compilation error. I haven't simulate your scenario.
But I have come across a similar issue like you faced. Some styles worked well in Firefox and chrome, but not it IE and edge.
When I inspected the elements in IE, due to some reasons some style had some syntax error. I can't exactly recall that style. But assume following is the problematic style.
font-size: 16p;
This might get interpreted as "font-size: 16px" or this syntax error might get ignored in Chrome and Firefox, but IE might catch them and may not apply that style.
This could be the reason for these type of issues. My suggestion is check the problematic styles in developer tools and resolve them.
I have a CSS dropdown navigation menu with a submenu. My problem is that the submenu closes before I click on it. When I move the cursor halfway to the submenu, it disappears. For example when I move my mouse to click on "Item 3 sub 1.1", it disappears.
The main dropdown menu works fine but the submenu is the problem.
What can I do to make the submenu stay until I click on it?... Thanks for the help
This is my CSS for the menu:
.nav {
padding: 0px;
text-align: center;
border: 0px;
vertical-align: middle;
display: table-row;
width: 100%;
margin: 0px auto;
background-color:#660000;
overflow: hidden;
position:relative;
height: 30;
text-align: center;
margin: 0px auto 0px auto;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
float:left;
display:inline;
}
ul li {
display:block;
position: relative;
float: left;
left: 85px;
}
li ul {
display: none;
margin:0;
}
ul li a {
display: block;
background: #660000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-left:1px solid #660000;
border-right:1px solid #660000;
}
ul li a:hover {
background: #3300cc;
display: block;
}
li:hover ul {
position: fixed;
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #3300cc;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
z-index: 100;
border-bottom:0;
right:0;
left:0;
}
li li:hover a {
display: block;
}
li li ul a {
margin-top:-25px;
margin-bottom: 25px;
margin-left: 85px;
display: none;
}
li:hover li:hover ul li a:hover {
margin-top:-25px;
margin-bottom:25px;
margin-left: 85px;
overflow: none;
}
This is the html:
<div class="nav" >
<ul class="drop-nav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
<li > Item 2 sub 2</li>
</ul>
</li>
<li> Item 3
<ul>
<li> Item 3 sub 1 »
<ul>
<li> Item 3 sub 1.1</li>
<li> Item 3 sub 1.2</li>
<li > Item 3 sub 1.3</li>
</ul>
</li>
<li> Item 3 sub 2 »
<ul>
<li> Item 3 sub 2.1 </li>
<li> Item 3 sub 2.2 </li>
<li> Item 3 sub 2.3 </li>
</ul>
</li>
<li> Item 3 sub 3 </li>
<li> Item 3 sub 4 </li>
<li> Item 3 sub 5 </li>
</ul>
</li>
</ul>
</div>
Your css selectors are very confusing. Only using ul li and then li ul or li li ul a on the next line is too vague and not really targeting an element. While this approach might work for nesting of one level deep, it seriously get's confusing (for the browser) when you start nesting 2 level deep.
I'd give each UL element a certain, descriptive class, which you can precisely target.
Additonally, make use of the position attribute for your UL and don't forget to think about z-index when menus overlap.
Something like this, not very pretty, but it works the way you propably expect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
position: relative;
top: 0;
width: 80%;
height: auto;
border: 1px solid #e6e6e6;
margin: 0 auto;
font-family: 'Helvetica', Arial, sans-serif;
}
/* Root Level */
.dropdown-menu {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: #eeeeee;
}
/* Clear the float */
.dropdown-menu:after {
display: table;
content: "";
clear: both;
}
.dropdown-menu li {
display: block;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
min-width: 150px;
float: left;
}
.dropdown-menu li a:link,
.dropdown-menu li a:visited {
padding: 10px 15px;
text-decoration: none;
color: #111111;
display: block;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
color: #222222;
}
/* Level 1 */
.dropdown-level-1 {
position: absolute;
padding: 0;
margin: 0;
display: none;
background: grey;
width: 150px;
}
.dropdown-level-1 li {
}
/* The ">" triggers the direct child to show up as "block" */
.dropdown-menu li:hover > .dropdown-level-1 {
display: block;
}
/* Level 2 */
.dropdown-level-2 {
position: absolute;
display: none;
background: #888888;
padding: 0;
margin: -38px 0 0 148px;
}
/* same trick here for level 2 */
.dropdown-level-1 li:hover > .dropdown-level-2 {
display: block;
}
/* Target all links at once */
.dropdown-level-0 li a:link,
.dropdown-level-0 li a:visited,
.dropdown-level-1 li a:link,
.dropdown-level-1 li a:visited,
.dropdown-level-2 li a:link,
.dropdown-level-2 li a:visited {
padding: 10px;
color: purple;
display: block;
}
.dropdown-level-0 li a:hover,
.dropdown-level-0 li a:focus,
.dropdown-level-1 li a:hover,
.dropdown-level-1 li a:focus,
.dropdown-level-2 li a:hover,
.dropdown-level-2 li a:focus {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
<li>Item 1</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have a ul with a title in a div and I'm trying to make the ul scroll while keeping the title fixed. I also want to have the title match the width of the ul. I'm able to do one of those at a time, but not both together. Either I get a ul with a title that is 100% of the ul width, or I get a title that stays put when the list scrolls, but it doesn't match the ul width. Can someone point out what I'm doing wrong?
fiddle here: http://jsfiddle.net/9zcRy/2/
The HTML
<div class="talkingPointsHolder">
<div class="genericScriptsHolder">
<span class="listHeader">List One</span>
<ul
class="scrollingList">
<li>item 1.1</li>
<li>item 1.2</li>
<li>item 1.3</li>
<li>item 1.4</li>
<li>item 1.5</li>
<li>item 1.6</li>
<li>item 1.7</li>
<li>item 1.8</li>
<li>item 1.9</li>
<li>item 1.10</li>
<li>item 1.11</li>
<li>item 1.12</li>
</ul>
</div>
<div class="genericScriptsHolder">
<span class="listHeader">List Two</span>
<ul
class="scrollingList">
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
<li>item 2.4</li>
<li>item 2.5</li>
<li>item 2.6</li>
<li>item 2.7</li>
<li>item 2.8</li>
<li>item 2.9</li>
<li>item 2.10</li>
<li>item 2.11</li>
<li>item 2.12</li>
</ul>
</div>
The CSS
.talkingPointsHolder {
border: 1px solid black;
background: #eeeeee;
height: 200px;
overflow: auto;
}
.genericScriptsHolder {
float: left;
width: 48%;
margin: 0px 2px 0px 2px;
/* uncomment to make the title match the ul width (see listHeader too)*/
/*position: relative;*/
}
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
z-index:10;
/* uncomment to make the title match the ul width (see genericScriptsHolder too)*/
/*width: 100%;*/
}
.scrollingList {
position: relative;
top: 31px;
}
.scrollingList li {
overflow: auto;
height: 20px;
color: #666666;
background-color: #cccccc;
font-weight: lighter;
padding: 10px;
margin: 2px;
list-style-type: none;
}
You need to define the width of an element if you're using position: absolute;
I set the width your .list-header to match the width of your .genericScriptsHolder and then adjusted the padding accordingly.
Here's the fiddle: http://jsfiddle.net/9zcRy/15/
Notice that I removed the horizontal margins that you created for the scrolling list line items and instead edited the styling on the parent .genericScriptsHolder element.
.genericScriptsHolder {
float: left;
width: 48%;
margin: 0px 5px 0px 5px;
/* uncomment to make the title match the ul width (see listHeader too)*/
/*position: relative;*/
}
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
width: 48%;
z-index:10;
.scrollingList li {
overflow: auto;
height: 20px;
color: #666666;
background-color: #cccccc;
font-weight: lighter;
padding: 10px;
margin: 2px 0 0 0;
list-style-type: none;
}
http://jsfiddle.net/9zcRy/9/
.listHeader {
color: #ffffff;
background: #444444;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
z-index:10;
width:46%;