I'm trying to figure out why my tabs look fine in webkit based browsers, and even IE7+. For some reason, they look wonky in Mozilla. Can anyone give me some tips to fix this?
Here is an example: http://jsbin.com/icomo4
Here is the css:
<style type="text/css">
ul#activity-tabs {
text-align: right;
border-bottom: 1px solid #cccccc;
list-style-type: none;
padding: 3px 10px 3px 10px;
}
ul#activity-tabs li {
display: inline;
}
ul#activity-tabs li.tab1 {
background-color: #fff;
}
ul#activity-tabs li.tab1 a {
padding: 3px 4px;
border: 1px solid #cccccc;
background-color: #fff;
color: #333333;
position: relative;
top: 1px;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
padding-top: 4px;
}
ul#activity-tabs li.tab1 a:hover {
background: #fff;
}
ul#activity-tabs li.tab2 {
background-color: #fff;
}
ul#activity-tabs li.tab2 a {
padding: 3px 4px;
background-color: #fff;
color: #333333;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
padding-top: 4px;
}
ul#activity-tabs li.tab2 a:hover {
padding: 3px;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
</style>
The html:
<ul id="activity-tabs">
<li class="tab1">Tab 1</li>
<li class="tab2">Tab 2</li>
</ul>
Any help would be greatly appreciated. Thanks!
That's how they look in my Firefox 3.6.10
Related
I want to put my active list-item go over my border-bottom. Z-index didn't work, I think that that's the case due to the position of the list-items. Do you know how to help me?
Current situation:
.meer_info_ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
border-bottom: 1px solid #98ab39;
margin-bottom: 100px;
text-align: center;
}
.meer_info_li{
display: inline-block;
transform: translate(0, 7px);
}
.meer_info_li a {
display: block;
color: #000;
text-align: center;
padding: 10px 16px;
text-decoration: none;
border-radius: 10px;
cursor: pointer;
}
.active, .meer_info_li a:hover:not(.active){
border-right: 1px solid #98ab39;
border-left: 1px solid #98ab39;
border-top: 1px solid #98ab39;
}
<ul class="meer_info_ul">
<li class="meer_info_li">Home</li>
<li class="meer_info_li"><a class="active" href="#news">News</a></li>
<li class="meer_info_li">Contact</li>
<li class="meer_info_li">About</li>
</ul>
Perfect Situation:
Kindregards,
MarioMartin
If you remove overflow: hidden from the <ul> container and add a white border-bottom to your active list element, you can just shift the list element down 1 pixel so it covers the bottom line. Note that I also had to update the border-radius to use border-top-radius and border-bottom-radius. Another improvement is that you should always set the border-width of your list element to 1px to prevents the tabs from changing size. You can set their color to transparent to hide them (see: 1px solid transparent).
.meer_info_ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
border-bottom: 1px solid #98ab39;
margin-bottom: 100px;
text-align: center;
}
.meer_info_li{
display: inline-block;
margin-bottom: -1px;
}
.meer_info_li a {
display: block;
border: 1px solid transparent;
color: #000;
text-align: center;
padding: 10px 16px;
text-decoration: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.meer_info_li a.active, .meer_info_li a:hover {
border: 1px solid #98ab39;
border-bottom: 1px solid #fff;
}
<ul class="meer_info_ul">
<li class="meer_info_li">Home</li>
<li class="meer_info_li"><a class="active" href="#news">News</a></li>
<li class="meer_info_li">Contact</li>
<li class="meer_info_li">About</li>
</ul>
A way to hack around a similar result.
.meer_info_ul {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
margin-bottom: 100px;
text-align: center;
}
.meer_info_ul:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: 1px solid #98ab39;
}
.meer_info_li{
display: inline-block;
transform: translate(0, 7px);
}
.meer_info_li a {
position: relative;
display: block;
color: #000;
text-align: center;
padding: 10px 16px;
text-decoration: none;
border-radius: 10px;
cursor: pointer;
border: 1px solid transparent;
}
.meer_info_li a.active,
.meer_info_li a:hover:not(.active){
border-right: 1px solid #98ab39;
border-left: 1px solid #98ab39;
border-top: 1px solid #98ab39;
}
.meer_info_li a.active {
z-index: 3;
background-color: white;
}
<ul class="meer_info_ul">
<li class="meer_info_li">Home</li>
<li class="meer_info_li"><a class="active" href="#news">News</a></li>
<li class="meer_info_li">Contact</li>
<li class="meer_info_li">About</li>
</ul>
The bootstrap way to manage a similar result.
.meer_info_ul {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
margin-bottom: 100px;
text-align: center;
border-bottom: 1px solid #98ab39;
}
.meer_info_li{
display: inline-block;
margin-bottom: -1px;
}
.meer_info_li a {
display: block;
color: #000;
text-align: center;
padding: 10px 16px;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
}
.meer_info_li a.active,
.meer_info_li a:hover:not(.active){
border-color: #98ab39 #98ab39 #fff;
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
<ul class="meer_info_ul">
<li class="meer_info_li">Home</li>
<li class="meer_info_li"><a class="active" href="#news">News</a></li>
<li class="meer_info_li">Contact</li>
<li class="meer_info_li">About</li>
</ul>
I hope this helps.
I'm learning CSS / HTML and I have a problem with creating a nav.
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
li {
display: inline-block;
padding: 15px 20px;
margin: 0;
height: 35px;
}
li:hover {
background-color: #232323;
border-bottom: 3px solid #e24a4a;
height: 32px;
cursor: pointer;
}
<nav>
<ul>
<li>M1</li>
<li>M2</li>
<li>M3</li>
<li>M4</li>
<li>M5</li>
</ul>
</nav>
Between M's is margin. I don't want it. I tried remove them, but nothing.
Margin between M's
How can I remove it?
I think you need something this.
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
li {
padding: 15px 0;
display: inline-block;
margin: 0;
height: 35px;
}
li:hover {
padding: 15px 20px;
background-color: #232323;
border-bottom: 3px solid #e24a4a;
height: 32px;
cursor: pointer;
}
<nav>
<ul>
<li>M1</li>
<li>M2</li>
<li>M3</li>
<li>M4</li>
<li>M5</li>
</ul>
</nav>
Read the details given in the link that CBroe posted... Will provide you with the solutions. In my opinion both the "flexbox" and the "negative margin" solutions are pretty good tricks.
Here you go:
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
li {
display: inline-block;
padding: 15px 20px;
margin-right: -4px; /* negative margin */
height: 35px;
}
li:hover {
background-color: #232323;
border-bottom: 3px solid #e24a4a;
height: 32px;
cursor: pointer;
}
<nav>
<ul>
<li>M1</li>
<li>M2</li>
<li>M3</li>
<li>M4</li>
<li>M5</li>
</ul>
</nav>
I am trying to get the same effect for my tab which is in this site.
Here is what i tried: JsFiddle
I am unable to get the desired effect.
Can somebody tell me what am i missing.
.mytabs a {
display: block;
height: 24px;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0);
border-bottom: 1px solid #CCC;
}
.mytabs a:hover {
border: 1px solid #CCC;
border-bottom-color: #FFF;
}
a.youarehere {
border: 1px solid #ccc;
border-bottom-color: #fff;
height: 30px;
}
FIDDLE
HTML
<div class="tabs-container">
<nav class="mytabs">
<ul>
<li><a class="youarehere" href="#">Menu 1</a></li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
</div>
CSS
.tabs-container{
border-bottom: 1px solid #cccccc;
height: 34px;
clear: both;
margin-bottom: 15px;
}
.mytabs ul {
list-style: none;
padding: 0;
margin: 0;
}
.mytabs ul li {
display: inline-block;
}
.mytabs a {
border: 1px solid transparent;
color: #777;
display: block;
float: left;
font-size: 90%;
height: 24px;
line-height: 20px;
margin: 9px 8px 0 0;
padding: 0 11px 0 11px;
text-decoration: none;
border-bottom: 1px solid #ccc;
}
.mytabs a:hover {
border: 1px solid #ccc;
}
.mytabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
}
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;
}
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;
}