I have a tabbed LI system that (properly) wraps when the screen shrinks. However, the content below these tabs needs to start below the last tab that has wrapped. Can someone show me how this is done?
FIDDLE
http://jsfiddle.net/jeljeljel/k5prw30g/5/
HTML
<div class="bwtab">
<ul>
<li class="active">AAAAAAAA1</li>
<li>AAAAAAAA2</li>
<li>AAAAAAAA3</li>
<li>AAAAAAAA4</li>
<li>AAAAAAAA5</li>
<li>AAAAAAAA6</li>
<li>AAAAAAAA7</li>
<li>AAAAAAAA8</li>
<li>AAAAAAAA9</li>
<li>AAAAAAAA10</li>
</ul>
</div>
<div>This content should display below the tabs</div>
CSS
.bwtab {
clear: both;
position: relative;
border-bottom: 1px solid #AAA;
height: 34px;
font-size: 14px;
cursor: default;
}
.bwtab ul {
position: absolute;
padding: 0;
padding-left: 5px;
margin-top:7px;
}
.bwtab li {
list-style: none;
float: left;
padding: 5px 10px;
margin-left: 5px;
margin-top: 1px;
cursor: pointer;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #AAA;
border-bottom: 0;
margin-bottom: 5px;
}
.bwtab li.active {
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
Related
I'm looking to add a border to an element on hover while also keeping the parent div size the same.
Currently when I add the border it makes the parent div larger in height.
nav {
margin: 0px auto 1px auto;
padding-bottom: 1px;
display: inline-block;
position: fixed;
background-color: #000;
width: 100%;
}
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
}
nav a:first-child {
margin-left: 25px;
}
nav a:hover {
background-color: red;
border-left: 1px white solid;
border-right: 1px white solid;
border-bottom: 1px white solid;
}
<nav>
Home
About
Google
</nav>
You could add a transparent border to displace the one that is added on hover.
In this case, you could use:
nav a {
border: 1px transparent solid;
border-top: none;
}
nav {
margin: 0px auto 1px auto;
padding-bottom: 1px;
display: inline-block;
position: fixed;
background-color: #000;
width: 100%;
}
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
border: 1px transparent solid;
border-top: none;
}
nav a:first-child {
margin-left: 25px;
}
nav a:hover {
background-color: red;
border: 1px white solid;
border-top: none;
}
<nav>
Home
About
Google
</nav>
There are a couple of ways to do it.
Method No. 1 - Give the <a> a transparent border:
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
border-left: 1px transparent solid;
border-right: 1px transparent solid;
border-bottom: 1px transparent solid;
}
Method No. 2 - Give the <nav> a fixed height:
nav{
height:45px;
}
i'm displaying menu hover on image .These all image generated dynamically.
while mouse hover on first image menu will display but problem on menu items background items displaying. how to hide behide elemets while displying hover ?
a {
text-decoration: none;
}
.menu {
font-family: Arial;
color: #515151;
height: 40px;
position: relative;
text-align: left;
width: 15px;
margin: 0 auto;
}
.menu li a {
color: #515151;
display: block;
cursor: pointer;
font-size: 14px;
padding: 6px 15px;
}
.menu li a:hover {
background: #f44141;
color: #fff;
}
.sub {
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
padding: 40px 0 3px;
}
a.hover-link {
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
height: 8px;
cursor: pointer;
border-radius: 5px 5px 0 0;
font-weight: 700;
border: 1px solid #ddd;
padding: 10px 0 1px 10px;
}
.sub-options {
list-style: none;
font-size: 11px;
margin: 0;
padding: 0;
}
Working example : This is just z-index's issue CSS:
.sub{
background: #fff;
position: absolute;
z-index: 1000;
width: 200px;
margin: 0px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none; top:38px; left:0;
}
I'm making a breadcrumb menu and attempting to do it in pure CSS so I don't have to use a background image to get an arrow shape. Is it possible to achieve this angled border style with pure CSS?
The best I have been able to do looks like this (this is just a draft screenshot I made a while ago, so please disregard that it implies that breadcrumbs are fruits and/or delicious):
I was achieving it using CSS like this:
.breadcrumb li {
border-right: 2px solid #ECECEC;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
Here's the whole CSS in case it helps:
div.breadcrumb {
display: block;
float: left;
border-bottom: 2px solid gray;
}
ul.breadcrumb {
display: block;
float: left;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.breadcrumb li {
float: left;
display: list-item;
background-color: #F2F2F2;
border-right: 2px solid #ECECEC;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
position: relative;
padding: 9px 20px 10px 35px;
margin-left: -32px;
}
.breadcrumb li.first-crumb {
background: #E7E7E7;
padding-left: 20px;
margin-left: 0px;
}
.breadcrumb li.last-crumb {
border-top: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
background: white;
padding-top: 9px;
padding-bottom: 9px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.breadcrumb li:not(.first-crumb) {
padding-left: 45px;
}
.breadcrumb li:not(.last-crumb) a:after {
content: "\27F6";
margin-left: 10px;
color: #444444;
margin-right: 0px;
}
.breadcrumb li a,
.breadcrumb li span {
display: block;
float: left;
position: relative;
}
.breadcrumb li a {
text-decoration: none;
}
.breadcrumb li.first-crumb a {
padding-left: 0px;
margin-left: 0px;
}
My markup looks like this:
<div class="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb first-crumb">Produce</li>
<li class="breadcrumb">Fruits</li>
<li class="breadcrumb last-crumb"><span>breadcrumb-ilicious!</span></li>
</ul>
</div>
Edit: It would be nice if I could get it to look like there's an actual border too. This is my crude skitch of it:
(I tried adding several triangles per Olaf's suggestion and the only thing I couldn't get to work was correcting the obvious gap between two triangles without changing the angle of the triangle poking out to form the border.)
Stealing from CSS Tricks - CSS Triangle, you can do something like
li.breadcrumb:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-bottom: 20px solid #eee;
border-left: 20px solid #ccc;
}
li.breadcrumb:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-bottom: 20px solid #eee;
border-left: 20px solid #ccc;
}
li.first-crumb:after {
border-top: 20px solid #ccc;
border-bottom: 20px solid #ccc;
border-left: 20px solid #aaa;
}
li.last-crumb:after {
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 20px solid #eee;
}
li.breadcrumb {
list-style-type: none;
background-color: #ccc;
display: inline-block;
float: left;
line-height: 0;
}
li.first-crumb {
background: #aaa;
}
li.last-crumb {
background: #eee;
}
li.breadcrumb a {
text-decoration: none;
}
<div class="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb first-crumb">Hurr
</li>
<li class="breadcrumb">Durr
</li>
<li class="breadcrumb last-crumb"><span>Furr</span>
</li>
</ul>
</div>
<div class="arrow-right"></div>
Original JSFiddle
you can get those borders too if you want (I have improved the previous answer by Olaf Dietsche):
HTML:
<div class="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb first-crumb">Hurr</li>
<li class="breadcrumb">Durr</li>
<li class="breadcrumb last-crumb"><span>Furr</span></li>
</ul>
</div>
CSS:
li.breadcrumb:before {
content:'';
width: 28.28427px; /* sqrt(40*40 / 2) */
height: 28.28427px;
background:transparent;
position:absolute;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
transform-origin: top right;
top: 20px;
margin:0;
right: 0;
border-right: #000 solid 1px;
border-top: #000 solid 1px;
}
li.breadcrumb:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-bottom: 20px solid #eee;
border-left: 20px solid #ccc;
}
li.first-crumb:after {
border-top: 20px solid #ccc;
border-bottom: 20px solid #ccc;
border-left: 20px solid #aaa;
}
li.last-crumb:after {
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 20px solid #eee;
}
li.breadcrumb {
list-style-type: none;
background-color: #ccc;
display: inline-block;
float: left;
line-height: 0;
position: relative;
height: 40px;
}
li.first-crumb {
background: #aaa;
}
li.last-crumb {
background: #eee;
}
li.breadcrumb a {
text-decoration: none;
}
and the fiddle: http://jsfiddle.net/piotku/9cs1zy4h/
Another way to do it is to use an :after element and make this a rectangle with two borders and rotate this.
Here is an example: Breadcrumb
Main CSS:
li-item:after {
content: "";
width: 5rem;
height: 100%;
display: inline-block;
position: absolute;
background: transparent;
right: 0;
top: 0;
transform: translateX(-1rem) rotate(45deg);
border-right: 4px solid white;
border-top: 4px solid white;
}
When I mouse over the red settings-icon, I want the drop down menu to appear. And when I mouse off the settings-icon or dropdown-menu, it goes back to just the settings icon.
I tried using
visibility: hidden;
visibility: visible;
I can't seem to figure it out.
http://jsbin.com/OmEfEGu/2/edit
HTML:
<div class="dropdown-menu">
<div class="check-icon"></div>
<li>Mark as Answered</li>
<div class="trash-icon"></div>
<li>Delete Questions</li>
</div>
CSS:
.settings-icon {
position: relative;
width: 18px;
height: 20px;
background-color: red;
float: right;
margin-right: 10px;
border-top: 1px solid #8b9399;
border-left: 1px solid #8b9399;
border-right: 1px solid #8b9399;
}
.dropdown-menu {
border: 1px solid #8b9399;
background-color: #ffffff;
float: right;
width: 140px;
height: 50px;
margin-right: -20px;
margin-top: 20px;
list-style: none;
font-size: 13px;
}
.settings-icon:hover .dropdown-menu {
visibility: visible;
}
I have created a vertical menu and would like it to have a right red border on hover and selected item.
However, I can't seem to get it correct on hovering as my li border bottom seems to mess up the hover state. The bottom border slightly overlaps the right border.
Here is the code in a fiddle.
http://jsfiddle.net/4KBE4/1/
HTML:
<div class="messaging">
<div class="sideMenu">
<ul class="messagesMenu">
<li class="selected">Inbox<span>14</span></li>
<li>Outbox</li>
<li>Address Book</li>
<li>Trash</li>
</ul>
</div>
<div class="messagesWrapper">
</div>
</div>
CSS:
.messaging {
width: 500px;
margin-bottom: 20px;
}
.sideMenu {
display: inline-block;
width: 200px;
float: left;
}
.messagesWrapper {
background: honeydew;
width: 300px;
height: 200px;
float: right;
min-height: 500px;
}
.messagesMenu {
background: #FFF;
padding-bottom: 20px;
}
.messagesMenu li {
padding: 5px;
border-top: 1px solid #d4d4d4;
height: 3em;
display: block;
position: relative;
border-right: 5px solid #d4d4d4;
}
.messagesMenu li:first-child { border-top: none; }
.messagesMenu li:last-child { border-bottom: 1px solid #d4d4d4; }
.messagesMenu li a {
line-height: 3em;
font-size: 1em;
text-transform: uppercase;
text-decoration: none;
padding-left: 5px;
color: #c4c4c4;
cursor: pointer;
}
.messagesMenu li a span {
color: #FFF;
font-size: 1em;
text-transform: uppercase;
text-decoration: none;
background: #999;
border-radius: 5px;
margin-left: 100px;
padding: 2px 6px;
}
.messagesMenu li:hover { border-right-color: #ed1c24; }
.messagesMenu li.selected {
border-right-color: #ed1c24;
border-bottom: none;
}
.messagesMenu li.selected a { color: #2f3239; }
.clearfix { zoom: 1; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Hope someone can help! Thanks :)
Give the links display: block, remove their width: 100%, remove the padding, the height and the horizontal borders from the li and add them on the links.
demo
.messagesMenu li { border-right: 5px solid #d4d4d4; }
.messagesMenu li:first-child a { border-top: none; }
.messagesMenu li:last-child a { border-bottom: 1px solid #d4d4d4; }
.messagesMenu li a {
display: block;
line-height: 3em;
font-size: 1em;
text-transform: uppercase;
text-decoration: none;
color: #c4c4c4;
cursor: pointer;
height: 3em;
padding: 5px 5px 5px 10px;
border-top: 1px solid #d4d4d4;
}