This question already has answers here:
Inline elements shifting when made bold on hover
(30 answers)
Closed 6 years ago.
I am using CSS to style some radio buttons as tabs. I would like the "selected" tab's font-weight to be bold. Of course, this causes the size of the tab to increase, as the text takes up more space. I would like to find a way to have the text go from bold to non-bold without the "tab" changing size
Short of setting a fixed width, is there a crafty and clean way of making the text take up the size of bold text without it actually being bold?
The only method I can think of would be to have the bold text exist (causing the text to exist twice in the HTML), but with visibility: hidden.
Markup:
<label class="tab active"><input type="radio" name="someTabs" value="someValueA" />Tab 1</label>
<label class="tab"><input type="radio" name="someTabs" value="someValueB" />Tab 2 (with longer text)</label>
Relevant CSS as it is now:
.tab {
display: block;
font-size: 1.2em;
height: 2em;
line-height: 2em;
margin-right: 1px;
padding: 0 2em;
position: relative;
text-align: center;
float: left;
}
.tab.active,
.tab:hover {
font-weight: bold;
}
.tab input[type=radio] {
display: none;
}
There is also a solution using ghost elements. Simply use the same text with a bold style, which lies underneath the visible ares:
HTML:
<div class="link">
<div class="text">Sample Text</div>
<div class="ghost">Sample Text</div>
</div>
CSS:
.link {
border: 1px #000 solid;
display: inline-block;
}
.link .ghost {
color: transparent;
font-weight: bold;
}
.link .text {
position: absolute;
text-align: center;
}
.link .text:hover {
font-weight: bold;
}
Here is a jsFiddle to check it out!
The only caveat is that the visible text is not centered within the outer div. Maybe someone can pick up from here?!
What about css letter-spacing? The result will be near the desired one:
.tab
{
letter-spacing: 1.5px;
}
.tab.active, .tab:hover
{
letter-spacing: normal;
}
jsfiddle example
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I'm kinda lost, because this is weird for me, it's supposed to not have gap between either button or hyperlink tags, because i use display: inline-block. I'm not using margin, and chrome inspector also telling me that there's no margins in-between.
Screenshot: https://i.stack.imgur.com/P7L2w.png
.titlebar {
width: 100%;
height: auto;
background: var(--titlebar-color);
user-select: none;
-webkit-app-region: drag;
}
.titlebar * {
-webkit-app-region: no-drag;
height: 100%;
}
.titlebar a {
all: unset;
display: inline-block;
cursor: default;
padding: 1px 11px;
text-align: center;
font-family: 'Inconsolata', monospace;
background: var(--titlebar-button-color);
}
.titlebar a#titlebar-title {
background: var(--titlebar-button-title-color);
}
I also using normalize.css and skeleton.css.
Codepen: https://codepen.io/mahesha-c-gumelar/pen/jOBJgOK
How can I remove the gap between hyperlink block, any help is appreciated. Thank you.
Write item's html tags without enter or space, Like this:
a {
display: inline-block;
width: 100px;
height: 40px;
background: gray;
color: #fff;
text-align: center;
line-height: 40px;
}
<div class="test">
123
</div>
You can write font-size: 0 on the parent element, but set it back on the a tag
enter image description here
I have a button that has a long title or label, so it streches out and doesn't look the best. It looks specially bad on smaller screens where it goes off screen. This is what the code currently looks like:
export function MyComponent() {
return (
<section className="my-section">
<a className="ant-btn ant-btn-primary" href="/somewhere">Button with a very long title or content within it</a>
</section>
)
}
.my-section > .ant-btn.ant-btn-primary {
background-color: #f29544;
border-color: #f29544;
font-size: 20px;
font-weight: 600;
padding-bottom: 10px;
margin: 0 0 10px 5px;
}
With this CSS, this is what it currently looks like:
Now, I would like it to wrap the content when it becomes too much and become a "fatter" button with two or more lines within it. How do I do that?
I have tried to add white-space:pre-wrap, but this breaks the line and leaves the content outside the button, so there is more to it, I am just not sure what. Here is what it looks like:
I also do think even on larger screens it would probably be better as a fatter button with two lines. How do i get it to do that?
Thanks!
Setting
white-space: normal
height: auto
seems to do the trick for me.
Split your text inside button into two separated <span> tags with white-space: nowrap CSS rule.
body {
font-family: sans-serif;
}
span {
white-space: nowrap;
}
button {
background-color: #f29544;
border-color: #f29544;
font-size: 20px;
font-weight: 600;
padding-bottom: 10px;
margin: 0 0 10px 5px;
}
<button>
<span>Text long long text</span> <span>long long text long long text</span>
</button>
Run this code in separated window and try resize/reduce window to observe the behavior.
Updated Css :
.ant-btn.ant-btn-primary {
background-color: #f29544;
border-color: #f29544;
font-size: 20px;
font-weight: 600;
padding: 10px 20px;
margin: 0 0 10px 5px;
display: inline-block;
white-space: nowrap;
}
.username::placeholder {
padding-top: 14px;
text-align: center;
vertical-align: middle;
color: $grey-blue;
overflow: hidden;
}
.username {
resize: none;
width: 250px;
height: 46px;
text-align: center;
vertical-align: middle;
font-size: 16px;
font-family: "SansSerif", sans-serif;
display: inline-block;
border: 2px solid $blue;
}
.submit
{
vertical-align : middle;
background-color : $blue;
color : $white;
border : 2px solid $blue;
text-align : center;
padding : 16px 32px;
text-decoration : none;
display : inline-block;
font-size : 16px;
margin : 4px 2px;
cursor : pointer;
}
<form class="center">
<textarea minlength="2" maxlength="24" title="Username" placeholder="Username" class="username"></textarea >
<button type="submit" class="submit">Submit</button>
</form>
I would like to vertically center some text in a text-field, I was able to get the placeholder text centered, but not the actual text that's being typed.
What I'm hoping to accomplish by reaching out, is to have the user's text be aligned with the placeholder text, and the "submit" button next to it.
If you run the code snippet above, and try to put text in the field, you'll see what I mean.
One solution I've tried is to wrap the in a div, didn't work.
Here is my HTML:
http://secure.serverbox.net/sharex/201803/2018-03-28_15-07-02.png
Here is my styling:
http://secure.serverbox.net/sharex/201803/2018-03-28_15-08-19.png
Here is what the problem looks like:
With Placeholder: http://secure.serverbox.net/sharex/201803/2018-03-28_15-09-25.png
VS
With Text: http://secure.serverbox.net/sharex/201803/2018-03-28_15-11-52.png
Notice how the placeholder text is vertically aligned differently than the user's input.
Thanks in advance!
It looks like the actual text that's being typed is already centered. Maybe you are talking about vertical align ? You added padding-top to the placeholder, why not the same thing for .username ? I suggest you to delete .username::placeholder and only work with .username (Don't forget to add padding top this time). I hope it's helpful :)
Can this be done with icon font and :before?
Aim: a large icon centered in a div with a text label centered below it.
The old way I would do this would be a background image and padding-top to render the image above the div content.
Would prefer to use an icon font. Displaying an icon to the left of the text is easy enough using :before but is it possible to display it above instead?
Thanks.
EDIT: I have no code other than bog standard icon font usage:
.mydiv:before {
content: "\f11c "; /* this is the Unicode for the icon */
font-family: FontAwesome;
margin-right: .2em;
}
this places an icon befor the text. Don't even know if possible to posisiton it above instead.
Could it be something like this?
.mydiv {
font-family: sans-serif;
width: 120px;
padding: 10px 0;
text-align: center;
border: 1px solid #000;
border-radius: 3px;
background: #333;
color: #fff;
}
.mydiv:before {
content: "\f11c ";
font-family: FontAwesome;
display: block;
margin-right: .2em;
text-align: center;
}
http://jsfiddle.net/4W8dg/
In the "old days" we could put everything into td cells and everything lined up very nicely. With this css, I'm kind of lost with how to do some things. The issue I am having is that I would like to take the left side text, pad about 50px on the right side and then use an input tag next to the text. What I am getting though is the input boxes are not even depending on the length of the text. If I used a table design, the td tag would have expanded to the longest text and then all of the inputs to the right would line up great. How can I achieve this with css?
Here is my html
<li class="mainForm" id="fieldBox_2">
<label class="formFieldQuestion">Caption: <input class=mainForm type=text name=field_2 id=field_2 size='30' value=''>
<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>please enter the</span></a>
</label>
</li>
And the CSS
#mainForm
{
position: relative;
border: 1px;
border-style: solid;
margin: 0 auto;
text-align: left;
width: 70%;
background-color: #ffffff;
}
ul.mainForm
{
list-style-type: none;
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size:15px;
}
li.mainForm
{
padding-bottom: 10px;
}
label.formFieldQuestion
{
line-height:125%;
padding:0 4px 1px 0;
border:none;
display:block;
font-size:95%;
font-weight:bold;
}
Put the input field description in a label tag and assign a fixed width style to the labels.