The button has these basic styles to make it look sort of 3D with a flat look.
background-color: #7a7acc;
border: none;
border-radius: 10px;
box-shadow: 0px 4px 0px #4747b2;
color: #fff;
font-family: Lato;
font-size: 16pt;
font-weight: bold;
height: 36px;
How can I make it appear pushed down like it appears now with the box-shadow, except above? I considered using -4px instead of 4px, but that doesn't move the button down 4 pixels. How can I do this properly? I also have to move the text down 4 pixels.
if you want to button to appear pushed down when its pushed down
add and active psuedo class and then position relative and then add a top:#px to it
.btn:active{
position:relative;
top:4px;
}
here is a demo http://jsfiddle.net/p5w4x/
If the idea is to center either button vertically, this should do the trick:
vertical-align: middle;
Related
I want it to be like this:
Currently, it is like this:
So, as shown most of the background is highlighted in white but there is a small left and right section which is purple.
The code I have so far which correspond to the menu items is:
.collapsible-menu ul
li:hover:not(:last-child) {
background-color:white;
width:100%;
color: #4C27B3;
text-decoration: none;
outline:none;
}
It is probably a quick fix but I need a second pair of eyes to pinpoint the issue. Many thanks in advance.
All code can be seen here:
https://codepen.io/JoyFulCoding/pen/EzXowL
in Css
.menu-content{
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: bold;
padding: 0 0 0 50px;
/* add this margin left & right to make hover white full screen*/
margin-left: -79px;
margin-right: -30px;
}
in Css
.collapsible-menu {
background-color: #4C27B3;
border: none;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
Remove Padding from this class in code
I want to hide circle button in paper-radio and replace that with a custom div which displays circle with number.
I tried below code,but it hides all contents
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
paper-radio-button{
visibility: hidden; /* hides circle button but also hides content inside radio button tag**/
}
<paper-radio-button checked>
<div class="numberCircle">2</div>
</paper-radio-button>
I tried these codes
Plunker:https://plnkr.co/edit/kzCDugV8O2H5Z0eKMLZS?p=preview
I've been trying the same for a time. However, did not find any way to do it. You could work around with the exposed mixins (--paper-radio-button-unchecked-color and --paper-radio-button-checked-color) by setting the colour the same as the background, but it would not work if the selected style would be a different colour.
I'm trying to vertically align a number in a div.
Here's the code :
<div class="nb">2</div>
display: inline-block;
height: 56px;
width: 56px;
background: transparent url("../img/stepnb.png") center center no-repeat;
line-height: 56px;
color: #255066;
text-shadow: 1px 1px 3px rgba(255,255,255,.75), -1px -1px 2px rgba(0,0,0,0.75);
font-size: 42px;
font-weight: bold;
margin-top: -25px;
note : the result is the same on IE9 to 11
As you can see, it's not vertically centered on different browsers.
Do you have an idea how I could achieve to align it on all major browsers without conditionnal comments or css hacks?
edit: the issue could come from the use of a css reset, I'll check that.
edit 2 : The alignment issue came from the "Myriad pro" font, which was assigned to a parent div.
The alignment issue came from the "Myriad pro" font, which was assigned to a parent div.
Thank you all for the help :)
I want to wrap an <a> around a div. When I add that, the border's colour remains the same orange the text is colored.
The orange turns to black when I toggle color rule in Chrome's developer tools, however I obviously don't want the viewer to be required to do the same.
Notice that only the Block Fuse project box has this issue, none of the other boxes do because they do not have an <a> tag.
I have reproduced this issue in:
Chrome Version 23.0.1271.95
Chrome Canary Version 25.0.1342.0
Here is the relavent html:
<a href="projects/blockfuse.html">
<div class="project">
<div class="projectTitle">Block Fuse</div>
<div class="projectDescription">Block Fuse is a game about knocking as many blocks onto the floor as possible.
<div class="projectImage"><img class="projectImage" src="images/BlockFuse.png"></img></div>
</div>
</div>
</a>
Here is the relavant css:
div.projectTitle {
text-align: center;
font-size: 20pt;
color: #F90;
padding: 20px 0px 15px 0px;
font-family: "Arial", "Helvetica", Sans-Serif;
border-radius: 20px 20px 0px 0px;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: black;
background-color: #444;
}
div.projectDescription {
height: 310px;
font-family: "Arial", "Helvetica", Sans-Serif;
font-size: 12pt;
color: #EEE;
text-shadow: 1px 1px 1px #000;
background-color: #777;
padding: 17px;
border-radius: 0px 0px 20px 20px;
}
Try it live on my website: http://www.rollingkinetics.com/index.html
I think the issue here is that you need to set the color for the a:visited selector. I did not see the issue initially, but i did after I clicked on the link.
I recommend to place the hyperlink inside the div. This makes a better behavior as I experienced.
(in this case the link will be applied for the children of the div and the outer wont get additional a:link color)
make text decoration none on hyper link just add this
a{
text-decoration:none;}
I'm having far too much trouble figuring out why an icon on my website isn't aligned as it is on other pages using the same CSS and source files.
Here is where it is behaving oddly in all browsers: http://igpmanager.com/account
The icon for 'home' (top left corner under the website logo) is aligned to the top of its container for some reason.
Yet it shares exactly the same HTML/CSS source (as far as I can tell) with this page: http://igpmanager.com. Yet the same icon on this page is aligned to the middle of its container. This is where I want it to be on the /account URL also.
What is causing this? I've looked quite thoroughly for an answer but haven't had any luck in finding it.
Actually everything is top aligned, the reason that the text drops lower is because you have set
#nav a, #nav a:visited, #nav a:active {
...
line-height: 26px;
...
}
Which pushes your text down, but line-height has no impact on image positioning. You would be better of removing the line-height declaration and adding padding-top instead, and reducing the element's height to compensate
#nav a, #nav a:visited, #nav a:active {
display: block;
background-color: #33383F;
color: #B3B6BF;
height: 18px;
padding: 4px 12px;
text-decoration: none;
font-weight: normal;
border: 1px solid #4D545F;
border-bottom: none;
border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
word-wrap: break-word;
}