I am trying to display array of text in rectangle boxes like this.
but I got it like text displayed as entire row
below is the code snippet
<span *ngFor="let mfal of mfals" class="review-span mfal">
{{mfal}}
</span>
.mfal {
background-color: #7A7A7A;
color: white;
}
appreciate any help
Here is what you can do:
<span *ngFor="let mfal of mfals" class="review-span mfal">
{{mfal}}</span>
.mfal {
display: inline-block;
background-color: #7A7A7A;
color: white;
padding: 5px;
margin: 0 5px;
}
Make sure your element has a display of inline-block or inline, add corresponding padding and margin.
display attributes of elements might be set to block somewhere in your code.
.mfal {
display: block;
background-color: #7A7A7A;
color: white;
}
<span class="review-span mfal">WANAB</span>
<span class="review-span mfal">WANAB</span>
Try display: inline; or display: inline-block;.
.mfal {
display: inline;
background-color: #7A7A7A;
color: white;
}
<span class="review-span mfal">WANAB</span>
<span class="review-span mfal">WANAB</span>
Related
Today, I am comming with a problem from work. First of all, the code was created some time ago and I have to correct it now. Of course I've made the sandbox easier to avoid unnecessary styles.
<div>
<a id="perfect" href="https://css-tricks.com/">
<span class="perfect">
<p>Perfect</p>
</span>
<span class="maker">Solution</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
div {
display: block;
width: 150px;
height: 150px;
background: lightblue;
text-align: center;
float: left;
margin: 10px;
}
a {
display: block;
width: 150px;
height: 150px;
text-decoration: none;
color: black;
}
.problem {
display: block;
padding: 30px 10px 0;
}
.maker {
display: block;
padding: 20px 10px 0;
}
p {
padding: 0;
margin: 0;
}
p:hover {
color: red;
}
I have three tile there. First of all works what I expect, but I would like to receive the same result on the second and third tile without paragraph.
The clue is that red color appears, if I put a mouse on random place above right content. I mean all span called "problem" is on hover.
How to ensure a similar behaviour like in first tile on the others without using paragraph? Do you have some idea?
I've tried to do that using margin, but it was wrong.
Try to add this into your stylesheets:
div > a > span:hover {
color: red;
}
Here is a solution:
Your issue is that your applying padding: 30px 10px 0; to span. The link is applying itself to the entire span with its padding.
I removed padding on your span and instead applied it to the div. - You can now adjust the padding on the div instead of the span.
Additionally, I moved the #perfect id to the first div because it had a different background-color.
div {
display: block;
width: 150px;
height: 150px;
background: lightblue;
text-align: center;
float: left;
margin: 10px;
padding: 30px 10px 0;
}
a {
display: block;
width: 150px;
height: 150px;
text-decoration: none;
color: black;
}
.problem {
display: block;
}
.problem:hover {
color: red;
}
.maker {
display: block;
}
p {
padding: 0;
margin: 0;
}
p:hover {
color: red;
}
.perfect {
display: block;
}
#perfect {
background-color: pink;
}
<div id="perfect">
<a href="https://css-tricks.com/">
<span class="perfect">
<p>Perfect</p>
</span>
<span class="maker">Solution</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
Just change the display for the .problem from 'block' to 'inline-block', change the padding-top to 0 and give a margin-top of 30px
.problem {
display: inline-block;
padding: 0px 10px 0;
margin-top: 30px;
}
.problem:hover {
color: red;
}
I want to know how to draw a circle around only two letter in a logo using CSS.
Please check the attached picture
Here's the code I used, but it didn't work
.badge {
height: 60px;
width: 60px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #337EFB;
padding:-5px;
}
<span><a class="badge" href="/">fb</span><span>keeper</span></a>
Set the display of the .badge to inline-block, and use line-height to center the text vertically.
Note: to make the entire title clickable replace the outer span with an a tag, and convert the one on the inside to a span tag.
.title {
font-size: 2em;
text-decoration: none;
color: var(--title-color);
--title-color: #337EFB;
}
.badge {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
background: var(--title-color);
color: white;
}
<a class="title" href="#">
<span class="badge" href="/">fb</span>
<span>keeper</span>
</a>
You have not closed your anchor tag correctly. You need to close it before your second span for word keeper start and inside a first span, Please look into below code and try once:
<span><a class="badge" href="/">fb</a></span><span>keeper</span>
There was a problem in your html code. Here is what you should put :)
<span class="badge">fb</span><span>keeper</span>
I was unable to find any solution to my problem. I don't want any space between child elements so i have added float:left to child elements. But it is causing problem when elements breaks into 2 lines.
HTML :
<span class="section-title">
<span class="yellow">This</span>
<span class="red">is</span>
<span class="brown">test</span>
<span class="">content</span>
</span>
CSS :
.section-title {text-align:center;}
.section-title span {float: left; display:inline-block;}
To remove the unwanted space, don't float: left;, but set font-size: 0; on the parent element, re-setting it on the children to the font-size you want.
Also, you used a span for the container which by default has display: inline;. Here, you want an element that has display: block;. With display: inline; the text-centering cannot work.
So either set display: block; on the span or use a div instead of a span. div has display: block; by default. I'd recommend the latter, but I'm not sure whether you have control over the HTML, so I did not change it.
.section-title {
text-align: center;
font-size: 0;
display: block;
}
.section-title span {
font-size: 36px;
display: inline-block;
text-transform: uppercase;
}
.yellow {
color: yellow;
}
.red {
color: red;
}
.brown {
color: brown;
}
<span class="section-title">
<span class="yellow">This</span>
<span class="red">is</span>
<span class="brown">test</span>
<span>content</span>
</span>
Try following code :
.section-title {
text-align: center;
display: block;
}
.section-title span {
font-size: 36px;
display: inline-block;
text-transform: uppercase;
}
I want to create an icon that looks like a circle with a "plus" icon inside and right below it a descriptive p tag.
For I reason I cannot figure out doing this completely breaks the whole block. What am I doing wrong?
jsfiddle
Here's the HTML:
<div class="follow-single">
<div class="follow-wrapper">
<a class="follow" id="#follow_4" rel="nofollow" data-method="put" href="/jessie/follow">
<span class="glyphicon glyphicon-plus"></span>
<p class="title">Unfollow</p>
</a>
</div>
</div>
And the CSS:
follow-single {
max-width: 360px;
margin: 0 auto;
border-top: 1px solid #ddd;
margin-top: 20px;
padding-top: 20px;
}
.follow-single .follow-wrapper {
text-align: center;
}
.follow-single .follow-wrapper .follow {
color: #3c763d;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
padding: 10px 17px;
border-radius: 4px;
}
.follow-single .follow-wrapper a {
text-decoration: none;
}
.follow-single .follow-wrapper .title {
font-size: 12px;
display: block;
}
Set the display on the achor tag to be inline-block.
.follow {
display: inline-block;
}
Fiddle
Additionally, an unrelated to the original question, your definition of follow-single is missing a leading dot character: .follow-single
I want to use a code which is able to change image properties when hovering element which trigger when hovering the image. I can only change the triggering element properties on hover. I read that there is a problem that it can't be done if the element which is supposed to change is located before the hovered element - that's my case. In this case I want only to add red outline (I know I can change anything, it's example).
Here is Fiddle
#overimage
{
position: relative;
line-height: 0;
font-size: 0;
}
.Xevoz_Showdown
{
display: none;
}
.onlinegameimage:hover
{
outline: solid 1px red;
}
.Xevoz_Showdown_cont:hover .Xevoz_Showdown
{
display: inline;
position: absolute;
bottom: 82px;
left: 10px;
min-height: 25px;
width: 100px;
font: 14px/1.0 Times New Roman;
color: white;
background-color: rgba(0,0,0,0.8);
}
<span id="overimage">
<a href="http://www.superhry.cz/games/300/" target="_blank">
<span class="Xevoz_Showdown_cont">
<img class="onlinegameimage"src="http://www.catchamouse.ic.cz/Xevoz%20showdown.jpg"alt=Xevoz_showdown style="margin: 10px"><span class="Xevoz_Showdown">Xevoz<br />Showdown</span>
</span>
Assuming that you want to show a title element to an image and you want to highlight the image also if you hover the title element. You need to move your "title" element before the image so you can react either to the hover state of the parent element or the title element to highlight the image.
#overimage {
position: relative;
line-height: 0;
font-size: 0;
}
.Xevoz_Showdown {
display: none;
}
.Xevoz_Showdown_cont:hover .Xevoz_Showdown {
display: inline;
position: absolute;
left: 10px;
min-height: 25px;
width: 100px;
font: 14px/1.0 Times New Roman;
color: white;
background-color: rgba(0, 0, 0, 0.8);
}
.Xevoz_Showdown:hover + .onlinegameimage, .onlinegameimage:hover {
outline: solid 1px red;
}
<span id="overimage">
<a href="http://www.superhry.cz/games/300/" target="_blank">
<span class="Xevoz_Showdown_cont">
<span class="Xevoz_Showdown">Xevoz<br />Showdown</span>
<img class="onlinegameimage"src="http://placehold.it/50x50" />
</span>