Here is the CSS i'm using:
body {
font-family: 'Open Sans', sans-serif;
background-color: #DB1F1F;
}
.navbar-menu {
background-image: linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -o-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -moz-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -ms-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.41, rgb(72,174,52)),
color-stop(0.71, rgb(101,209,78))
);
background-repeat: repeat-x;
border-color: #2DB51B;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-style: solid;
height: 50px;
width: 100%;
margin: 0px 0px;
position: relative;
}
.navbar-menu ul {
list-style-type: none;
position: absolute;
display: inline;
}
.navbar-menu li {
display: inline;
position: relative;
}
.navbar-menu a {
text-decoration: none;
color: #FFFFFF
}
.navbar-btn {
background-color: #44D1DB;
border-radius: 7px;
border: 1px solid #65A6AB;
height: 20px;
width: 45px;
padding: 10px;
position: relative;
}
.navbar-btn:hover {
background-color: #6CCCF5;
}
Basically i'm trying to make it go more up as it's completely stuck
down. Here is the HTML i'm using:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Button</title>
</head>
<body>
<div class="navbar-menu">
<ul>
<div class="navbar-btn"><li>HTML</li></div>
</ul>
</div>
</body>
</html>
You can use JSFiddle and see how it looks like, I'm not sure how to fix it, I tried putting position: relative; in attempt to fix it.
Top, margin-bottom just make it go up a little, I want it fitting right on the navbar. Can someone help?
Try this:
CSS:
body {
font-family:'Open Sans', sans-serif;
background-color: #DB1F1F;
}
.navbar-menu {
background-image: linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -o-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -moz-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -ms-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(72, 174, 52)), color-stop(0.71, rgb(101, 209, 78)));
background-repeat: repeat-x;
border-color: #2DB51B;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-style: solid;
height: 50px;
width: 100%;
margin: 0px 0px;
position: relative;
}
.navbar-menu ul {
list-style-type: none;
position: relative;
display: inline;
}
.navbar-menu li {
display: inline;
position: relative;
}
.navbar-menu a {
text-decoration: none;
color: #FFFFFF
}
.navbar-btn {
background-color: #44D1DB;
border-radius: 7px;
border: 1px solid #65A6AB;
height: 20px;
width: 45px;
padding: 10px;
display: inline-block;
}
.navbar-btn:hover {
background-color: #6CCCF5;
}
Demo.
Remove this <div class="navbar-btn"><li>HTML</li></div> with this <li class="navbar-btn">HTML</li>
Related
How to change header list items color onClick?By default home item background color is green.When I click contact item or any other it should get background color green and home item shouldn't have green background anymore!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="art-main">
<header class="art-header">
<nav class="art-nav">
<ul class="art-hmenu">
<li>Home</li>
<li>Contact Us</li>
<li>About</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
.art-header
{
margin:0 auto;
height: 100px;
background-position: 19px 6px, 0 0;
position: relative;
width: 900px;
z-index: auto !important;
}
.art-nav
{
padding:5px 2px;
position: absolute;
margin: 0;
top: 20px;
width: 100%;
z-index: 100;
text-align: right;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: middle;
}
ul.art-hmenu>li {
margin-left: 2px;
}
ul.art-hmenu>li:first-child {
margin-left: 1px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 1px;
}
ul.art-hmenu>li>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid transparent;
padding:0 22px;
margin:0 auto;
position: relative;
display: block;
height: 51px;
cursor: pointer;
text-decoration: none;
color: #808080;
line-height: 51px;
text-align: center;
}
.art-hmenu>li>a,
.art-hmenu>li>a:link,
.art-hmenu>li>a:visited,
.art-hmenu>li>a.active,
.art-hmenu>li>a:hover
{
font-size: 14px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
ul.art-hmenu>li>a.active
{
background: #73B078;
background: -webkit-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -moz-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -o-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -ms-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
-svg-background: linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: linear-gradient(to bottom, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #57995C;
padding:0 22px;
margin:0 auto;
color: #FFFFFF;
text-decoration: none;
}
ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
background: #ADAF88;
background: -webkit-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -moz-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -o-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -ms-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
-svg-background: linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: linear-gradient(to bottom, #C2C3A7 0, #969867 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #ADAF88;
padding:0 22px;
margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop ul.art-hmenu>li:hover>a {
color: #FFFFFF;
text-decoration: none;
}
With jquery
$('ul li a').click(function(){
if ($('ul li a').hasClass("active")){
$('ul li a').removeClass("active");
}
$(this).addClass("active");
});
.art-header
{
margin:0 auto;
height: 100px;
background-position: 19px 6px, 0 0;
position: relative;
width: 100%;
z-index: auto !important;
}
.art-nav
{
padding:5px 2px;
position: absolute;
margin: 0;
top: 20px;
width: 100%;
z-index: 100;
text-align: right;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: middle;
}
ul.art-hmenu>li {
margin-left: 2px;
}
ul.art-hmenu>li:first-child {
margin-left: 1px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 1px;
}
ul.art-hmenu>li>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid transparent;
padding:0 22px;
margin:0 auto;
position: relative;
display: block;
height: 51px;
cursor: pointer;
text-decoration: none;
color: #808080;
line-height: 51px;
text-align: center;
}
.art-hmenu>li>a,
.art-hmenu>li>a:link,
.art-hmenu>li>a:visited,
.art-hmenu>li>a.active,
.art-hmenu>li>a:hover
{
font-size: 14px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
ul.art-hmenu>li>a.active
{
background: #73B078;
background: -webkit-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -moz-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -o-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -ms-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
-svg-background: linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: linear-gradient(to bottom, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #57995C;
padding:0 22px;
margin:0 auto;
color: #FFFFFF;
text-decoration: none;
}
ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
background: #ADAF88;
background: -webkit-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -moz-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -o-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -ms-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
-svg-background: linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: linear-gradient(to bottom, #C2C3A7 0, #969867 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #ADAF88;
padding:0 22px;
margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop ul.art-hmenu>li:hover>a {
color: #FFFFFF;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="art-main">
<header class="art-header">
<nav class="art-nav">
<ul class="art-hmenu">
<li><a class="active">Home</a></li>
<li><a>Contact Us</a></li>
<li><a>About</a></li>
</ul>
</nav>
</header>
</div>
My overflow-x: hidden; from the code ruins my dropdown bar.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
I think this should be fixable with an overflow-x: visible; somewhere but I can't find out where to make it work.
I also can't delete it or my website will do this:
When it should be like this:
I got a code snippet to show it (it's a lot of code but I don't know what code is usefull and what not so I put most of it on here)
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
width: 100%;
height: 100%;
overflow-x: hidden; //The problem
}
.navbar ul {
list-style-type: none;
border-radius: 5px 0 5px 5px;
overflow: hidden;
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #d8d7d3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #d8d7d3 100%);
height: 45px;
-moz-border-radius: 5px 0 5px 5px;
-webkit-border-radius: 5px 0 5px 5px;
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
box-shadow: 0 -2px 2px rgba(105, 105, 105, 0.12) inset;
}
.navbar li {
float: left;
max-width: 1200px;
width: 15%;
}
.navbar li a {
display: block;
color: #000000;
text-align: center;
padding: 14px 2em;
text-decoration: none;
border-right: 1px solid #c8c8c8;
}
.navbar li a.active {
color: #eb800e;
background-color: rgba(255, 255, 255, 0.2);
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
}
.navbar li .dropdown-content a {
padding: 14px 0;
}
.navbar li a:hover {
color: #eb670c;
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
background-color: rgba(255, 255, 255, 0.2);
}
li .dropdown-content a:hover {
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #d8d7d3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #d8d7d3 100%);
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
}
.dropdown:hover .dropdown-content {
display: block;
}
li.dropdown {
display: inline-block;
width: 165px;
}
.dropdown-content {
display: none;
position: absolute;
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e8e7e3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #e8e7e3 100%);
border-right: 1px solid #CBCACA;
width: 165px;
margin-top: -3px;
}
.dropdown-content a {
color: black;
padding: 12px 0;
text-decoration: none;
display: block;
text-align: center;
white-space: nowrap;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.block_for_scroll{
height: 85%;
}
<div class="navbar">
<nav>
<ul>
<li class="dropdown">
Artikelen ▼
<div class="dropdown-content" id="myDropdown">
Displays
Manden
Signing
</div>
</li>
<li>Home
</li>
<li>Vision
</li>
<li>Clubrax
</li>
<li>Over ons
</li>
<li>Contact
</li>
</ul>
<br class="ClearLeft">
</nav>
</div>
<div class="block_for_scroll"></div>
first hover over and it works fine, then scroll down and hover over it and you see it goes wrong. Dont expand the snippet.
Update
picture for the answer of Jack Goodman
Header going over screen
Update
Explaining the fiddle
If your scrolled down:
Does this only happen by my fiddle?
change the "li.dropdown" css like this:
float: left;
width: 25%;
So I found the answer (finally) myself,
I removed the overflow-x from the body (which I did because I had the same problem as White space showing up on right side of page when background image should extend full length of page) and placed the overflow-x in article only (got my code splitted into header-article-footer) then the navbar still works and the code works just fine also on mobile devices.
I am new in css/html . I am working on cctccart project.while running this code
in bottom_menu,during click any menu like Products ,white background color is merging with blue.I want to fix this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li>Company
</li>
<li>Products
<u1 class="submenu">
<li>DVR & Kits
</li>
<li>spy camraes
</li>
<li>alarms
</li>
</u1>
</li>
<li>Services
</li>
<li>Support
</li>
<li>Multimedia
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 45px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
Edit your CSS to this:
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px; /* this is the thing you have to fix */
line-height: 35px;
text-align: center;
}
I hope it can help you.
Link
HTML
<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span><span class="text">Add Details</span></label>
<label class="button">
<input type="radio" name="button" /> <span class="outer"><span class="inner"></span></span><span class="text">Choice 2</span></label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>
CSS
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 10px Arial, Verdana, Geneva, sans-serif;
line-height: 3px;
padding-right: 5px;
}
.button:hover .inner {
opacity:.5;
}
.button input {
display:none;
}
.button input:checked + .outer .inner {
opacity:1;
}
.button .outer {
background:#2989d8;
background:-moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background:-webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border:1px solid black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
height:10px;
margin:5px;
width:10px;
}
.button .inner {
background:#e4f5fc;
background:-moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background:-webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:block;
height:10px;
margin:.5px;
opacity:0;
-moz-transition:opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
width:10px;
}
span.text,
span.outer
{
display: inline-block;
vertical-align: middle;
}
I have this simple button:
.btn {
border-radius: 2px;
background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
color: rgb(64, 64, 64);
text-align: center;
height: 25px;
border: 1px solid #d9d9d9;
vertical-align: middle;
font-family: "Segoe UI";
box-shadow: 0px 0px 1px #d9d9d9;
}
<button class="btn">Some button</button>
Now I want to make something like this:
It's certainly not perfect, but it ain't too bad...
.btn {
border-radius: 2px;
background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
color: rgb(64, 64, 64);
text-align: center;
height: 25px;
border: 1px solid #d9d9d9;
vertical-align: middle;
font-family: "Segoe UI";
box-shadow: 0px 0px 1px #d9d9d9;
position: relative;
}
.btn span {
position: relative;
z-index: 1;
}
.btn:after {
content: "";
width: 16px;
height: 16px;
background-image: -moz-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -webkit-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -ms-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
display: block;
position: absolute;
top: 3px;
right: -9px;
border: 1px solid #d9d9d9;
border-left: none;
border-bottom: none;
border-radius: 2px;
-webkit-transform: rotate(47deg) skew(5deg);
-moz-transform: rotate(47deg) skew(5deg);
transform: rotate(47deg) skew(5deg);
}
<button class="btn"><span>Some button</span></button>
.btn {
position: relative;
background: #c2e1f5;
border: 10px solid #c2e1f5;
}
.btn:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.btn:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 36px;
margin-top: -36px;
}
You can wrap the button in a button and then use the position as relative of the wrapper and then add a :before, you can add a border to the :before and make the width and height 0.
It's hard to explain, it's better if you check this blog: https://developerwings.com/button-with-a-sideways-triangle-using-css-html/
I am creating a menu which I am trying to base on this menu:
http://www.yootheme.com/widgetkit
However I have run into a small problem where if you hover over the middle of the menu item, it works ok, but if you hover over the edge of it (where the border line is), it moves itself and the other menu items in front of it to the right by 1px.
I have been messing around with the code for a fair amount of time now and can't seem to figure it out.
HTML:
<div class="nav">
<ul>
<li>Home</li>
<li class="active">Structure</li>
<li>Buttons</li>
<li>Forms</li>
<li>Download</li>
</ul>
</div>
CSS:
.nav {
max-width: 100%;
}
.nav ul {
max-width: 100%;
margin: 0 auto;
background: #FFFFFF;
background: -webkit-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -moz-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -ms-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -o-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: 100% 100%;
border: 1px solid #c8c9ca;
border-radius: 6px 6px 6px 6px;
height: 40px;
}
.nav ul li {
margin-top: -1px;
padding-top: 1px;
float: left;
height: 39px;
list-style: none outside none;
}
.nav ul li:first-child {
border-left: none;
}
.nav ul li.active{
border-left: 1px solid #DCDDDE;
border-right: 1px solid #DCDDDE;
padding-top: 1px;
float: left;
list-style: none outside none;
background: -webkit-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -moz-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -ms-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -o-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
color: #000000;
}
.nav ul li.active:hover{
padding-left: 1px;
padding-right: 1px;
}
.nav ul li:hover{
border-right: 1px solid #DCDDDE;
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
color: #000000;
}
.nav ul li a {
float: left;
text-decoration: none;
display: block;
font-family: 'YanoneKaffeesatzLight', Arial, sans-serif;
height: 38px;
line-height: 38px;
padding-left: 22px;
padding-right: 22px;
display: block;
color: #444444;
font-size: 17px;
text-shadow: 0 1px 0 #FFFFFF;
}
.nav ul li a:hover{
padding-left: 21px;
padding-right: 21px;
}
I have also made a JSFiddle for a proper preview.
Can anyone help me figure out why this is happening and provide a possible solution? It's probably something stupid I'm not seeing.
That's because you put borders on LI:HOVER and after that you change the padding on A:HOVER not on LI:HOVER again. Just change the place of :hover like this:
.nav ul li:hover a{
padding-left: 21px;
padding-right: 21px;
}
And I think it should be fine now.