I want to make a css3 hover animation. When I hover I want to have a yellow arrow animate in from left to right. Should look like this:
Test page.
CSS:
#butikMenu {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none; }
#butikMenu li {
float: left; }
#butikMenu{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #ccc; }
#butikMenu li a {
background:url(images/arrowTest.png);
background-position:top left;
display: block;
padding: 20px 8px;
text-decoration: none;
text-transform:uppercase;
font-size:22px;
color: #000;
}
#butikMenu li a:hover {
background-position:105% 0 ;
-moz-transition: background-position 0.2s ease-in-out 0s;
-webkit-transition: background-position 0.2s ease-in-out 0s;
transition: background-position 0.2s ease-in-out 0s;
}
Related
The padding around the link for my dropdown menu isn't clickable. When I mouse over the actual text, it changes color and becomes clickable. How can I make the padding clickable? I read that I should style it as an inline-block, but that didn't work. This is also my first post, so correct me for the countless things that I probably did wrong.
CSS:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: left;
background-position:center;
background-image:url(sun.jpg);
}
a {
display:inline-block;
color: #6FF;
text-decoration: none;
}
a:hover {
color: #FFF;
}
ul {
color:#6FF
text-align: left;
display: inline-block;
margin: 0;
padding: 1px 1px 1px 0;
list-style: none;
}
ul li {
color: purple;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -10px;
position: relative;
padding: 20px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding:0;
position:absolute;
top: 54px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
ul li ul li {
background-color:#555;
color:#6FF;
display: block;
}
ul li ul li:hover { background: #555; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
You should put the padding to the link, no the list item because the link is what is clickable.
body {
font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: left;
background-position:center;
background-image:url(sun.jpg);
}
a {
padding: 20px 20px;
display:inline-block;
color: #6FF;
text-decoration: none;
}
a:hover {
color: #FFF;
}
ul {
color:#6FF text-align: left;
display: inline-block;
margin: 0;
padding: 1px 1px 1px 0;
list-style: none;
}
ul li {
color: purple;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -10px;
position: relative;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding:0;
position:absolute;
top: 54px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
ul li ul li {
background-color:#555;
color:#6FF;
display: block;
}
ul li ul li:hover {
background: #555;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
</ul>
I am using a premium wordpress theme for a quick website I'm making. Almost everything can be set in the admin panel, which is great, but the header size is not one of them and I find it to be a bit large now. I'd like to use the 'custom css' section in the admin panel because I'm not interested in creating a whole child theme for just that one line of code.
I tried searching for the right class, something is making this thing so big, but what?
This is the url to the page I'm talking about;
http://lindenmobileappstore.nl/drsachs/
This is all the css regarding the header (that I could find at least);
/* 3.2. Header and subheader
==================================== */
#dp-head-wrap {background:transparent; position:relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
z-index:400;
}
.page-template-template-contact-php #dp-head-wrap.semi-transparent {
background-color: rgba(33, 51, 68, 0.9)!important;}
#dp-head {
position: relative;padding: 0 10px;
}
#dp-head:after {
clear: both;
content: "";
display: table;
}
#dp-head h1 {
float: left;
margin: 0;
}
#dp-head a.cssLogo {
background: transparent url('../images/logo.png') no-repeat 0 0;
display: block;
height: 42px;
width: 143px;
text-indent: -9999px;
margin: 30px 15px 10px 0;
background-size:cover;
}
#dp-head a.textLogo {
color: #5F8CB4;
display: block;
font-size: 18px;
line-height: 22px;
padding: 7px 0 0 10px;
}
#dp-head a.textLogo small {
color: #333;
display: block;
font-size: 12px;
line-height: 12px;
}
#dp-head a.imageLogo {
display: block;
width: 160px;
height:42px;
margin: 30px 15px 10px 0;
}
#dp-head a.imageLogo img {
display: block;
width: auto;
height: auto;
max-height: 100%;
height : 100%\9; /*hack: fixes ie8 logo*/
}
.dp-header-wrapper {
background-color: #232D37;
padding: 0;
color:#fff;
position:relative;
}
#dp-header {padding: 20px 0}
#dp-header .box {margin-bottom:0}
#dp-button-area {
float: right;
margin-left: 30px;
}
#dp-button-area a {
display: block;
float: right;
margin: 42px 0 0 0;
-webkit-transition: background-color .3s ease-out;
-moz-transition: background-color .3s ease-out;
-ms-transition: background-color .3s ease-out;
transition: background-color .3s ease-out;
width:25px;
height:25px;
text-align:center;
vertical-align:middle;
color: #2d3e52;
}
#dp-header-search, #dp-logout, #dp-login {
color: #2d3e52;
font-size:18px;
display:block;
line-height:18px;
}
#dp-header-search:hover, #dp-login:hover, #dp-logout:hover {color:#5F8CB4;}
#dp-header-search-form {width:100%;
height:100%;
position:absolute;
top:0;
display:none;
background:#ffffff;
z-index:1000;}
#dp-header-search-form .dp-page {padding:50px 10px 0 10px}
#dp-header-search-form #s {
width:95%;
border:none;line-height:36pxpx;
font-size: 36px;
height:50px!important;
font-weight: 300;
color: #b9bec3;
letter-spacing: 0px;
float:left;
padding:7px 0;
background:transparent;
}
#cancel-search {float:right; width:40px; height:40px;
cursor:pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;color:#b9bec3 }
#cancel-search i {font-size:40px; text-align: center;line-height:40px;}
#cancel-search:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
.dp-subheader-wraper {
background: #213344;
padding: 0;
}
.dp-subheader {position:relative; height:120px;}
.dp-subheader .main-title {margin:0; padding:25px 0 0 10px; font-size:36px;font-weight:100;line-height:40px}
.dp-subheader .sub-title {margin:0; padding:0 0 0 10px; font-size:13px; font-weight:400; opacity:0.7;}
.dp-subheader .dp-breadcrumbs {position:absolute;right:15px;top:45px;font-size:13px;}
.dp-subheader .dp-breadcrumbs a, .dp-subheader .dp-breadcrumbs span {opacity:0.7}
.dp-subheader .dp-breadcrumbs a:hover {opacity:1}
.sf-menu li {
height: 100px;
}
Remove menu item height and overall height will be based on logo image.
I made my website responsive for tablet and smartphone. I used hover for desktop size, but on mobile size there's hover to. I want to change the hover on the mobile device to a touch without using javascript. I heard something about the no-touch modernizr to change hover to touch event?
nav{
margin-left: 2.7em;
}
nav ul ul {
display: none;
background: #5f6975;
border-radius: 0em;
padding: 0;
position: absolute;
top: 100%;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul {
background: #333333;
padding: 0 1em;
border-radius: 1em;
list-style: none;
position: relative;
display: inline-block;
}
nav ul li {
float: left;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
nav ul li:hover {
background: #555555;
}
nav ul li:hover a {
color: #ffffff;
}
nav ul li a {
font: 90% helvetica;
display: block;
padding: 1.7em 2em;
color: #ffffff;
text-decoration: none;
}
nav ul ul li {
float: none;
border-top: 0.1em solid #6b727c;
border-bottom: 0.1em solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 1em 2em;
}
nav ul ul li a:hover {
background: #292F41;
}
#media only screen and (max-width:40em)
What do i need to put here to disable the hover function for mobile and make it a touch?
Hi my problem is that I actually can't center my div!
it's always stuck on the left. I already tried the margin-left: auto; and margin-right: auto;, but it doen't seems to work.
Here's the HTML:
<ul class="menu">
<li>Acceuil</li>
<li>LoL
<ul>
<li><a><span class="headlist">League of Legends</a></li>
<li>Funny games</li>
<li>Favorite builds</li>
<li>...</li>
</ul>
</li>
<li>SSF2
<ul>
<li><a><span class="headlist">Super Smash Flash 2</a>
<li>Intro</li>
<li>Events</li>
<li>Challenges</li>
</ul>
</li>
<li>RotMG</li>
<li>GMod</li>
<li>Contact</li>
</ul>
<div>
<p>
HUEHUEHUEHUEHUEHUEHUE
</p>
</div>
And here's the css:
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* div */
div
{
text-align: center;
border-radius: 0 0 5px 5px;
width: 590px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(140,0,0,0.7);
margin-left: auto;
margin-right: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
color: #f3f3f3;
font-family: Helvetica, Arial, sans-serif;
display: block;
position: absolute;
top: 38px;
left: 25%;
z-index: -50;
margin-left: auto;
margin-right: auto;
}
/* Reset de la liste (aucun style, etc.) */
.menu,
.menu ul,
.menu li,
.menu a,
.menu p
{
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu
{
height: 40px;
width: 610px; /* Longueur du menu */
background: #760101; /* couleur du gradient */
background: -moz-linear-gradient(#D20202, #760101);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #760101),color-stop(1, #D20202));
background: -webkit-linear-gradient(#D20202, #760101);
background: -o-linear-gradient(#D20202, #760101);
background: -ms-linear-gradient(#D20202, #760101);
background: linear-gradient(#D20202, #760101);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 13px;
display: block;
margin-left: auto;
margin-right: auto;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 7px 0 40px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #4B0101;
border-right: 1px solid #5C0101;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #FF9900; }
/* Sub-menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #D20202;
background: -moz-linear-gradient(#760101, #D20202);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #D20202),color-stop(1, #760101));
background: -webkit-linear-gradient(#760101, #D20202);
background: -o-linear-gradient(#760101, #D20202);
background: -ms-linear-gradient(#760101, #D20202);
background: linear-gradient(#760101, #D20202);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 145px;
padding: 4px 0 4px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #4B0101;
}
.menu ul li:last-child a {
border: none;
}
.LoL
{
background: url(LoLicon.png) no-repeat 6px center;
}
.home
{
background: url(home.png) no-repeat 6px center;
}
.ssf2
{
background: url(SSF2.png) no-repeat 6px center;
}
.contact
{
background: url(contact.png) no-repeat 6px center;
}
.headlist
{
color:#ff9900;
}
.menu ul li:first-child a {
border-bottom: 3px solid #4B0101;
}
It's been 2 hours I'm searching so please help! :O
Margin: 0 auto; will not work with absolute positioning. Try removing position:absolute from the div and then it should work.
Here is the fiddle
If it must be absolutely positioned (thus meaning margin: auto won't work), then you can change the CSS to left: 50% and add margin-left: -295px;.
This will move the <div> 50% from the left, and then negatively bring it back by half of it's width, this leaving it in the middle.
http://jsbin.com/iJESEwe/1/edit?html,css,output
I'm Having Trouble with my Web Page: There is no bottom padding and it makes my website look weird. I have tried changing the body, and html to margin-bottom: 100px but it does not seem to work. This always seems to happen when I add outsourced navigation bars.
CSS
#charset "utf-8";
/* CSS Document */
html, body { margin: 0; padding:0px;}
body { margin: 5px; background: #f2f2f2; }
ul.menu { margin: 50px auto 0 auto; }
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu {
height: 40px;
width: 905px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
border:#8fde62 medium solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float:left;
display: block;
height: 40px;
}
/* Links */
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
/* Sub Menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }
#wrapper{
width:900px;
height:auto;
margin: 50px auto 0 auto;
}
#xboxcard{
width:300px;
height:500px;
background-color:#4c4e5a;
border:#8fde62 medium solid;
border-radius:5px;
}
#rightcontent{
width:575px;
height:342px;
background-color:#4c4e5a;
border:#8fde62 medium solid;
border-radius:5px;
float:right;
padding: 10px 10px 10px 10px;
position:absolute;
top:150px;
left:495px;
text-align:center;
color:#FFF;
}
#step1{
width:245px;
height:250px;
position:absolute;
top:550px;
left:180px;
text-align:center;
color:#FFF;
padding: 10px 10px 10px 10px;
background-color:#4c4e5a;
border:#8fde62 medium solid;
}
HTML
<body>
<ul class="menu">
<li>Home</li>
<li>Contact</li>
<li>Claim</li>
<li>Proof</li>
</ul> <!-- end .menu -->
<div id="wrapper">
<img src="#" alt="#" height="342" width="245" style=" background-color:#4c4e5a;
border:#8fde62 medium solid;
border-radius:5px;
padding:10px 10px 10px 10px;
" />
<div id="rightcontent">
<h1>This is Some right content!</h1>
</div>
<div id="step1">
</div>
</div>
</body>
</html>
try to add this your css...
#wrapper {
margin-bottom:50px;
}
or however many pixels you want the bottom margin to have
Did you try adding padding to the body element?
body{
padding-bottom: 100px;
}
Hey I setup a jsfiddle for your code to take a look, I tweaked some things, check it out and see what you find useful: http://jsfiddle.net/cVLqu/
Biggest recommendation here is:
position: relative;
on the wrapper and the boxes inside it, that way they expand the wrapper instead of floating around freely.
Also check out this post on css-tricks.com, I found it really helpful:
http://css-tricks.com/dont-overthink-it-grids/