I am trying to center the text "verksamheter" on my CSS3 button, but I can't get it to work.
HTML:
<span>Verksamheter</span>
CSS:
.verksamheter {
width: 220px;
height: 44px;
font-style: italic;
font-size: 18px;
display: inline-block;
text-align: center;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
background-color: #ebebeb;
-webkit-box-shadow: 0 1px rgba(0,0,0,.13), inset 0 2px rgba(255,255,255,.75);
-moz-box-shadow: 0 1px rgba(0,0,0,.13), inset 0 2px rgba(255,255,255,.75);
box-shadow: 0 1px rgba(0,0,0,.13), inset 0 2px rgba(255,255,255,.75);
border: solid 1px #4f4d6a;
background-image: -webkit-linear-gradient(top, #6e6c8a, #4f4d6a);
background-image: -moz-linear-gradient(top, #6e6c8a, #4f4d6a);
background-image: -o-linear-gradient(top, #6e6c8a, #4f4d6a);
background-image: -ms-linear-gradient(top, #6e6c8a, #4f4d6a);
background-image: linear-gradient(to bottom, #6e6c8a, #4f4d6a);
}
.verksamheter span {
vertical-align: middle;
}
The height of the <a> is 44px, so make the line-height of the text 44px as well.
http://jsfiddle.net/s4KJd/
Simply set the line-height property according to the height of the element and the font size used. For example:
.verksamheter {
line-height: 44px;
}
Here's a jsFiddle Demo.
Related
I want to create a button bar on top of the page, with div containers that contain images to use them as flat button. My problem is that I cannot get the alignment correctly.
Is there an additional way to highlight the last clicked button, so that you can see which button on the buttonbar is active without using javascript?
Here is my first approach:
<html>
<head>
<title>
</title>
<style>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0,0,0,0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.buttonBar {
float:left;
}
</style>
</head>
<body>
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<div id="firstButton" class="flatBtn2" />
<div id="secondButton" class="flatBtn2" />
<div id="thirdButton" class="flatBtn2" />
</div>
</div>
</body>
</html>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0, 0, 0, 0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
background-color: transparent;
border: none;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:focus {
background-color: #eee;
}
.buttonBar {
float: left;
}
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<button id="firstButton" class="flatBtn2" >Button 1</button>
<button id="secondButton" class="flatBtn2" >Button 2</button>
<a id="thirdButton" href="#" class="flatBtn2">A 3</a>
</div>
</div>
First of all if you want to use button, then you should you the <button> tag and add the background image through css. You can also manipulate the states in css, what you are seacrhing for is :focus and :active, so you have two rules for your buttons. The normal button rule with the main background-image and an other rule button:focus, button:active where you can load an other image or do something else.
See fiddle for a working example. I added the needed styles at the end of your css.
Hope this helps!
I'm quite new to CSS and need some help make a mobile edge using CSS.
How can we draw the mobile device edge using CSS? This is what I have tried but unable to do so.
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 2px 2px #555555;
margin: 1px;
outline: #666666 solid 2px
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
This is what it should look like :
How do we do that?
I would double up on your box-shadow declaration instead of trying to wrangle outline:
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
margin: 1px;
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
The 0px 0px 0px 1px #666666 syntax gives the shadow zero blur and a 1px offset, essentially replicating a 1px stroke.
Try this one
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
font-size: 41px;
border: solid #616161 1px;
text-decoration: none;
box-shadow: 0px 1px #555555;
margin: 1px;
display: flex;
}
.mobile:hover {
text-decoration: none;
}
<div style="width: 210px; height: 45px; border: solid #000 1px;" class="mobile">
<div style="width: 210px; height: 45px; border: solid #fff 1px; " class="mobile">
<div style="width: 200px; height: 40px;" class="mobile">
</div>
</div>
</div>
JSFiddle: https://jsfiddle.net/u7Lm5sjp/
I have some links like:
<div class="splash_button_row">
<span>
label 4 label 4 label 4
label 2
label 5 label 5label 5
label 5 label 5label 5label 5 label 5label 5
</span>
</div>
and a while bunch of .css like:
.splash_button {
background: linear-gradient(to bottom, #3498DB, #2980B9) repeat scroll 0% 0% #3498DB;
border-radius: 30px;
text-shadow: 6px 4px 4px #666;
box-shadow: 2px 2px 3px #666;
font-family: Georgia;
color: #FFF;
padding: 10px 20px;
border: 2px solid #216E9E;
text-decoration: none;
display: inline-block;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
max-width: 130px !important;
text-align: center;
font-size: 20px;
height: 65px;
vertical-align: middle;
}
The key fiddly bits here being:
height: 65px;
vertical-align: middle;
These two properties seem to be fighting one another. if I set vertical-align: middle; the text is all aligned, and the padding is evenly drawn around it(which is what I want). But when I then set height: 65px; to also make all of the buttons the same size, the text seems to get pushed to the top of the button.
How can I have all of the buttons the same (set) size, but also have the text within them vertically aligned to the center of the 'button'?
Edit:
I've read this question but it doesn't answer my question. My buttons have multiple lines, so the tricks with line-height don't work, and my buttons need to be in-line elements, so the tricks with flex don't work. Also my buttons need to be spaced, but the table-solutions seem to hinder that - but i'm still playing around with this one.
Change the display to table-cell for the vertical aligm middle to work.
.splash_button_row {
display: table;
border-collapse: separate;
border-spacing: 15px;
}
.splash_button {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 34;
-moz-border-radius: 34;
border-radius: 34px;
text-shadow: 6px 4px 4px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
font-family: Georgia;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
border: solid #216e9e 2px;
text-decoration: none;
display: table-cell;
/* TABLE-CELL */
border: solid transparent 0 10px;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
max-width: 130px !important;
text-align: center;
vertical-align: middle;
height: 65px;
/* ADD HEIGHT*/
}
<div class="splash_button_row">
<span>
label 4 label 4 label 4
label 2
label 5 label 5label 5
label 5 label 5label 5label 5 label 5label 5
</span>
</div>
.splash_button {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 34;
-moz-border-radius: 34;
border-radius: 34px;
text-shadow: 6px 4px 4px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
font-family: Georgia;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
border: solid #216e9e 2px;
text-decoration: none;
float: none;
white-space: normal !important;
word-wrap: break-word;
max-width: 130px !important;
text-align: center;
vertical-align: middle;
**margin:10px **auto;****
**display: block;**
**height: 65px;**
**display: flex;
**justify-content: center; /* align horizontal */**
**align-items: center;****
}
Did the trick for me. See the stars. I edited my answer. I think i got what you want now.
The best way to align almost everything in CSS. You only need to use the below class.
.vertical-center{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<a class="button icon tag" href="#"><span>Show All Tasks</span></a>
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 10px 20px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
display: block;
color: #597390;
line-height: 24px;
font-size: 20px;
font-weight: bold;
width: 100%;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button.icon {
padding-left: 0px;
}
a.button.icon span{
padding-left: 100px;
background: url(icons2.png) no-repeat 0 -4px;
}
a.button.icon.tag span {
background-position: 0px -65px;
}
The Image (icons2 40X96):
How it is displayed in the browser:
How can I display the entire image so it doesn't cut off?
Since it is just one image, how do I eliminate the user of position, rather just display the image?
Just give the span display:block; and height:30px;:
a.button.icon span{
padding-left: 100px;
background: url(http://i.stack.imgur.com/fEeuO.png) no-repeat 0 -4px;
height:30px;
display:block;
}
To stop the cut off, i changed the background position a little bit:
a.button.icon.tag span {
background-position: 0px -62px;
}
JSFiddle
I would guess your line-height property is restricting how much of the image is shown. Also try adding overflow: visible to the icon's container.
I am struggling with image inside a link. I don't know hot to make the first link (with image) be the same size as other links in paginations. I also don't know how to align them ?
.content .pagination a {
text-decoration: none;
color: #717171;
border: 1px solid #c0c0c0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 3px 8px;
margin: 0 1px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background-image: -webkit-linear-gradient(top, #fff, #ededed);
background-image: -moz-linear-gradient(top, #fff, #ededed);
background-image: -ms-linear-gradient(top, #fff, #ededed);
background-image: -o-linear-gradient(top, #fff, #ededed);
background-image: linear-gradient(top, #fff, #ededed);
}
.content .pagination a.prev {
padding: 11px;
position: relative;
vertical-align: middle;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAYAAADaxo44AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAB4SURBVHjaYvj//z8DDBcWFqYBcTuIzQgiQKCoqCgNSM1kgAArsASyYEhICIMVEDB/+vTJDMjfiCSYBWSuZ7KxsdGFamd49OjRMiA1HcQGGWV5DAjWrFkDk0/v6+ubBbM8Eyg3DUnSnAHJuSDJ/1u2bAEy/5sBBBgAv6VOHKw5pxYAAAAASUVORK5CYII=) 8px 7px no-repeat;
border: 1px solid #d9d9d9;
line-height: 0;
font-size: 0;
color: transparent;
}
HTML code:
<div class="pagination">
‹
1</div>
Are you talking about this ? :
<img src="path">
<img src="path">
</div>
May be the easier way to get that is to use an unicode character
CSS
.pagination a {
text-decoration: none;
color: #717171;
border: 1px solid #c0c0c0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 18px;
padding: 3px 8px;
margin: 0 1px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background-image: -webkit-linear-gradient(top, #fff, #ededed);
background-image: -moz-linear-gradient(top, #fff, #ededed);
background-image: -ms-linear-gradient(top, #fff, #ededed);
background-image: -o-linear-gradient(top, #fff, #ededed);
background-image: linear-gradient(top, #fff, #ededed);
}
.pagination a.prev:before {
content: "\03c";
}
fiddle
If you are interested in this technique, shapecatcher can be a valuable resource