My CSS Code don't detect, if my cursor over the div: But if i active "hover" with the browser developer tool, it works.
Explain: The Div shows, if I go over a button, but the div hide out, if i go out of the button...
My code:
.profilanzeige2 {
width: 20%;
float: right;
position: absolute;
text-align: center;
padding: 10px;
top: -250px;
right: 0px;
z-index: -1;
border-radius: 0px 0px 10px 10px;
color: white;
/* border: 1px solid #797979; */
background-image: none;
background: #16b751;
background: -moz-linear-gradient(top, #16b751 0%, #19ad46 100%);
background: -webkit-linear-gradient(top, #16b751 0%,#19ad4619ad46 100%);
background: linear-gradient(to bottom, #16b751 0%,#19ad46 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16b751', endColorstr='#19ad46',GradientType=0 );
transition: top 1s ease-in-out;
border: 1px solid #e7e7e7;
}
#profilanzeige:hover ~ #profilanzeige2, .profilanzeige2:hover {
top: 54px !important;
}
#profilanzeige:hover + #profilanzeige2, .profilanzeige2:hover {
top: 54px !important;
}
.profil:hover ~ #profilanzeige2, #profilanzeige2:hover {
top: 54px !important;
}
.profil:hover + #profilanzeige2, #profilanzeige2:hover {
top: 54px !important;
}
<div class="profilanzeige2" id="profilanzeige2">
<img src="https://ftimg.de/images/2017/03/02/5e2c4f6af5024d26bb95d074a3ed9a86.png">
<p class="profil-name"><?php echo $user['icname']; ?></p>
<a href="profil.php"><button type="button" class="btn btn-default" class="Profilanzeigen">
Profil anzeigen
</button></a>
<a href="logout.php"><button type="button" class="btn btn-default" class="Abmelden" href="logout.php">
Abmelden
</button></a>
</div>
You have
<div class="profilanzeige2" id="profilanzeige2">
with class profilanzeige2 but the :hover is on #profilanzeige
Another thing which could be improved, for the sake of readability, is to have different names of the class and the id in the div.
Fixxed, i had z-index on -1. I change it to over 0 and all work fine.
Related
as I said in the title I am trying to make my dropdown menu select the last option i clicked on for example:https://www.youtube.com/user/PewDiePie/videos?view=0&sort=dd&flow=grid
in some youtube channels if you select videos and click on SORT BY then choose any option then if you click on sort by again you will see the last option you clicked is selected
(css is internal) this is my code:
html:
<div style="display: inline-block; text-align: right; width: 89%"> <div tabindex="0" class="menu">
<div class="menu-dropdown">
Most Popular
Newest
Oldest
</div>
</div>
</div>
css:
<style>
/* style for the css menu dropdown container */
.menu {
position:relative;
display:inline-block;
z-index:2; padding:0;
margin:0;
outline:0;
text-align:left;
}
/* style for the button */
.menu:before {
content: "\2630 \a0 Menu";
color:white;
padding: 5px 10px;
border: 1px solid #555;
border-radius:3px;
background: #96305e;
background: -moz-linear-gradient(top, #96305e 0%, #822956 10%, #822956 90%, #751749 100%);
background: -webkit-linear-gradient(top, #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
background: linear-gradient(to bottom, #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96305e',
endColorstr='#751749',GradientType=0 );
}
.menu:focus { pointer-events:none; }
/* If :focus detected the dropdown menu is displayed by making it visible */
.menu:focus .menu-dropdown { opacity:1; visibility:visible; }
/* style for the dropdown box */
.menu-dropdown {
background-color: #364656;
width: auto;
margin:3px 0 0 0;
padding: 10px;
border-radius:3px;
border:1px black solid;
border-radius:3px;
pointer-events: auto;
position: absolute;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: visibility 1s;
background: #1f8bd3;
background: -moz-linear-gradient(top, #1f8bd3 0%, #1b7aba 10%, #1b7aba 90%, #1b61b7 100%);
background: -webkit-linear-gradient(top, #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
background: linear-gradient(to bottom, #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8bd3',
endColorstr='#1b61b7',GradientType=0 );
}
/* style the links in the dropdown */
.menu-dropdown a {
background:transparent;
border:none;
outline:0;
display:block;
color:white;
text-decoration:none;
width:160px;
padding:5px;
}
</style>
EDIT
Full Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="header">
<div class="container">
Home
<ul id="header-nav">
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a></li>
<li>Download Links</li>
</ul>
</div>
</div>
<body>
<div style="display: inline-block; text-align: right; width: 89%">
<div tabindex="0" class="menu">
<div class="menu-dropdown">
Most Popular
Newest
Oldest
</div>
</div>
</div>
<style>
/* style for the css menu dropdown container */
.menu {
position:relative;
display:inline-block;
z-index:2; padding:0;
margin:0;
outline:0;
text-align:left;
}
/* style for the button */
.menu:before {
content: "\2630 \a0 Menu";
color:white;
padding: 5px 10px;
border: 1px solid #555;
border-radius:3px;
background: #96305e;
background: -moz-linear-gradient(top, #96305e 0%, #822956 10%, #822956
90%, #751749 100%);
background: -webkit-linear-gradient(top, #96305e 0%,#822956 10%,#822956
90%,#751749 100%);
background: linear-gradient(to bottom, #96305e 0%,#822956 10%,#822956
90%,#751749 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#96305e', endColorstr='#751749',GradientType=0 );
}
.menu:focus { pointer-events:none; }
/* If :focus detected the dropdown menu is displayed by making it visible
*/
.menu:focus .menu-dropdown { opacity:1; visibility:visible; }
/* style for the dropdown box */
.menu-dropdown {
background-color: #364656;
width: auto;
margin:3px 0 0 0;
padding: 10px;
border-radius:3px;
border:1px black solid;
border-radius:3px;
pointer-events: auto;
position: absolute;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: visibility 1s;
background: #1f8bd3;
background: -moz-linear-gradient(top, #1f8bd3 0%, #1b7aba 10%, #1b7aba
90%, #1b61b7 100%);
background: -webkit-linear-gradient(top, #1f8bd3 0%,#1b7aba 10%,#1b7aba
90%,#1b61b7 100%);
background: linear-gradient(to bottom, #1f8bd3 0%,#1b7aba 10%,#1b7aba
90%,#1b61b7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1f8bd3', endColorstr='#1b61b7',GradientType=0 );
}
/* style the links in the dropdown */
.menu-dropdown a {
background:transparent;
border:none;
outline:0;
display:block;
color:white;
text-decoration:none;
width:160px;
padding:5px;
}
</style>
</body>
<center>
<h1>Games</h1>
<h3>
<a href="https://direct-link.net/165397/script"target="_blank" >Roblox
autorob script</a><br>
8 ball pool hack no root<br>
</h3>
</center>
<div id="footer">
<div class="container">
<div class="column">
<h4>My Links</h4>
<p>
<a href="https://web.facebook.com/YousefRaedXD"
target="_blank">Facebook</a><br>
<a href="https://www.youtube.com/channel/UC6x7kvBibYzem6i59UMc3kw"
target="_blank">Youtube</a>
</p>
</div>
<div class="column">
<h4>My Story</h4>
<p>Hi there! I study in middle school and i wish to be a web programmer
:3</p>
</div>
</div>
</div>
</html>
Full css (external):
#header-nav li {
display: inline;
padding-left: 20px;
}
#header-nav {
display: block;
float:right;
margin-top:0;
}
#header {
background-color: #1abc9c;
height: 150px;
line-height: 150px;
}
container {
max-width:1000px;
margin:0 auto;
}
#header-title {
display: block;
float: left;
font-size: 20px;
font-weight: bold;
}
#header a {
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
#header a:hover {
color: #222;
}
#footer {
background-color: #2f2f2f;
padding: 50px 0;
}
.column {
min-width: 300px
display: inline-block;
vertical-align: top;
}
#footer h4 {
color: white;
text-transform: uppercase;
letter-spacing: 0.1em
}
#footer p {
color:white;
}
a {
color: #1abc9c;
text-decoration: none;
}
a:hover {
color: #F6A623;
}
.post {
max-width: 800px;
margin: 0 auto;
padding: 60px 0;
}
.post-author img {
width: 50px;
height: 50px;
vertical-align: middle;
}
.post-author span {
margin-left: 16px;
}
.post-date {
color: D2D2D2;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
}
h1, h2, h3, h4 {
color: #333;
}
p {
line-height: 1.5;
}
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
margin: 0;
color: #555;
font-family: 'Montserrat', sans-serif;
}
.post, .about {
max-width: 800px;
margin: 0 auto;
padding: 60px 0;
}
Did you try to use a form in your menu and send by post or get (No matter which one) the last one you picked so, you'll be able to display it with a little bit of php.
<?php
echo"<button>{$_GET['lastOne']}</button>";
?>
!!! Only If I correctly understood the question !!!
What I understood is you want to add, like a history in your dropdown menu and the last button would be a link to the last one you visited
EDIT
Here is the code I told you I would make for you, prob not the best way to do it, but it's working
<div style="display: inline-block; text-align: right; width: 89%">
<div tabindex="0" class="menu">
<div class="menu-dropdown">
Most Popular
Newest
Oldest
<?php
if (isset($_GET['lastButtonClicked']))
{
$lastButtonClicked = $_GET['lastButtonClicked'];
echo"<a href='$lastButtonClicked'>Last button clicked</a>";
}
?>
</div>
</div>
</div>
I am trying to create a vertical timeline with some icons in it.
I used this as my starting point. I somehow managed to do it with extra span inside the div.
However it looks kind a messy. Because I use white background to hide the line, and use extra span to add the images.
Could you review my code and help me to add different images based on id or class of the li
Thanks.
Overall, I want to achieve
1. Add image based on class or id of li
2. Remove any unnecessary span img tags to clean the code.
My Version
Snippet :
body{
line-height:1.3em;
}
.history-tl-container{
font-family: "Roboto",sans-serif;
width:50%;
margin:auto;
display:block;
position:relative;
}
.history-tl-container ul.tl{
margin:20px 0;
padding:0;
display:inline-block;
}
span.check {
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAnFJREFUSA3tU01oE0EUnpndVBKjNGkKelLpxYOg4MlSEW9RqCVZEMEfFFEP/mDQ2lSK4Ck/RCh40YseBEHtbmovXuoPeO3Jiz/0okKFStJqBUmyO883WyZMdjdtSb3pHObN+74335uZ94aQ/2OVF6Cr8Gumq8ND+6mmZVAw7AB/2FOYfCo2/5UElWwqqRE2hWoheSIgcCqWsx4xCXRqF68P7kDxx6q4qwU0I+y6EnzN7AtDqMtC8ZjvgBQS604Q3bD1Pr7xHp+4AIC8FkYXUyejmjUuUUpOBu4FqPC6Mya4jopcGRnq16j+xvfuQhGIg3OyO29OC7d5g+83jmzSmW4AwEanRq3eceubCPCO+eHDWxjTJhBvdowaw4GMxQvL4gJ3bzB3bTAR6Qq9RXenAIGQX4TzE7FC+bnw5Zg5vzfUF9/2ilI6IDHV4j4rljMNFXO7KBLSr0pxQWLWKKXMrI6kL6jBffHtpXbieKwPttM4rcaLtZsACNvtJTCLxhi9tzCaui24ajZ1HIt6xReHAD7rku1Aurc4teTll2sA/BOhwV+CEnZrcdTYhT8z6d0sfUromUTRei991bqqdo2W8BjzKuFZp1Ek4sFclxMoYseYQZzA3ASiY+wGPYCn/NwuMAjHor6cnrVuBnESa75L4o6JRbL7cdM7Sa5kAciX3/X6saPP3L5vG+q2qcpWLh/azKLhSXySgyresgaoNbg9gEWdacEDnOYNJNdz98XPudmPSazJE4n5LCcX1yIu9vluoIhRbNEJ7KK0gmFP8gfd+fLZFmwFx3cDJRZiubKBX7+AX3sBe/0H57w0ni+fU2L+geUfUZTBZo5OpcoAAAAASUVORK5CYII=);
background-repeat: no-repeat;
left: -14px;
position: absolute;
padding: 20px;
}
.history-tl-container ul.tl li{
list-style: none;
margin:auto;
margin-left:200px;
min-height:50px;
border-left:1px solid #86D6FF;
padding:0 0 50px 30px;
position:relative;
}
.history-tl-container ul.tl li:first-child:before{
background: rgba(138, 223, 199, 1) none repeat scroll 0 0;
}
.history-tl-container ul.tl li:last-child{ border-left:0;}
.history-tl-container ul.tl li::before{
background: #FFFFFF none repeat scroll 0 0;
border: 2px solid rgba(138, 223, 199, 0.74);
border-radius: 500%;
content: " ";
height: 30px;
left: -18px;
position: absolute;
top: -5px;
transition: all 500ms ease-in-out 0s;
width: 30px;
}
/* .history-tl-container ul.tl li:hover::before{
border-color: #258CC7;
transition: all 1000ms ease-in-out;
} */
ul.tl li .item-title{
}
ul.tl li .item-detail{
color:rgba(0,0,0,0.5);
font-size:12px;
}
ul.tl li .timestamp{
color: #8D8D8D;
position: absolute;
width:100px;
left: -50%;
text-align: right;
font-size: 12px;
}
<div class="history-tl-container">
<ul class="tl">
<li class="tl-item" ng-repeat="item in retailer_history">
<span class="check"></span>
<div class="timestamp">
3rd March 2015<br> 7:00 PM
</div>
<div class="item-title">Start from Shire</div>
<div class="item-detail">Don't forget the ring</div>
</li>
<li class="tl-item" ng-repeat="item in retailer_history">
<div class="timestamp">
19th March 2015<br> 3:00 PM
</div>
<div class="item-title">Kill some Orcs</div>
<div class="item-detail">Don't enter the caves!!</div>
</li>
<li class="tl-item" ng-repeat="item in retailer_history">
<div class="timestamp">
1st June 2015<br> 7:00 PM
</div>
<div class="item-title">Throw that goddamn ring in the lava</div>
<div class="item-detail">Also, throw that Gollum too</div>
</li>
</ul>
</div>
You could use the ::after property.
.history-tl-container ul.tl li.achieved::after {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: -14px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAnFJREFUSA3tU01oE0EUnpndVBKjNGkKelLpxYOg4MlSEW9RqCVZEMEfFFEP/mDQ2lSK4Ck/RCh40YseBEHtbmovXuoPeO3Jiz/0okKFStJqBUmyO883WyZMdjdtSb3pHObN+74335uZ94aQ/2OVF6Cr8Gumq8ND+6mmZVAw7AB/2FOYfCo2/5UElWwqqRE2hWoheSIgcCqWsx4xCXRqF68P7kDxx6q4qwU0I+y6EnzN7AtDqMtC8ZjvgBQS604Q3bD1Pr7xHp+4AIC8FkYXUyejmjUuUUpOBu4FqPC6Mya4jopcGRnq16j+xvfuQhGIg3OyO29OC7d5g+83jmzSmW4AwEanRq3eceubCPCO+eHDWxjTJhBvdowaw4GMxQvL4gJ3bzB3bTAR6Qq9RXenAIGQX4TzE7FC+bnw5Zg5vzfUF9/2ilI6IDHV4j4rljMNFXO7KBLSr0pxQWLWKKXMrI6kL6jBffHtpXbieKwPttM4rcaLtZsACNvtJTCLxhi9tzCaui24ajZ1HIt6xReHAD7rku1Aurc4teTll2sA/BOhwV+CEnZrcdTYhT8z6d0sfUromUTRei991bqqdo2W8BjzKuFZp1Ek4sFclxMoYseYQZzA3ASiY+wGPYCn/NwuMAjHor6cnrVuBnESa75L4o6JRbL7cdM7Sa5kAciX3/X6saPP3L5vG+q2qcpWLh/azKLhSXySgyresgaoNbg9gEWdacEDnOYNJNdz98XPudmPSazJE4n5LCcX1yIu9vluoIhRbNEJ7KK0gmFP8gfd+fLZFmwFx3cDJRZiubKBX7+AX3sBe/0H57w0ni+fU2L+geUfUZTBZo5OpcoAAAAASUVORK5CYII=);
background-repeat: no-repeat;
left: -14px;
}
Note, you must add "achieved" class to the li where the check should be displayed. Also, you might use this class for highlighting the green color.
.history-tl-container ul.tl li.achieved::before{
background: rgba(138, 223, 199, 1) none repeat scroll 0 0;
}
The span is alright, though, but if you use my solution, you should get rid of it.
so I have made a navbar with an item that has a submenu.
<div id=menu>
<div class=optie>Nieuws</div>
<div class=optie>Acties</div>
<div class=optie>Over ons</div>
<div class=optie>Webshop</div>
<div class=optie>
Webshop
<span class=submenu>
<a class=suboptie href="#">Producten</a>
<a class=suboptie href="#">Winkelwagen</a>
<a class=suboptie href="#">Afrekenen</a>
</span>
</div>
</div>
The navbar works and it's fine however i can't get the submenu items to have the proper width.
The submenu is nested inside a head which allready has a dynamic size. Since I have to use position absolute it's nearly impossible to calculate the correct width. Is there a way to have the submenu automatically have the same width as the parent?
Here is a jsfiddle.
any help is appreciated
https://jsfiddle.net/eb8k0tbo/3/
The need to set position:relative on the parent and then width:100% on the child.
#menu {
font-size: 0px;
width: 80%;
text-align: center;
}
.optie {
display: inline-block;
font-size: 18px;
width: calc(20% - 2px);
height: 1.5em;
line-height: 1.5em;
background: linear-gradient(to bottom, #919191 0%,#303030 41%,#000000 75%,#000000 100%);
border: 1px solid grey;
color: white;
font-weight: bold;
position: relative;
}
.optie a {
color: white;
text-decoration: none;
}
.optie:hover a {
//color: rgb(56,56,56);
}
.optie:hover {
color: rgb(56,56,56);
background: linear-gradient(to bottom, #fac695 0%,#f4913a 58%,#f4913a 79%,#ed790e 100%);
}
.submenu {
display: none;
}
.optie:hover .submenu {
display: block;
position: absolute;
border: 1px solid grey;
width: 100%;;
}
.suboptie {
display: block;
background: linear-gradient(to bottom, #919191 0%,#303030 41%,#000000 75%,#000000 100%);
}
.submenu a:hover {
background: linear-gradient(to bottom, #fac695 0%,#f4913a 58%,#f4913a 79%,#ed790e 100%);
}
.submenu a {
color: white;
text-decoration: none;
}
.suboptie:hover {
color: rgb(56,56,56);
}
<div id=menu>
<div class=optie>Nieuws</div>
<div class=optie>Acties</div>
<div class=optie>Over ons</div>
<div class=optie>
Webshop
<span class=submenu>
<a class=suboptie href="#">Producten</a>
<a class=suboptie href="#">Winkelwagen</a>
<a class=suboptie href="#">Afrekenen</a>
</span>
</div>
</div>
So I have a navigation menu. nav.png is empty space and nav1.png nav2.png nav3.png nav4.png are actual buttons like home,about us, etc.
I have the following code:
#navigation_bar {
display: table;
margin: 0 auto;
}
.menu_btn {
display: table-cell;
}
.menu_btn img {
height: 90%;
}
<div id="navigation_bar">
<div class="menu_btn">
<img src="http://i.stack.imgur.com/7q5bs.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/wxDQj.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/Fwmkn.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/qRpbK.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/GksMc.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/7q5bs.png">
</div>
</div>
With the above code I get this
As you see the menu ISN'T centered. I want the menu to be in the centre. the bar goes out of window on the right side. but on the left side it maintains a margin of few pixels...
I want it to go out of window on BOTH sides so it kind of appears as a black line throughout the page.
Also, my nav.png is a long image (width-wise).
here are the pngs
Take the background-image approach.
#navigation_bar {
background-image: url(http://i.stack.imgur.com/7q5bs.png);
background-repeat: repeat-x;
text-align:center;
}
.menu_btn {
display:inline-block;
}
.menu_btn img {
height: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GETTING STARTED WITH BRACKETS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<img src="images/logo/logo.png">
</div>
<hr>
<div id="navigation_bar">
<div class="menu_btn"><img src="http://i.stack.imgur.com/wxDQj.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/Fwmkn.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/qRpbK.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/GksMc.png" /></div>
</div>
<hr>
</body>
</html>
Let's modernise!
Let's make this with pure CSS:
Background CSS gradients and no images, mirrored using pseudo elements
We can achieve this even more easily by using a linear gradient background and no images at all.
The background is created by the linear-gradient.
The font can be changed in the CSS if desired.
The text is vertically centered with the line-height: 40px (matching the height of the nav)
The text is horizontally centered with text-align: center on the nav
Using the data-* and pseudo elements, we can even provide a mirror image underneath with pure CSS.
Main benefits:
Link text is easily archived by search engines, improving SEO and link text is easily read by screen-readers
Gradient and links can easily be changed without editing images
Complete Example
CSS gradients are supported IE10 + and IE 6 - 9 are supported using a filter. Ensure that there are no gaps between the opening and closing <a>. This prevents an inline gap.
nav {
height: 40px;
background: #000;/*Non supporting browsers*/
background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /*IE6 - 9*/
line-height: 40px;
text-transform: uppercase;
text-align: center;
min-width: 620px;
position: relative;
}
nav::before {
background: linear-gradient(to top, rgba(76, 76, 76, 0) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
}
nav a {
color: #FFF;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
border-right: solid 1px #FFF;
padding: 0 10px;
position: relative;
display: inline-block;
}
nav a:first-child {
border-left: solid 1px #FFF;
}
nav a:hover {
background: #F00;
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
}
nav a::before {
content: attr(data-mirror);
position: absolute;
top: 100%;
left: 0;
padding: 0 10px;
color: #000;
transform: scaleY(-1);
color: #FFF;
opacity: 0.2;
pointer-events: none;
}
nav a:hover::before {
background: rgba(255,255,255,0.2);
opacity: 0.5;
}
<nav>
HomeCategoriesCreateUpload
</nav>
I'm using CSS3 buttons for a website I'm working on. However it would appear that the CSS controlling these buttons is breaking the links it styles. If anyone could point out where I am going wrong that would be greatly appreciated.
CSS controlling buttons:
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding:5px 15px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.blue {
color: #d9eef7;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#009DD1), to(#009DD1));
background: -moz-linear-gradient(top, #009DD1, #009DD1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
And the offending links:
<div class="nav">
<a href='http://www.twantrum.com/mild.html' target="_top" class='button blue'>Mild</a>
<a href='http://www.twantrum.com/restrained.html' target="_top" class='button blue'>Restrained</a>
<a href='http://www.twantrum.com/angry.html' target="_top" class='button blue'>Angry</a>
<a href='http://www.twantrum.com/mel-gibson.html' target="_top" class='button blue'>Mel Gibson</a>
</div>
There is no error in the markup you posted.
Looking at your page itself though, i noticed this section, which produces the error:
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function(){ return false; });
});
</script>
Why this does not work is answered here: What's the effect of adding 'return false' to a click event listener?
Hope it helps.