I'm trying to replace the links on my app with a button background. However the link text won't center horizontally neither vertically. I'm using the property "background-position: center center;" which I assume would solve my problem.
My HTML:
<a class="violetButtonLarge" href="#">My Link</a>
CSS:
.violetButtonLarge {
display: block;
width: 304px;
height: 41px;
background: url(../images/violetButton_large.png) no-repeat center center;
border:none;
color: #FFFFFF;
font-weight: bold;
font-family: Arial;
background-color: transparent;
text-decoration: none;
}
My image:
What I'm I doing wrong here? This is what I get:
Thanks in advance!
Use text-align:center and line-height:41px to align the text in the vertical and horizontal center.
.violetButtonLarge {
display: block;
width: 304px;
height: 41px;
background: url(http://i.stack.imgur.com/S8zvb.png) no-repeat center center;
border:none;
color: #FFFFFF;
font-weight: bold;
font-family: Arial;
background-color: transparent;
text-decoration: none;
text-align:center;
line-height:41px;
}
Example: http://tinkerbin.com/q5VZR1At
a.button {
background: transparent url('violetButton_large.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
}
<a class="button" href="#" onclick="this.blur();"> … </a>
Probably you should set the padding, then you don't need to set the width and height. The vertical-align: baseline helps to set them on the same line with "real" input buttons.
.button {
padding: .4em 1.6em .44em 1.6em;
vertical-align: baseline;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Edit: Sorry i didn't saw the image in your code, maybe you should get a glimpse at this great example: CSS Gradient Buttons.
Related
I am trying to make a vertical navbar. I have used an unordered list, with a border-left propoerty, so that on hover, I can change the opacity/color of the border. The problem right now, is that this border appears as a continuous line across the list items. I want to include some space between the list items so that the borders are separated and one can make out which border belongs to which list item.
HTML:
<div class="leftNavbar">
<span class="navLine"></span>
<ul>
<li>Introduction</li>
<li>Whats new?</li>
<li>Gallery</li>
</ul>
</div>
CSS:
.leftNavbar{
position: absolute;
top: 100px;
z-index: 500;
left: 50px;
vertical-align: middle;
}
.leftNavbar ul{
list-style: none;
}
.leftNavbar ul li{
font-family: 'Sintony', sans-serif;
height: 100px;
text-transform: uppercase;
color: white;
font-weight: bold;
text-shadow: 0px 0px 2px #000;
vertical-align: middle;
line-height:100px;
border-left:4px solid blue;
}
JSFIDDLE: http://jsfiddle.net/ATQ4Q/
You could add a margin to the list items. Something like margin-bottom:5px;:
.leftNavbar ul li {
font-family:'Sintony', sans-serif;
height: 100px;
text-transform: uppercase;
color: white;
font-weight: bold;
text-shadow: 0px 0px 2px #000;
vertical-align: middle;
line-height:100px;
border-left:4px solid blue;
margin-bottom:5px;
}
jsFiddle example
Text within a button is breaking up in two lines in Safari - but not in Chrome and Firefox, see the screenshots. Using the CSS property break-word: keep-all; doesn't seem to work.
Any suggestions how to solve this?
not good:
good:
CSS code:
.button {
font-size: 1.5em;
padding: 0em 0.6em 0.1em 0.6em;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 24px;
width: auto;
text-decoration:none;
display: inline-block;
border: none;
border-radius: 1em;
background-color: #4ca8da;
background-repeat: no-repeat;
font-family: 'Populaire';
font-weight: normal;
font-style: normal;
color: white;
text-align: left; }
white-space: nowrap; should fix it.
Further information.
I am trying to code this block of text with image in it but for some reason it's not working for me as. What would be the best approach to get this right with CSS?
Thank you all!
UPDATE
This is what I got the problem is with that the underline heading
http://jsfiddle.net/C2kqR/
.block h3{
margin-bottom: 0.6em;
margin-top: 0;
color: #c80006;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 1.2em;
font-family: 'Signika', sans-serif;
text-rendering: optimizeLegibility;
}
.heading {
margin-bottom: 20px;
color: #c80006
}
.aleft {
float:left;
margin:0 2em 0 0 !important;
}
.hr-line-full {
width: 100%;
margin: 22px 0 35px;
display: block;
border-top: 1px solid #dedede
}
Have a look at this fiddle
CSS:
img{
float:left;
margin:0 10px 10px 0;
}
As long as the text and image are within a parent container, simply float the image left to have the text wrap around it. To Space it apart from the text, give it a margin and voila!
I have a solution for you where you can remove the hr element you are trying to imitate and instead use border for the h3.
Changed CSS for .heading:
.heading {
margin-bottom: 34px;
padding-bottom: 24px;
color: #c80006;
border-bottom: 1px solid #dedede;
overflow: hidden;
}
Fiddle here
I want to duplicate the style of buttons on this page http://oakespavers.com/ (left-hand side) with the same hover effect. Every time I try, only the text in the boxes are affected. I want the entire div to change colors on mouseover and keep the code really simple.
This might do it:
HTML:
Home
Our Blog
Contact US
CSS:
a {
border-radius: 5px;
font-weight: 600;
text-align: left;
font-family: "Verdana", "Geneva", "sans-serif";
text-transform: none;
letter-spacing: 0px;
font-weight: bold;
font-size: 12px;
display: block;
padding: 10px 20px;
color: #666;
background-color: #E1E1E1;
text-decoration: none;
width: 225px;
margin: 5px;
}
a:hover {
color: white;
background-color: #75D039;
}
Here's a fiddle with an example
I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle;
}
Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
}
button.enter {
padding:0;
}
You need to mention margin and padding as 0 coz button has the default margin and padding.
Add this below code
a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}
Here is working demo http://jsfiddle.net/6Ygc2/