I’m using a <marquee> tag on top of my site’s homepage and want to include some small headlines. My problem is I can’t make space between the headlines, they come out too close together.
I’ve already tried including a big space like this:
<marquee>Headline1 Headline2</marquee>
And I’ve tried including a line break like this:
<marquee>Headline1
Headline2
</marquee>
So I am expecting to have a big space between the two headlines, but those two attempts have resulted in only one space between them.
I know you didn't use tags inside, but a better practice would be to enclose each of those headlines into tags, like span, div or p.
Like this:
<marquee>
<span>Headline1</span>
<span>Headline2</span>
</marquee>
Then, you could set the CSS using flexbox to create the space between them, like this:
marquee {
display: flex;
justify-content: space-between;
}
Hope it helps.
Detail: Marquee feature is obsolete. Although it may still work in
some browsers, its use is discouraged since it could be removed at any
time. Try to avoid using it.
Ok I tried the accepted answer above using the CSS flex but had no luck It still ignored the space on google chrome .
I got the space between the elements using a margin-right CSS attribute in the span tag..
<marquee style="background-color: #222031; ">
<span style="color:#70db70;margin-right:200px"> BTC : 44.50 USDT </span>
<span style="color:#f3865c;margin-right:200px"> ETH : 12.40 USD </span>
</marquee>
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
I need to add space between "who" and "we are". If I add space inside it's delete in DOM.
<h2>
<span>who</span>
<br>we are
</h2>
I want to add this space, becouse in seo audits i have:
whowe are
I want:
who we are
Well, for SEO and maybe accessibility (as well as using some browser related features like Mozilla Firefox reading mode, RSS Feeds and such sings), you will improve the structure of your markup by using a close to english language, using a single sentence and then use css styles to put the content in two lines.
That's what CSS is for, set the apparence of your content. In your case you use HTML which is intended to structure your content. Changing HTML purpose is the cause of your issue.
<h2>
<span>who</span> we are
</h2>
with a style that will lead to a one liner span should do the job :
h2 span {
display: block;
}
Or anyone of the others solutions to this simple CSS behavior.
Use
<h2>
<span>who</span>
<br/>we are
</h2>
Stackoverflow, please help!
I am developing a website using Bootstrap (3.1.1) and AngularJS for my friend's photography business.
The problem which I am encountering arises when trying to add a tab-space between words in the navigation bar, for example:
JOHN DOE
The only way in which I have been able to get this to work is by using <pre> tags, but this results in a completely different styling to that which is desired.
I have tried with and without using the AngularJS $Sanitize module, which had no affect.
I think I am missing something fundamental but I am obviously unsure as to what that is.
Thanks in advance,
JohnDoe
Using a span would provide much cleaner code.
JOHN<span class="tab-space">DOE</span>
Then the css:
span.tab-space {padding-left:5em;}
JSFiddle Example
Use CSS word spacing:
a.navbar-brand{
word-spacing:5em;
}
Or if you only want tab spaces in certain points, use:
<span class="tab-space"> </span>
And a similar CSS:
span.tab-space {
word-spacing:5em;
}
You could also do:
.navbar-brand {
{
white-space:pre;
}
To make the browser not collapse whitespace.
When styles to websites, its best practice to separate HTML markup from the CSS stylings of the page so that the content and stylings act independently and are more easily interchangable. This being said, its not clean to use HTML entities such as to affect style because it breaks this rule.
If you want some whitespace, wrap a <span> tag around the text and give it some padding.
HTML:
JOHN <span class="space-left">DOE</span>
CSS:
.space-left{
padding-left:10px;
}
I have the following 2 HTML statements. I want the "p" tag to NOT wrap to the next line. But I do want it to wrap in subsequent lines. (so I can't use the nowrap style). I want to create two CSS classes to treat each class differently.
<b class= "mscFlapSumBold" id='flapSum0'>This is the Flap Summary</b>
<p class= "mscFlapText" id='flap0'>This is the Flap text </p>
EDIT:
OK. I'm using James suggestion and it's working except that I can't seem to change the line spacing between my lines. When I use margin or line-height, they get ignored. So, James' suggested code is working mostly....
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
Furthur edit: My issue surrounds the fact that I am using jQuery Mobile. So, depending on the viewport, your solution works only sometimes (with certain viewports). Driving me CRAZY. If you have any ideas, I would sure appreciate them.
Simply wrap both in the same p element and place .mscFlapText within a span instead:
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
JSFiddle demo.
It's worth noting that the specification defines p as Grouping Content and b is Text-level Semantics; they aren't designed to go inline with each other.
You can use:
p.mscFlapText {
display: inline;
}
But actually, you should use <span> instead, better not mess up with default behaviour of HTML element.
Besides that, a good habit and small tip is to use <strong> rather than <b> since it's can improve your SEO ranking.
What is a good way to put more than one space in HTML?
To show one space we write . For five spaces, we have to write five times, and so on.
Is there a better way? Is there a special tag to use?
You can use the
<pre>a text with multiple spaces</pre>
tag.
As far as I know, if you are not using CSS then is the only way. These days using CSS and adding a spacer <span> would be more advisable.
You could use something like <span style="margin-left: 20px;"></span> to create some sort of 20px space between two words. Other than that, no.
It is often best to handle this with CSS instead of HTML. CSS gives you more control over the whitespace than the <pre> tag does. Also, browsers apply default styles to <pre> that you might not want.
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
body {
max-width: 12em;
}
<div class="pre">Text that preserves whitespace and does not wrap</div>
<div class="pre-wrap">Text that preserves whitespace and wraps as needed</div>
<pre>Text inside a <pre> tag also preserves whitespace</pre>
To actually insert spaces you are stuck with , the other common thing for spacing things out is to use 1x1 pixel gif and set the images with in the IMG tag.
The simplest way I have used is to add <span style="color:white;">(anything here)</span>
The bit in the span can be as long or as short as you like- it's not seen. The color of course is the color of the page/section where you place it. I prefer XXXXXXX as X is standard width (unlike M and I) and it's easy to see how many Xs you will need for a given space.