I am trying to make the ul above the rest of the content and the z index is not working.
I added the position property as needed to set z index but still does not work, what i am doing wrong?
How i can fix this?
ul {
list-style: none;
}
.nb-drop-down {
width: 400px;
position: relative;
}
.nb-drop-down ul {
width: 100%;
border: 1px solid #eee;
position: absolute;
z-index: 100;
}
.nb-drop-down button, .nb-drop-down li {
text-align: left;
line-height: 50px;
padding-left: 10px;
cursor: pointer;
}
.nb-drop-down button {
width: 100%;
background: transparent;
border: 1px solid #eee;
position: relative;
}
.nb-drop-down button::after {
content: '';
position: absolute;
border-style: solid;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
border-width: 10px 6.5px 0 6.5px;
border-color: #e3e3e3 transparent transparent transparent;
}
.nb-drop-down button:focus {
outline: none;
}
.nb-drop-down li:not(:last-child) {
border-bottom: 1px solid #eee;
}
<div class="nb-drop-down">
<button class="nb-main-item">Main Item</button>
<ul class="nb-list">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<h1>hello</h1>
UL is above H1 (or everything else in general), but has transparent background. Set background, eg:
.nb-drop-down ul {background: white;}
http://jsfiddle.net/5ojk1ojq/
Related
Fiddle here
I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}
CSS solution with rectangles
Here is an example that does not use triangles, but instead uses rotated rectangle.
Explanation:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow.
Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.
body {
background-color: #555;
}
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu .arrow {
position: relative;
display: inline-block;
list-style: none;
font-size: 2em;
width: 150px;
height: 70px;
background-color: white;
margin-right: 90px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.arrow:first-of-type {
border-left: 2px solid red;
}
.arrow::after {
position: absolute;
top: 9px;
right: -25px;
content: "";
height: 50px;
width: 50px;
background-color: white;
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow::before {
content: "";
position: absolute;
top: 9px;
left: -25px;
height: 50px;
width: 50px;
background-color: #555; /*Needs to match body backgrond-color*/
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow:first-of-type::before {
content: none;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>
How do I make an pointed border-radius as the example in the img?
I have found several ways to make a full arrow to the right or left, but I want only an border of 1px.
I have built this in an UL and than an LI. This is because I think that this is the best way to generate this "breadcrumb".
<ul>
<li>Back</li>
<li>Home</li>
<li>Events</li>
<li>Event Item</li>
</ul>
You cannot do it using border-radius, you have to use :after ,:before pseudo elements.
There might be another approaches as well , but this is one method that i use personally.
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: #03C9A9;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #03C9A9;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
<ul class="breadcrumb">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
Fiddle here
I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}
CSS solution with rectangles
Here is an example that does not use triangles, but instead uses rotated rectangle.
Explanation:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow.
Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.
body {
background-color: #555;
}
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu .arrow {
position: relative;
display: inline-block;
list-style: none;
font-size: 2em;
width: 150px;
height: 70px;
background-color: white;
margin-right: 90px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.arrow:first-of-type {
border-left: 2px solid red;
}
.arrow::after {
position: absolute;
top: 9px;
right: -25px;
content: "";
height: 50px;
width: 50px;
background-color: white;
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow::before {
content: "";
position: absolute;
top: 9px;
left: -25px;
height: 50px;
width: 50px;
background-color: #555; /*Needs to match body backgrond-color*/
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow:first-of-type::before {
content: none;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>
Check out the JSfiddle showing what I am up to: http://jsfiddle.net/Amp3rsand/FPj3s/1/
HTML:
<ul id="navigation">
<li>BLAH</li>
<li>MORE <br /> BLAH</li>
<li>STILL <br /> MORE</li>
<li>YADDA <br /> YADDA</li>
<li>ETC ETC <br /> ETC ETC</li>
<li>FINISH</li>
</ul>
CSS:
body {
font-size: 12px;}
}
#navigation {
width: 600px;
height: 50px;
position: absolute;
left: 20px;
top: 25px;
}
#navigation li {
list-style-type:none;
width: 94px;
height: 40px;
display: block;
float: left;
margin: 0 5px 0 0;
text-align: center;
font-weight: bold;
background: lightgrey;
}
#navigation li:first-child {
border-top: 40px solid lightgrey;
border-left: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:first-child a {
position: relative;
top: -35px;
right: 0px
}
#navigation li:last-child {
border-top: 40px solid lightgrey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:last-child a {
position: relative;
top: -35px;
left: 5px;
}
#navigation li:last-child a:hover {
top: -35px;
left: 5px;
}
#navigation li a {
display: block;
height: 40px;
text-decoration: none;
color:#000;
}
#navigation li a:hover {
background: grey;
}
The lightgrey shapes are what I would like the hover to look like. Only the first and last children need to look different but I am unsure of how to go about messing with the borders on hover without ruining the layout. I have had to move the first and last 'a' elements because of the border shenanigans and now I'm stuck.
What would you suggest?
EDIT:
I just realised I could do this to change the shape of the hover bit but the link position is still causing trouble
#navigation li:last-child a:hover {
border-top: 40px solid grey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
See it live here on JS Fiddle
The properties you want to change are of the <li> elements so target the list items hover state and change the background and border color
#navigation li:hover {
background: grey;
}
#navigation li:first-child:hover,
#navigation li:last-child:hover{
background: none;
border-top-color: grey;
}
Updated fiddle
Essentially, you want to set the 'border-top' to grey for the first/ last child.
You could use in CSS:
#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}
But this didn't work in Google Chrome, for me, so perhaps just apply that as a hover effect using jQuery?
I am using a div for my site's breadcrumbs. It remains a constant size on the actual size of browser window and on zoom in. But on zoom out the div is shrinking.
This is the code am using. Do I require an edit in it somewhere?
<style>
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Lucida Sans Unicode;
text-align: center;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 11px 0 11px 55px;
background: #327ea4; /* fallback color */
background: #327ea4;
position: relative;
display: block;
float: left;
width: 15.12em;
/*width: 15.1185em;*/
cursor: default;
border-top-left-radius: .4em;
pointer-events: none;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #327ea4;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 30px;
}
.breadcrumb li:nth-child(2) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(2) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(3) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(3) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(4) a { background: #7fc1ec; color: #327ea4; cursor: default;}
.breadcrumb li:nth-child(4) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default; }
.breadcrumb li:last-child a {
/*background: white !important;*/
/*color: black;*/
pointer-events: none;
cursor: default;
border-top-right-radius: .4em;
}
.breadcrumb li:last-child a:after { border: 0; }
</style>
<div style="width:75em;" oncontextmenu="return false" >
<ul class="breadcrumb">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>
</div>
Thanks in advance.
when you define the height or width of an element in EM's, like in the following snippet...
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 11px 0 11px 55px;
background: #327ea4;
background: #327ea4;
position: relative;
display: block;
float: left;
width: 15.12em; /* <-- RIGHT HERE */
cursor: default;
border-top-left-radius: .4em;
pointer-events: none;
}
... you're actually binding the the size of the element to the font-size for that element.
When you increase the browser "zoom", all that's happening is in the font size is being increased (in pixels).
Example:
font-size: 10px, therefore width: 2em == width: 20px.
Zoom (increase font-size)
font-size: 12px, therefore width: 2em == width: 24px.