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>
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>
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
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.
Can i change parent class of some dom object on hover event via CSS selectors?
For example I have such block:
<span class="wBlock" >
<span class="wText">Text</span>
<span class="wLink"/>
<\/span>
and if i move mouse to span "wLink" span "wBlock" must be changed, and if i move out than it must be the same as at the begining
.wLink{
padding-right:15px;
background:url(/img/addlink.png) center right no-repeat;
cursor:pointer;
}
.wText{
background-color: #1BE968;
}
It's something like this alt text http://img192.imageshack.us/img192/5718/capturehlk.jpg and if i move my cursor to plus text highlight must be changed to yellow
I belive you can't do that in CSS.
I would advise to restructure your HTML so you dont end up using JS hacks to apply styles.