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.
Related
As the title says, I'm having issues with the hover action. Not sure what's causing it.
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header li a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I'm working on my first website for my portfolio. I've done all the markup for the first page and I've started styling it, but I'm stuck on the navigation bar. It's only the hover action that isn't working as I want it to. I'm trying to make it so that there's a rounded box behind it in a darker shade than the navigation bar, but the hover effect moves the text to the right a little bit. I read somewhere that it could be padding but I'm not entirely sure.
Appreciate any help, I'm new to all this.
Alex
The tag in the default state doesn't have the same values of padding and font-size of when it's on hover.
Try correct your code like this:
header a{
color: white;
text-decoration: none;
font-size: 21px;
padding: 8px;
height: 5px;
}
Seems you are using header a for simple action and header li a for hovering kindly try to replace your code with the following, If there is any question feel free to ask, if it solves your problem , then vote up to acknowledge our combine effort.
Thank You.
Best Wishes,
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I tried to code the example above, but I can't still don't get it. It works with a certain length, but when the length changes (because of the content inside) it breaks and I have to manually configure the padding-bottom.
Here an example:
And here's my code:
.tjbtn, .tjbtn--orange, .tjbtn--green {
font-size: 1em;
color: #fff;
text-decoration: none;
font-weight: bold;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
padding: 1em;
line-height: 3em;
text-transform: uppercase;
letter-spacing: 2px;
background-image: url("http://tj.cadman.ws/button_bg_orange.svg");
}
Is there any possibility to code this without an attached background-image and make this fluid regardless to the width?
Thanks in advance!
Give display: inline-block; and change to background-size: 100%; will work for you.
.tjbtn, .tjbtn--orange, .tjbtn--green {
font-size: 1em;
color: #fff;
text-decoration: none;
font-weight: bold;
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
padding: 1em;
line-height: 3em;
text-transform: uppercase;
letter-spacing: 2px;
background-image: url("http://tj.cadman.ws/button_bg_orange.svg");
display: inline-block;
}
Fiddle
What I'm willing to achieve is some kind of dividers that are used on http://mintteal.com/ under the captions. There is an icon inside, but I've yet failed to create such horizontal line on both sides.
You could have a peek at their HTML/CSS to learn how they did it. Here is what they have:
<div class="title">
<h1>What We Do</h1>
<i class="fi-wrench"></i>
</div>
<style>
div.title {
text-transform: uppercase;
text-align: center;
letter-spacing: 0.01em;
font-weight: 700;
position: relative;
margin-bottom: 60px;
padding-bottom: 30px;
}
.title h1 {
font-size: 48px;
margin: 0;
}
.fi-wrench::before {
content: "\f215";
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
}
div.title i {
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -20px;
border: 3px solid #41c39f;
width: 40px;
height: 40px;
line-height: 37px;
background: #f4f4f5;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-align: center;
}
</style>
Perhaps this is what you wanted Demo.
The divider is made by the :before tag. And the content inside makes up the image.
My website will not center no matter what I do to it. I have tried
margin: auto 0;
I have tried
margin-left: 50%;
margin-right: 50%;
and the most success I have had is getting the entire website aligned to the right, which is not quite what I was shooting for.
Here's the CSS that controls the alignment of the site, as well as other details. If you could hep me I'd greatly appreciate it.
#Content {
width: 1200px;
height: 850px;
padding: 5px;
margin-left: 50%;
margin-right: 50%;
background-color: #006600;
font-size: 12px;
font-color: #000;
text-align: center;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
Andrew is right, it should be:
margin:0 auto;
This is expressing margins in shorthand format. When only 2 values are given, it is interpreted as:
margin: (top and bottom value), (left and right value);
So
margin: 1px 2px;
means
margin-top: 1px;
margin-bottom: 1px;
margin-left: 2px;
margin-right: 2px;
More info here
margin:auto; works fine. here check the demo.
Fiddle
Full Screen Demo
just replace
margin-left: 50%;
margin-right: 50%;
with
margin:auto;
Full CSS
#Content {
background-color: #006600;
margin:auto;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-color: #000;
width: 1200px;
height: 850px;
}
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.