I want to change the position of two elements using CSS.
The structure of my website is as follows and it show up del ins.
<span class="main-price">
<del aria-hidden="true">
<span class="price">
</del>
<ins>
<span class="price">
</ins>
</span>
No CSS is applied to these elements.
So I applied CSS like below.
.main-price{
text-align: left;
display: inline-flex;
flex-direction: column-reverse;
}
However, this will place the two elements vertically as shown below.
ins
del
So I re-applied the below css, still no change.
.ins{
display:inline;
}
I've tried many times other than that, but no matter what I do, it doesn't show up as ins del.
Can someone give me some advice on what to do?
Instead of flex-direction: column-reverse, use flex-direction: row-reverse.
Related
I'm working in a project where we have implemented ng-bootstrap and I'm now working on the toast-component and to it more suitible for our company.
What I'm trying to achive right now is to make a button inside of the toast to be on the far right while the text will be on the left. Right now the button comes directly after the text, which leaves a lot of space to the right of the button.
In the documentation (https://ng-bootstrap.github.io/#/components/toast/overview) they say:
We provide a dedicated ngb-toasts CSS class you could use, or write your own styles in case some specificities would be needed.
However per my understanding is that it only styles the toast it self and not the things inside of it, which is what I want to do.
I'm trying to achive this by adding in flexbox
SCSS
.toast {
display: flex;
flex-direction: row;
justify-content: space-between;
.text,
button {
align-self: center;
}
}
HTML
<ngb-toast *ngFor="let toast of toastService.toasts" [class]="toast.classname" class="toast">
<ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text" class="text">
<ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
</ng-template>
<ng-template #text class="text">
<span>
{{ toast.textOrTpl }}
</span>
</ng-template>
<button class="btn ml-2" [class]="toast.classname" (click)="toastService.remove(toast)">
{{toast.button}}
</button>
</ngb-toast>
When I build the application and runs it, I can see in the browsers devtool that ng-bootstrap has added a new div with class="toast-body".
First question I have is why does it get added and for what reason?
This new div then contains my text and my button, which means that the they aren't affected by my flexbox that I added in the (now parentclass to toast-body).
I tried to address this issue in a simple way by adding in the newly created div in my style.css as well.
SCSS
.toast {
& >.toast-body {
display: flex;
flex-direction: row;
justify-content: space-between;
.text,
button {
align-self: center;
}
}
}
Sadly this approach doesn't work, the styles aren't hitting <div class="toast-body">.
What do I need to change / do in order to get the result I want?
How can I make sure that my styles trigger <div class="toast-body"> and the content inside of the div?
I want to add an iframe to the right of the vertical-alignment
http://s13.postimg.org/s5f54mux3/Screen_Shot_2015_07_30_at_4_45_06_PM.png
The code to it is:
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
</span>
</span>
</div>
How do you add an iframe to float on the right of the vertical-alignment, like so...
http://s30.postimg.org/5qfa3x8o1/Screen_Shot_2015_07_30_at_4_45_06_PM.png
I think the best solution would be to add a float:right and position it as the last element of the span that contains the user information.
I think I placed it correctly below but the code you posted is missing the top half, making it kind of difficult to guess what is what..
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
<iframe style:'float:right;'></iframe>
</span>
</span>
</div>
To put an element on the right, you can either use float: right or absolute positioning. Personally I would use absolute positioning. Here is a solution:
#theIframe {
position: absolute;
top: 0;
right: 0;
}
Also make sure the containing element is position: relative (or any other position except the default "static".)
I'm reluctant to butt in where a solution seems to have been reached but I'm wondering why one wouldn't use Flexbox. I understand that it's not supported in IE9- but the data at Can I Use suggests that this is a negligible concern and that cross-browser support is wide. Can I Use Flexbox (Note: review both the "Current Aligned" and "Useage Relative" data.)
With that in mind, would you consider something along the lines of the following.
//HTML
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<div id="Flex-Container">
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
<div id="Responsive-Iframe-Container">...</div>
</div>
</span>
</span>
</div>
//CSS
#Flex-Container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
#Responsive-Iframe-Container {
width: 45%;
}
The HTML and CSS for the markup inside #Responsive-Iframe-Container can be found in the Pen Responsive Iframe - Flexbox.
Of course, instead of using #Responsive-Iframe-Container, one could simply substitute <iframe src="#"></iframe> styled as desired.
I am a beginner autodidact in HTML and CSS, so if there is something wrong with the suggested code, please forgive me and please let me know what it is.
I have a bunch of columns of info that look like this:
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
etc . .
given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?
Simply place your span elements in a container:
<div>
<span>...</span>
<span>...</span>
...
</div>
Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:
div {
white-space: nowrap;
}
div span {
display: inline-block;
width: 280px;
}
If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
...
</div>
I am not sure how to get the following behaviour using a combination of HTML and CSS:
foo = this
foobar = bit
goso = needs
etcetc = aligning
Now I could just insert spaces where required (like I did above), but I'm pretty sure there must be a way to do this "automatically".
I know I could use tables to do this, but would prefer not to. Is there any other way of doing this?
My question boils down to this: How do I automatically align text vertically, in a similar way to tabs in office suites, using HTML/CSS.
Here is an in context example:
<p><span class="a">foo</span> <span class="b">=</span> <span class="c">"abcDeveloper"</span></p>
<p><span class="a">bar</span> <span class="b">=</span> <span class="c">"123"</span></p>
<p><span class="a">foobar</span> <span class="b">=</span> <span class="c">"dfg"</span></p>
<p><span class="a">foobarstar</span> <span class="b">=</span> <span class="c">"456"</span></p>
In this example, I would like text in class b to be aligned vertically.
Thank you in advance!
One method would be to apply display: inline-block; to your span.as, and then give them a set width: http://jsfiddle.net/nzrHn/1/
.a { display: inline-block; width: 100px; }
Add css attribute display: inline-block and min-width: XXXpx
I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.
Here's how it looks in IE7 (wrong):
Link (cannot post images as a new user)
In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user
Don't mind the element order as it's random. Elements are dynamically generated by jQuery.
HTML code:
<div class="ui-sortable" id="area">
<span class="object">: </span>
<span class="object">1998- </span>
<span class="object">ISSN 1392-4087</span>
<span class="object">, </span>
<span class="object">. </span>
<span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">Vilnius</span>
<span class="object">1998- </span>
<span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>
CSS code (irrelevant info like fonts & colors removed):
#area {
min-height: 160px;
width: 760px;
}
.object {
display: block;
float: left;
text-align: center;
width: auto;
}
Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?
I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.
See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg
You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.
Why not leave it inline? If you need a box, add padding:
span.object { padding: 6px; }
Edit: if you don't want them to break across lines add:
span.object { white-space: nowrap; }
Far easier than getting floats to do this particular task.