Having trouble vertical top-aligning two simple text. For some reason there is a small gap ... tried padding, line-height etc, nothing. Any input helpful.
<span style="padding:0px;font-size: 48px;font-style: italic;font-weight: bold;"><span style="padding:0px;font-size: 30px;font-style: italic;vertical-align:text-top;">VITA</span>
VITA
https://jsfiddle.net/p64g800g/
Many thanks
You could change the line height on the second. I would wrap them in a div rather than another span, but didn't do that here since it may not be an option to you.
.span1 {
padding: 0px;
font-size: 48px;
font-style: italic;
font-weight: bold;
}
.span2 {
font-size: 30px;
font-style: italic;
vertical-align: text-top;
}
.span3 {
font-size: 40px;
line-height: 39px;
font-style: italic;
vertical-align: text-top;
}
<span class="span1">
<span class="span2">VITA</span>
<span class="span3">VITA</span>
</span>
Use font-size: 0px; for the parent so that the space between the span has a width of 0px.
Use this:
<div style="font-size: 0px;">
<span style="font-size: 30px;font-style: italic;vertical-align:text-top;">VITA</span>
<span style="font-size: 40px;font-style: italic;vertical-align:text-top;">VITA</span>
</div>
Alternative: Float the <span>
span {
float: left;
}
<span style="font-size: 30px;font-style: italic;">VITA</span>
<span style="font-size: 40px;font-style: italic;">VITA</span>
A you can see, your <span> tags can't accept margin-top, margin-bottom, padding-top and padding-bottom. This is where you should start thinking about display property.
The display you need here is inline-block. With this property you can start moving your <span> elements vertically.
<span style="padding: 0px;font-size: 48px;font-style: italic;font-weight: bold;">
<span style="font-size: 30px;font-style: italic;vertical-align: text-top;display: inline-block">VITA</span>
<span style="font-size: 40px;font-style: italic;vertical-align: text-top;display: inline-block;margin-top: -4px">VITA</span>
</span>
Related
Why the button's text size is bigger than div->span's text size when both is set to 1em? How can I make them rendered to the same size?
Now firefox shows me the div's text as 17px high and 20px for the button's text.
.selectDateRangeBtn {
font-size: 1em;
text-align: center;
display: inline;
}
#searchRangeControl {
font-size: 1em;
display: inline;
}
<div id="searchRangeControl" >
<i class="fa fa-calendar"></i> <span>Some text</span> <i class="fa fa-caret-down"></i>
</div>
<button class="selectDateRangeBtn">2019-01-01</button>
The font-size is the same but the button is having a default font-family set by the user agent which is different from your div.
Use the same font-family (reset the font property) and you will have the same text size
.selectDateRangeBtn {
font:initial; /* reset the font */
font-size: 2em;
text-align: center;
display: inline;
}
#searchRangeControl {
font-size: 2em;
display: inline;
}
<div id="searchRangeControl" >
<i class="fa fa-calendar"></i> <span>2019-01-01</span> <i class="fa fa-caret-down"></i>
</div>
<button class="selectDateRangeBtn">2019-01-01</button>
I would like to do a space between 2 words in css for example:
1 RUNNING DAYS ADMIN#SUPER.BIZ
In HTML there is   but it's not correct to use   I think?
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc"><i class="far fa-calendar"></i> 1 RUNNING DAYS <i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ</div>
</div>
How to do that in CSS ?
.sous-titre-bandeau-blanc{
font-family: 'Open Sans', sans-serif;
font-size: 13.3333px;
color: #474747;
padding-top: 14px;
padding-left: 28px;
padding-bottom: 15px;
}
Thank you
You can wrap your text in a p tag, and you can add a margin to that after making it inline-block.
Alternatively, you can make the container a flexbox, and use justify-content: space-between; but you'll need to group each icon with its respective text inside another div or span.
For example:
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<span>
<i class="far fa-calendar" />
<p>1 RUNNING DAYS</p>
</span>
<span>
<i class="far fa-envelope" />
<p>ADMIN#SUPERBTC.BIZ</p>
</span>
</div>
</div>
<style>
.sous-titre-bandeau-blanc {
display: flex;
justify-content: space-between;
width: 450px;
}
</style>
I would do something like this, if I'm understanding you correctly
<style>
.space-between {
display: inline-block;
padding-left: 3em;
}
.space-between:first-child {
padding-left: 0;
}
</style>
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<div class="space-between"><i class="far fa-calendar"></i> 1 RUNNING DAYS</div>
<div class="space-between"><i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ<div>
</div>
</div>
Since you already have a .fa icon in the right part of your div just add it some left margin:
.sous-titre-bandeau-blanc .fa.fa-envelope { margin-left: 30px; }
Also, change your far for fa class to correctly display font-awesome icons
Given an inline (or inline-block) element with text of variable length, and another element to the right of the first one that acts as a kind of badge, is there a way to prevent a line break between the last word of the first element and the second element? Both elements occupying the same line is fine; a line break occurring in the text of the first element is also fine; but a line break between the two elements is undesirable. Here is an illustration explaining what I mean.
Is there a way to do this? I tried to have the two elements as spans and put a non-breaking space between them, but that didn't work.
UPDATE: Here's a quick and dirty Codepen example: http://codepen.io/anon/pen/LkzBQJ
html:
<h1>
<span class="title-text">
This is some text
</span><span class="badge">yo!</span>
</h1>
<h1>
<span class="title-text">
This is some broken text
</span><span class="badge">yo!</span>
</h1>
css:
h1 {
width: 350px;
}
.badge {
color: #f6511d;
display: inline-block;
border: 1px solid #f6511d;
border-radius: 3px;
font-size: 0.8em;
padding: 0.1em 0.2em;
line-height: 0.97em;
margin-left: 0.4em;
vertical-align: 1px;
}
UPDATE2: In my particular case, both the text in the first element, and the badge have to be rendered dynamically, using JavaScript. So Ricardo’s solution below (wrap the last word of the text and the badge in a span with white-space: nowrap), although working, will not be very easy to implement.
Check this! This line <h1>This is some text</h1><span class="badge">yo!</span> must be in one line to work.
https://codepen.io/lemonjelly/pen/rNNvLGE
SOLUTION:
The solution I could come up with is creating some sort of fix, wrapping text with the badge in a span and using the css property white-space: nowrap;.
JSFiddle
CODE SNIPPET:
.row {
display: flex;
counter-reset: paragraph;
}
.col {
width: 50%;
padding: 1em;
}
.col--left {
background-color: #011627;
padding-right: 0;
}
.col--right {
background-color: #F71735;
border-left: 2px dotted #ddd;
}
.col p {
color: #fff;
}
.col p::before {
counter-increment: paragraph;
content: counter(paragraph)". ";
}
.badge-fix {
display: inline-block;
white-space: nowrap;
}
.badge {
display: inline-block;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.badge--royalblue {
background-color: royalblue;
}
.badge--tomato {
background-color: tomato;
}
.badge--crimson {
background-color: crimson;
}
<div class="row">
<div class="col col--left">
<p>
This is <span class="badge-fix">some text
<span class="badge badge--royalblue">badge</span></span>
</p>
<p>
This is some <span class="badge-fix">reasonably long
<span class="badge badge--tomato">badge</span></span>
</p>
<p>
This is some <span class="badge-fix">longish text
<span class="badge badge--crimson">badge</span></span>
</p>
</div>
<div class="col col--right">
</div>
</div>
This problem is called a widow in typesetting. There are 3 ways to fix this.
Use the widows css property
Only break the last two words together.
<h1 style="widows: 2;">
<span>This is some broken text</span>
<span class="badge">yo!</span>
</h1>
Caveat: Not supported by Firefox (https://caniuse.com/?search=widows) and seems to only work properly with page breaks and column breaks
Use a character
Add a "physical" non-breaking space character, and only that character, between the last word and the badge.
<h1 style="widows: 2;">
This is some broken text <span class="badge">yo!</span>
</h1>
If you have to do this with multi-line code, you can use HTML comments to avoid breaking spaces.
<h1 style="widows: 2;">
This is some broken text<!--
--> <span class="badge">yo!</span>
</h1>
Caveat: It's ugly
Wrap the last word and the badge in a white-space: nowrap span.
<h1 style="widows: 2;">
This is some broken <span style="white-space: nowrap;">text <span class="badge">yo!</span></span>
</h1>
Caveat: Not always possible if you are dealing with dynamically generated code
You can add padding to the text and a negative margin:
<h1>
<span class="title-text" style="padding-right: 15px;">
This is some text
</span><span class="badge" style="margin-left: -15px;">yo!</span>
</h1>
<h1>
<span class="title-text" style="padding-right: 15px;">
This is some broken text
</span><span class="badge" style="margin-left: -15px;">yo!</span>
</h1>
This works for even dynamically generated content, unlike having to make a tag around the last word of the text and the image.
(Based on an answer I saw here: https://stackoverflow.com/a/25857961/5899236)
I have a webpage with two nested divs.
I need the inside div to show its border, however it is not. I have tryed every suggestion I have come across, but no avail.
while trying different solutions, I have noticed that the parent div does show its border without much hassle. What am I doing wrong?
css
.contentItemsWrapper
{
margin:auto;
width: 900px ;
margin-left: auto ;
margin-right: auto ;
text-align:center;
padding-top:20px;
padding-bottom:20px;
border:solid red;
border-width:5px 0;
/*this div's border is showing up fine.*/
}
.contentEventItem {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
position: relative;
border:solid red;
border-width:5px 0;
/* this last one is not working*/
}
HTLM:
<div class="contentItemsWrapper">
<div class="contentEventItem style=" border:solid="" red;="" border-width:5px="" 0;="" "="" id="evento1">
<div class="DataIncontro" id="dataIncontro1">
<span class="month">Decembre</span>
<span class="number">26</span>
<span class="time">15:00</span>
<span class="day">Gio</span>
</div>
<div class="logoSquadra"><span class="helper"></span><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>
<div class="nameEventLocation" id="nameEventLocation1">
<strong class="eventname">New Basket Brindisi - Cremonese</strong>
<span class="location">Nome Stadio</span>
</div>
<div class="logoSquadra"><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>
<div class="noteEvento">Aquistabili online fino al xx dicemnre, ore 20.00</div>
<div class="buttonDiv">
<p>
<a class="multi-line-button green" href="#" style="width:14em">
<span class="title">Compra Ora!</span>
<span class="subtitle">30-days free!</span>
</a>
</p>
</div>
</div>
</div>
What am I doing wrong? Can somebody please help me?
Thank you very much in advance for your time.
Im confused, you want this?
CSS:
.contentEventItem {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
position: relative;
border: 1px solid #000;
/* this last one is now working*/
}
All I have done is add border: 1px solid #000; and deleted this odd HTML:
border:solid="" red;="" border-width:5px="" 0;="" "=""
DEMO HERE
border-width:5px 0;
There is no shorthand for more than one border position. Try this instead.
border-bottom: 5px solid red;
border-top: 5px solid red;
border-left:none;
border-right:none;
I have few spans on my website , and i'm trying to make them go on the place I want them to , but it isn't going well as of now .
My HTML code:
<span class="forumname">מה שבראש</span><br />
<span class="forumname">מה שבלב</span><br />
<span class="forumname">תמונות הגולשים</span><br />
<span class="forumname">סקרים</span><br />
<span class="forumname">אקטואליה</span><br />
<span class="forumname">יהדות ותורה</span><br />
<span class="forumname">אתאיזם</span><br />
<span class="forumname">צבא וביטחון</span><br />
forumname Class in CSS :
.forumname {
color: black;
text-decoration: none;
font-family: Arial;
font-size: 14px;
position: relative;
top: 77px;
left: 720px;
font-weight: bold;
margin-top: 80px; }
And this is the result :
How can I align all of the spans so they can all start from the same position on the right ? Please Help me , i've tried everything , and i'm going crazy !
I tryed adding direction: rtl; to the span class, float: right and left; but with no success .
Thank you in advance ,
Iliya Vaitzman .
Just set text text-align: right on the parent element - DEMO
That really needs to be a list, spans is just the absolute wrong way to do it...
http://jsfiddle.net/calder12/xUSdv/1/
<ul>
<li>מה שבראש</li>
<li>מה שבלב</li>
<li>תמונות הגולשים</li>
<li>סקרים</li>
<li>אקטואליה</li>
<li>יהדות ותורה</li>
<li>אתאיזם</li>
<li>צבא וביטחון</li>
</ul>
li a{
color: black;
font-family: Arial;
font-size: 14px;
position: relative;
font-weight: bold;
margin-top: 80px;}
li{ list-style-type:disc;
margin-right:100px;}
ul{
text-align:right;}