Is it possible to make a capsule shape using border-radius without a set width or height and include between delimeter?
Yes, You can try this way
.container {
width: 90%;
padding:20px;
margin: 10px auto;
background:#000;
}
ul {
list-style: none;
padding: 7px;
background: #333;
border-radius: 12px;
display: inline-flex;
}
li {
padding: 0 10px;
border-right: 1px solid #999;
line-height: 1;
color: #999;
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
li:last-child {
border-right: none;
}
<div class="container">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</div>
Related
I am having difficulty aligning the divs in the middle of the page. Hence I have used absolute positioning to place them in the middle.But when I try to do media queries its difficult to place them in the middle. Please any help is appreciated.
nav>ul {
position: absolute;
top: 114px;
text-align: center;
;
}
nav>ul>li {
list-style: none;
float: left;
}
nav>ul>li>a {
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
border-bottom: 45px solid #20639B;
}
<div class="color2">
<div class="header">
<nav>
<ul>
<li> Privacy</li>
<li> Terms of Use</li>
<li>Copyright</li>
<li>Trademark</li>
<li>Logos</li>
<li>Pay Transparency</li>
</ul>
</nav>
</div>
</div>
You were close. Just remove position: absolute from nav>ul, and remove the float: left from nav>ul>li and replace it with display: inline-block.
nav>ul {
padding-top: 10px;
text-align: center;
}
nav>ul>li {
list-style: none;
display: inline-block;
}
nav>ul>li>a {
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
border-bottom: 40px solid #20639B;
}
<div class="color2">
<div class="header">
<nav>
<ul>
<li> Privacy</li>
<li> Terms of Use</li>
<li>Copyright</li>
<li>Trademark</li>
<li>Logos</li>
<li>Pay Transparency</li>
</ul>
</nav>
</div>
</div>
Flexbox can be one way to go. Here a quick JS Fiddle that shows you how you can achieve what you want: https://jsfiddle.net/58u76mrn/13/
nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100vw;
}
nav a {
text-decoration: none;
font-family: 'Abel',sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
}
Check this js fiddle
https://jsbin.com/geqovukozo/edit?css,output
nav{
position:absolute;
top:50%;
width:100%;
transform:translateY(-50%);
}
nav>ul {
text-align: center;
font-size:0;
}
nav>ul>li {
list-style: none;
display:inline-block;
}
nav>ul>li>a {
display:block;
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
border-bottom: 45px solid #20639B;
}
Use positions with transform property in this case. and instead of float:left; use display:inline-block;
I've built a simple center aligned navigation bar for my website. However, the borders of the elements in the navigation bar aren't perfectly overlapping, giving a disjointed look. Here's what I mean:
Notice the double-borders for each link. Note that even I remove one of the borders, the hover effect still reveals the imperfection:
How can I fix this via creating borders that perfectly overlap?
Here's the code:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li>
<li>Photos</li>
<li><b>New Account</b></li>
<li>Old Account</li>
</ul>
Well, inline-block elements have a some surrounding 'space', by default:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
box-sizing:border-box;
margin-left:-4px;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
box-sizing:border-box;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li>
<li>Photos</li>
<li><b>New Account</b></li>
<li>Old Account</li>
</ul>
Also, keep just right border, and place left border to first li....
If you set both the li and the a element's display value to inline-block it will fix the issue you have:
/* navigation bar*/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>
Link 1
</li><li>
Link 2
</li><li>
Link 3
</li><li>
Link 4
</li>
</ul>
This will also allow you to hover the entire item in the menu (and not only part of it).
Another option
(without changing the HTML structure) is to change the font-size of the ul element (and set font-size to the li):
l.navbar {
font-size: 1px;
}
ul.navbar li {
font-size: 14px;
}
Working example:
/* navigation bar*/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size: 1px;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
font-size: 14px;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
Add only border-left to all li items. And for the last one add border-right as well
ul.navbar li {
margin: auto;
display: inline;
border-left: 1px solid #ffb366;
}
ul.navbar li:last-child, ul.navbar li:hover{
border-right: 1px solid #ffb366;
}
Update: The issue was in the font-size of the ul
ul.navbar {
margin: 0;
padding: 0;
background-color: #ff9933;
text-align: center;
font-size: 0;
}
ul.navbar li {
margin: 0;
font-size: 14px;
padding:0;
display: inline-block;
border-left: 1px solid #ffb366;
border-right: 1px solid #ffb366;
width:auto;
}
Plnkr: https://plnkr.co/edit/8j5It4jlrZRgTMxsArAu?p=preview
im wondering how to write my css so that when i hover the text the green line under the yellow box becomes yellow as well. thank you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
link
https://jsfiddle.net/18fk9sce/
i should add that i wish the green line to remain. some solutions seem to remove the green line running across the page.
Okay, I've just updated the solution now.
Just replace the overflow: hidden; in ul with a fixed height: 42px. And increase the padding bottom of the hovered link by 2px (i.e the border-bottom size). That would cover the border with yellow color of the link.
Check the updated fiddle
ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 42px;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
padding-bottom: 14px;
}
HTML - added wrapper
<div class="menu__holder">
<ul class="main_menu_left">
<li id="left">Homehome</li>
<li id="left">Homehomehome</li>
<li id="left">Homehome</li>
<li id="right">Homehome</li>
<li id="right">Home</li>
</ul>
</div>
CSS
.menu__holder {
width: 100%;
padding: 0;
border-bottom: 2px solid green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 9999;
margin-bottom: -2px;
}
ul li {
border-bottom: 2px solid transparent;
}
ul li:hover {
border-color: yellow;
z-index: 9999;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
Updated fiddle - NEW
You have to set the border in the li not in ul, so you can separately change the border.
Just change the Style to achieve it:
Updated fiddle
Updated Style
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
li{
border-bottom: 2px solid green;
}
li:hover {
background-color: yellow;
border-bottom: none;//you can set other color here
}
Updated CSS :-
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
border-bottom: 2px solid green;
}
a:hover {
background-color: yellow;
border-bottom: 2px solid yellow;
}
try with adding this to your css.if this is not the case tell me
ul:hover{
border-bottom:1px solid yellow;
}
thanks to everyone who contributed to this question.
in the end this is the code i use.
https://jsfiddle.net/4d0ghscu/
<style>
.menu{
height:40px;
border-bottom:4px solid green;
padding:0;}
.menu_left{
display:inline;
list-style-type:none;}
.menu_right{
display:inline;
list-style-type:none;}
.tab_left{
float:left;}
.tab_right{
float:right;}
a{
display:block;
color:black;
padding:12px 12px;
text-decoration:none;}
a:hover{
background-color:yellow;}
</style>
<ul class="menu">
<ul class="menu_left">
<li class="tab_left">Homehome</li>
<li class="tab_left">Homehomehome</li>
<li class="tab_left">Homehome</li>
</ul>
<ul class="menu_right">
<li class="tab_right">Homehome</li>
<li class="tab_right">Home</li>
</ul>
</ul>
key to the code:
*separating left from right within an overhead. which made it simpler and more flexible to add new elements to the navigation menu.
*adding height.
I have a navigation bar with four links. I want to remove the extra space to the left of "Projects" and the the right of "Contact". It appears to be part of the unordered list, and not padding or margin.
Here is the fiddle http://jsfiddle.net/95g12kpe/
<nav class="navbar">
<div class="container">
<ul class="navbar-list">
<li>Projects</li>
<li>Schedule</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</nav>
.navbar {
/*position: fixed;*/
top: 0;
left: 0;
z-index: 9999;
padding: 0;
text-align: center;
}
.navbar ul {
list-style: none;
background-color: #fff;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: -4px;
margin-right: -4px;
}
.navbar li {
position: relative;
display: inline;
margin-bottom: 0;
margin-left: -20px;
}
.navbar li:hover {
color: #000033;
}
.navbar a {
display: inline-block;
padding-right: 25px;
padding-left: 25px;
text-decoration: none;
line-height: 6.5rem;
color: #222;
font-size: 1.6rem;
font-weight: 600;
}
.navbar a:hover {
color: #006699;
background-color: #000033;
}
It is a block element, so it has width 100% by default, set it to display: inline-block; and it should be fine.
http://jsfiddle.net/95g12kpe/1/
Set a width attribute to your .navbar ul, and to keep it centered, set your horizontal margin attributes to auto, like this for example :
.navbar ul {
list-style: none;
background-color: #fff;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
}
I have this JsFiddle, and I can not figure out why the buttons extend outside of the divs.
How can I get them to be inside of the divs?
Here is the CSS
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
Here is the HTML:
<div class="left-nav">
<div>new story
</div>
<div>My Stories
</div>
</div>
You can specify display:inline-block; on the buttons, so the div expands to hold the anchors completely.
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
display:inline-block;
}
Fiddle
div.left-nav > div {
overflow: auto; /* removed clear: both; */
width: 100%;
border: solid 1px red;
}
div.left-nav > div > a {
display: inline-block;
}
http://jsfiddle.net/ZjvZu/10/
Hey hope this works for you : -
demo
<div class="left-nav">
<div class="btn">new story
</div>
<div class="btn">My Stories
</div>
CSS:-
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 8px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
.btn{
padding:8px 15px 8px 15px;
}