I'm trying to align my text with the icon next to it but some reason it doesn't work. I put margin-bottom and margin-top but still not working so I would be really appreciated if I can get any help or suggestion.
<div class="notification"
[ngClass]="{'noty-error' : (caraouselItems[notificationIndex].notificationType==1),'noty-warn': (caraouselItems[notificationIndex].notificationType==2)}"
*ngIf="caraouselItems[notificationIndex].message">
<div class="firstPart">
<i-feather name="x-circle" *ngIf="caraouselItems[notificationIndex].notificationType==1" class="noty-error-icon"></i-feather>
<i-feather name="alert-triangle" *ngIf="caraouselItems[notificationIndex].notificationType==2" class="noty-warn-icon"></i-feather>
<span>
{{caraouselItems[notificationIndex].message}}
</span>
</div>
</div>
.notification {
padding: 0px 14px ;
font-weight: bold;
display: flex;
align-items: center;
height: 50px;
}
.noty-error {
background-color:#32111C;
border: 1px solid #D2232B;
}
.noty-error-icon {
color: #D2232B;
margin-right: 14px;
stroke-width: 1 !important;
width: 30px;
height: 30px;
}
Just put this style and adjust according to your position for alignment
whatever you need bottom it will work hopefully
<span style="position:relative;bottom:2px;">
{{caraouselItems[notificationIndex].message}}
</span>
Related
Can someone help me with the following progress element of Element UI library:
Element UI - Progress link
I'm trying to reach for this result:
put the value at the end of each bar
Currently, having this:
with the following code:
HTML:
<el-progress :text-inside="true" :percentage="item.value" color="#6A7EC7" :stroke-
width="12"></el-progress>
CSS:
.el-progress-bar__outer {
background-color: transparent;
}
I've tried to do put the text div as relative like the following:
>>> .el-progress-bar__innerText {
color: $color-tremor-black;
position: relative;
left: 30px;
}
But the text is being cut when the value is close to the end.
What I'm missing? need to do?
Thank you.
I've decided to remove this component and build my own progress bar by using div and CSS.
Like the following:
HTML
<div class="newProgress">
<div class="progressBar" :style="{width:`${item.value}%`}"></div>
<span class="newProgressValue">{{item.value}}%</span>
</div>
CSS
.newProgress {
display: flex;
flex-direction: row;
width: 400px;
}
.progressBar {
width: 80%;
margin: 3px 0px 0px 10px;
background: #6A7EC7;
border: 1px solid #6A7EC7;
height: 12px;
border-radius: 50px;
}
.newProgressValue {
padding-left: 5px;
font-size: $font-size-small-plus;
}
I've couldn't find some information about Element UI library and its styles.
[Picture of My Website1
Hey so if you see that image there then I just wanted to know how to put the button in the center, like how the heading is. Like directly under it, text-align does not work for me.
Please let me know if anything in my code is preventing the button from going in the center.
(I am new to HTML)
My code :
<html style = "background-color: lightblue;">
<b
><h1 id="chimp">
Welcome to Monkey Idle!
</h1></b
>
<a class="button" href="" style="text-decoration: none; color: black" id = "button">
Click Here to Play!
</a>
<a id="button2" class="button" href="" style="text-decoration: none; color: black;">
Played before? Click here!
</a>
<style>
#chimp {
text-align: center;
font-size: 50px;
font-family: cursive;
}
#moneycount {
border-style: solid;
}
#button2 {
text-align: center;
background color;
position:absolute;
left: 50%;
font-family: cursive;
background-color: white;
padding: 20px;
position: center;
align: center;
}
#keyframes buttonbounce {
0%{margin-left: 0px;}
100%{margin-left: 10px;}
}
#button2:hover {
animation: buttonbounce 0.1s infinite;
}
#button {
text-align: center;
background color;
position:relative;
font-family: cursive;
background-color: white;
padding: 20px;
}
</style>
</html>
The reason that text-align doesn't work for buttons is that buttons are not considered to be text. When you use text-align, you are centering the text within the parent element, not necessarily the center of the page. Text-align on a button for example will just center the text at the center of the button. If you want to center the button, you can wrap the button in a div, and utilize Flexbox. If you are getting started on web development, I highly recommend the aforementioned Flexbox as well as CSS Grid for page layouts.
#button-wrapper {
display: flex;
justify-content: center;
}
<div id="button-wrapper">
<button>My button!</button>
</div>
I have looked at some other posts and all I could find was answers using javascript. Is there some way that I hover over an element on top of another element but the element at the bottom won't change its style? By the way, I only want to use vanilla HTML and CSS, no javascript. In this example, the goal is to hover over blabla or blablabla without adding a border to the navigation bar.
HTML
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
<div class="navBarChild">
Notepad
Help
</div>
</div>
CSS
.navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
.navBar:hover{
border: 2px solid black;
}
h3{
z-index: 2;
}
body{
background:url("...") left / cover no-repeat;
}
.navBarChild{
display: flex;
flex-direction: row;
position: relative;left: 290px;top: 17px;
}
#linkBla{
font-weight: bold;
text-decoration: none;
font-size: 26px;
font-family: monospace;
color: black;
}
#linkBla:hover{
color: orangered;
}
#linkBlaBla{
position: relative;left: 50px;
font-weight: bold;
text-decoration: none;
font-size: 26px;
font-family: monospace;
color: black;
}
#linkBlaBla:hover{
color: orangered;
}
Add a new 'navBarContainer'
Try bringing the 'navBarChild' out of the 'navBar' like this:
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<div class="navBarChild">
Notepad
Help
</div>
Make a whole new 'navBarContainer' for the both of them
<div class="navBarContainer">
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<div class="navBarChild">
Notepad
Help
</div>
</div>
Set the '.navBarContainer' in your css to 'position: relative;'
position: relative;
Set the 'navBarChild' to
position: absolute;
display: flex; //to keep the a-links together
and then you can position it to your desire
top: 0; //important
left: 75%;
height: 100%;
At this point there should be no need for the z-index
Lastly
Add a little padding to the #linkBla and #linkBlaBla and set the display to 'flexbox'
#linkBla, #linkBlaBla {
padding: 40%;
display: flexbox;
}
Checkout the whole thing in this pen https://codepen.io/emekaorji/pen/mdOMMRr
I don't believe this is possible without javascript, but you can put the script inside of the HTML like so:
<html>
<body>
...
<script>
function removeOutline() {
document.getElementsByClassName("navBar")[0].style.border = "2px solid transparent";
}
function addOutline() {
document.getElementsByClassName("navBar")[0].style.border = "2px solid black";
}
</script>
</body>
</html>
and use it like:
<div class="navBarChild" onmouseover="removeOutline()" onmouseout="addOutline()">
CSS does not allow you to change elements above the current element. In other words, you can't change the parent element based on the child element (the reverse works by using child selectors).
between these two p elements.
I checked the box model and there is no margin set.
Here it the fiddle and code -
https://jsfiddle.net/f3m2apgy/
<body>
<style>
#container{
display: inline-block;
width: 500px;
border: solid 1px;
text-align: center;
}
#si_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#su_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#hold_button{
display: inline-block;
border: solid 1px;
text-align: center;
margin: 0 auto;
padding: 0px;
}
</style>
<div id="container">
<divi id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p>
<p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
</body>
You have newline after the first </p> and indenting spaces before the second <p>.
If you put <p> elements in a line, the space will disappear.
<div id="container">
<div id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
And, <divi> should be typo of <div>.
If you put the <p> elements on a single line in your code, the gap is eliminated.
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
DEMO: https://jsfiddle.net/f3m2apgy/6/
It's because all inline-block elements have a space to the left if seperated by spaces in the HTML code. To fix it, you should change them to <ul> or <div> elements, or add a negative margin to one of them.
Adding margin-left: -5px; to #su_but would also fix this, although it is a little hacky.
The usual way to fix the whitespace problems coming up with display: inline-block; is to set the parent element's font-size to zero. Of course the consequence is that you will have to re-set the necessary font-size on the child elements - which you already do in your example, so
#hold_button { font-size: 0; }
fixes your problem already.
https://jsfiddle.net/f3m2apgy/7/
How can I align text so that some of it aligns to the left and some of it aligns to the right within the same line?
<p>This text should be left-aligned. This text should be right aligned.</p>
I can align all of the text to the left (or to the right), either directly inline, or by using a stylesheet -
<p style='text-align: left'>This text should be left-aligned.
This text should be right aligned.</p>
How can I align the corresponding text to the left and to the right, while keeping it on the same line?
<p style="text-align:left;">
This text is left aligned
<span style="float:right;">
This text is right aligned
</span>
</p>
https://jsfiddle.net/gionaf/5z3ec48r/
HTML:
<span class="right">Right aligned</span><span class="left">Left aligned</span>
css:
.right{
float:right;
}
.left{
float:left;
}
Demo:
http://jsfiddle.net/W3Pxv/1
If you don't want to use floating elements and want to make sure that both blocks do not overlap, try:
<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%; display: inline-block;">RIGHT</p>
An answer using css flex layout and justify-content
p {
display: flex;
justify-content: space-between;
}
<p>
<span>This text is left aligned</span>
<span>This text is right aligned</span>
</p>
HTML FILE:
<div class='left'> Left Aligned </div>
<div class='right'> Right Aligned </div>
CSS FILE:
.left
{
float: left;
}
.right
{
float: right;
}
and you are done ....
While several of the solutions here will work, none handle overlap well and end up moving one item to below the other. If you are trying to layout data that will be dynamically bound you won't know until runtime that it looks bad.
What I like to do is simply create a single row table and apply the right float on the second cell. No need to apply a left-align on the first, that happens by default. This handles overlap perfectly by word-wrapping.
HTML
<table style="width: 100%;">
<tr><td>Left aligned stuff</td>
<td class="alignRight">Right aligned stuff</td></tr>
</table>
CSS
.alignRight {
float: right;
}
https://jsfiddle.net/esoyke/7wddxks5/
<h1> left <span> right </span></h1>
css:
h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}
Add span on each or group of words you want to align left or right.
then add id or class on the span such as:
<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>
CSS-
#makeLeft{
float: left;
}
#makeRight{
float: right;
}
One example, only to show the richness of the solution from Benjamin Udink ten Cate in the answer above: "An answer using css flex layout and justify-content"
With this CSS:
p {
display: flex;
justify-content: space-between;
}
#connettore{
overflow: hidden;
margin: 0px 20px 10px 180px;
width: 250px;
align:left;
}
ol#connettore {
counter-reset: pin 6; /* Initiate a counter */
list-style: none; /* Remove default numbering */
/*list-style: decimal; /* Keep using default numbering for IE6/7 */
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol {
margin: 0 0 0 2em; /* Add some left margin for inner lists 20px*/
}
/*=========== Rectangle-shaped numbers ===========*/
.rectangle-list a{
position: relative;
display: block;
padding: .1em .2em .1em .8em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
line-height: .1px;
}
.rectangle-list a:hover{
background: #eee;
}
.rectangle-list a:before{
content: counter(pin);
counter-increment: pin -1;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle-list a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle-list a:hover:after{
left: -.5em;
border-left-color: #fa8072;
}
<ol id="connettore" class="rectangle-list" >
<li><p><span>BLU</span> <span>(SWDIO)</span></p> </li>
<li><p><span> MARRONE</span> <span>(SWDCLK)</span></p> </li>
<li><p><span>GIALLO</span> <span>(RESET)</span></p> </li>
<li><p><span>NERO</span> <span>(GND)</span></p> </li>
<li><p><span>BIANCO</span> <span>(VCC)</span></p> </li>
</ol>
This is the way I do pinout. :-)
If you're using Bootstrap try this:
<div class="row">
<div class="col" style="text-align:left">left align</div>
<div class="col" style="text-align:right">right align</div>
</div>
If you just want to change alignment of text just make a classes
.left {
text-align: left;
}
and span that class through the text
<span class='left'>aligned left</span>