I have this pure-CSS (display) solution for a follow button:
<span class="follow-status following">
<a href="#" class="btn btn-follow" data-user-id="123">
<span class="following-text"><i class="icon-ok"></i> Following</span>
<span class="follow-text"><i class="icon-plus"></i> Follow</span>
<span class="unfollow-text"><i class="icon-remove"></i> Unfollow</span>
</a>
</span>
I'd like to, for example, change the text on hover depending on what shows up. However the a element has the padding, and stylizing the span looks really awkward.
- Should I overwrite the A padding and shift it into the span?
- Should I write the HTML differently?
- Should I just toggle applicable text/style by JS?
- Something else?
you can see the outer span has the class "following"
.follow-status span { display:none }
.following .following-text { display: block}
.following:hover .following-text { display: none}
.following:hover .unfollow-text { display: block}
how would you accompliush that within the twitter bootstrap confines?
Personally, I would remove all padding/margins from the spans inside the anchor and apply your CSS padding/margins etc to the anchor element. That way you future proof yourself incase you want to add different elements inside the anchor element.
Related
I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>
I was wondering, say I have a button like so:
<button><i class="font-icon-class"></i></button>
would it be possible for me to add padding (or any other style) to the .font-icon-class should the button also contain text or another HTML tag? So if my button was like so:
<button><i class="font-icon-class"></i> Button Text </button>
or
<button><i class="font-icon-class"></i> <img src="..."></button>
I thought I could apply a padding-right using a CSS selector, something like
.font-icon-class + * {
padding-right: 5px;
}
Obviously that doesn't work and I know I could use JavaScript but I was wondering if CSS could provide a solution?
Many thanks in advance.
You can try the :only-child selector
.font-icon-class:only-child {
padding-right: 0px;
}
.font-icon-class {
width: 15px;
background: lime;
padding-right: 15px;
}
button {
width: 150px
}
<button><i class="font-icon-class">test</i></button>
<button><i class="font-icon-class">test</i><span>HELLO</span></button>
CSS is short for Cascading Style Sheets, which means it adds the style as it goes down the code - not up. Therefore you can't (Yet? I believe I read somewhere you will be able to, in the future) add style to an element, if it has another element after.
A solution - if you have access to the HTML, would be to add a span around the element after the .font-icon-class, like so:
<button>
<i class="font-icon-class"></i>
</button>
<button>
<i class="font-icon-class"></i>
<span>Button Text</span>
</button>
<button>
<i class="font-icon-class"></i>
<span><img src="..."></span>
</button>
And then your own CSS would work, but you could narrow it down so you don't target all elements after the .font-icon-class, change the padding to left, and display the span as inline-block:
.font-icon-class + span {
display: inline-block;
padding-left: 5px;
}
This would add a padding to the span-element inside the button, if it is after the .font-icon-class-element
should the button also contain text or another HTML tag?
there is no need of any HTML tag or text if you don't want.
and from your question what I understood is, You can directly style the class like this,
and If want to add padding or any style just to next element in button, then you can do this,.
.font-icon-class + *{ any Style of your choice }
.font-icon-class {
padding-right: 15px;
}
<button><i class="font-icon-class"></i></button>
I have a span tag with a class specified. In my CSS I use that class to set "align:left" in order to override bootstap css of "align:center". When I inspect the span tag, my override is checked as is the bootstrap css with a "align:center" crossed out. But the text in the span is still centered. If I uncheck the "align:center" style, it aligns left. Why is bootstrap not being overridden? I also tried using and ID instead of a class but for some reason the CSS didn't get picked up at all. Here is some code:
.bulletsLeft {
text-align: left !important;
}
<span class="bulletsLeft">
Some text!
</span>
and
#bulletsLeft {
text-align: left !important;
}
<span id="bulletsLeft">
Some text!
</span>
I have a list with li elements and I want on mouseover, to hover the entire line separately.
In the example here, I managed to hover but just the <span>. As I have 2 <span>s in the same line, there are two different hover areas.
How can I hover the whole line on mouseover?
Wrap your spans in another span and give it a block display. Apply :hover to this wrapping span:
Example HTML:
<li>
<span class="hi">
<span> f1.txt</span>
<span class="pull-right">Size: 0.04 kb </span>
</span>
</li>
Example CSS:
span.hi {
display: block;
}
span.hi:hover {
...
}
Demo Fiddle: http://jsfiddle.net/abhitalks/fnbTg/4/
Try this:
li:hover>:not(ul) {
background: #E0F0FF;
}
This will color based on :hover on the li, not based on hover on the span. But on the other hand, you don't want to color the sublist, so use :not().
Demo: http://jsfiddle.net/QkaYJ/1/
i add icon(Bootstrap Glyphicons) in h1 but icon not in text baseline. how to fix This?!
Problem pic
Code:
<h1 ><a><i class="icon-play"></i>TEST TEXT</a></h1>
For Bootstrap version 3 use this.
<h1>Hi this is heading<span class="glyphicon glyphicon-star"></span> Star</h1>
See this jsfiddle.
your icon size will change according to size of its parent.
Im using Bootstrap v3.2 and I had the same problem.
<h3><span class="glyphicon glyphicon-user"></span> User</h3>
so I changed the display property of the glyphicon from inline-block to inline.
.glyphicon
{position: relative;
top: 1px;
display: inline;
...
}
This is due the An inline element has no line break before or after it, and it tolerates HTML elements next to it but an inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
I would try:
1) changing padding of i.icon-play
2) background-position of i.icon-play
3) vertical-align:center; line-height:12px; of i.icon-play
One of those will work, good luck ;-)