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>
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.
Im working on menu, which is text justified. To make this working, I add an new line. the problem is that it should be zero pixels. However, it's breaking layout
JS fiddle to see it in work
https://jsfiddle.net/z1qsL739/1/
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some </li>
<li>some</li>
<div class="justify-fix"></div>
</ul>
</div>
Css
.registration-menu{
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list{
list-style: none;
display: inline-block;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
.justify-fix{
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li{
display: inline-block;
line-height: 1em;
font-size: 18px;
&.active{
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a{
padding: 10px;
display: inline-block;
}
&:hover{
#include transition(all .4s ease);
background: #fde8be;
}
}
}
Try by adding the following rules, height: 46px; to the .registration-menu and padding: 4px 0; to the .reg-menu-list
.registration-menu {
background: white none repeat scroll 0 0;
border-bottom: 4px solid green;
border-top: 4px solid green;
height: 46px;
}
.reg-menu-list {
color: green;
display: inline-block;
font-size: 0;
line-height: 0;
list-style: outside none none;
padding: 4px 0;
text-align: justify;
width: 100%;
}
A div is not allowed inside a list as a direct child. A modern and straightforward way to go is using flexbox positioning, e.g.
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
Example: http://codepen.io/anon/pen/dpbWJk?editors=0100
You don't need the div at all, use a pseudo-element
.registration-menu {
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list {
list-style: none;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
}
.reg-menu-list::after {
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li {
display: inline-block;
line-height: 1em;
font-size: 18px;
background: pink;
}
li.active {
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a {
padding: 10px;
display: inline-block;
}
a:hover {
#include transition(all .4s ease);
background: #fde8be;
}
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
</ul>
</div>
remove display: inline-block from .reg-menu-list
My navigation consists of many elements (including CSS hack triangles). Because of this, I have no idea how to add an in-set style border to it.
Basically, this is what I have: http://i.imgur.com/XVfLLtI.png
And this is what I want (Designed in Photoshop): http://i.imgur.com/tDjRXLo.png
HTML:
<div class="nav">
<div class="navbody">
<div class="navheader">
<a href="index.html" title="Home Page" style="text-decoration: none;color:inherit;"><img class="logo" src="images/logo.png">
<h1 class="GBHS" >GBHS</h1>
<h1 class="Athletics">ATHLETICS</h1></a>
</div>
<ul class="nav-menu">
<li>House Points</li>
<li>Results Entry</li>
<li>Participation Entry</li>
<li>Sign In / Sign Up</li>
</ul>
<img class="runico" src="images/run.png">
</div>
<div class="triangles"><div class="triangle1"></div><div class="triangle2"></div></div>
</div>
CSS:
.nav {
width: 282px;
float: left;
}
.navbody {
background-color: #afa094;
box-shadow: 0px 0px 40px 2px #202020;
text-align: center;
}
.navheader {
height: 130px;
}
.logo {
width: 70px;
float: left;
padding: 5px 0px 0px 22px;
}
.nav h1 {
margin: 0;
font-family: 'Open Sans', sans-serif;
text-align: left;
line-height: 26px;
}
.GBHS{color: #2f8168; padding-top: 10px;}.Athletics{color: #0b3d68;}
.nav-menu {
width: 192px;
margin: 0 auto;
font-size: 20px;
padding: 0;
}
.nav-menu li {
list-style: none;
border-bottom: 2px solid #fff;
}
.nav-menu li:last-child {
border-bottom: none;
}
.nav-menu li a {
padding: 10px 0;
display: block;
color: #102b42;
text-decoration: none;
}
.nav-menu li a:hover {
background-color: rgba(0, 0, 0, .05);
}
.runico {
width: 150px;
margin: 30px 0 30px 0;
}
.triangle1 {
display: inline-block;
border-right: 141px solid transparent;
border-left: 0px solid transparent;
border-top: 141px solid #afa094;
}
.triangle2 {
display: inline-block;
border-left: 141px solid transparent;
border-right: 0px solid transparent;
border-top: 141px solid #afa094;
}
FIDDLE: http://jsfiddle.net/JDzcP/ Don't worry about the images not being there, they still take up the space.
ALSO while I have the expertise of the stackoverflow community, how can I add a box shadow to the triangles?
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;
}