Title and text aligned differently Options

[RobD]

Hi,

My name is Rob and I am new to html and have some text with titles where I would like the title to align left or right and the text justify. But when I try to do this it always adds a paragraph but I want the title and the text without a paragraph. Is this possible?

This is the code right now:

<strong><span style="color: #e13c30;">KeenSystems levert VoIP op basis van SIP-trunking.</span> </strong>
Dat doen we vanuit ons zelf ontwikkelde telefonieplatform op basis van openSIPS. Het Session Initiation Protocol (SIP) is een protocol om multimediacommunicatie (audio-, video- en andere datacommunicatie) mogelijk te maken en wordt onder meer gebruikt voor Voice over IP (VoIP). Alle intelligentie leveren we vanuit het KeenSystems platform dat gekoppeld is aan de andere diensten van KeenSystems. Allemaal in te zetten als losse bouwstenen of als geheel. Onze SIP trunks zijn uiteraard ook te gebruiken met bestaande centrales en toestellen. Zo zijn we als volwaardig Telecom Operator in staat via ons eigen netwerk een white-label oplossing te bieden waar uw klant, en ook u als onze Partner, blij van wordt!

But when I try to allign the title and text differently it adds a paragraph:

<strong><span style="color: #e13c30;"> <P ALIGN=LEFT>KeenSystems levert VoIP op basis van SIP-trunking.</span> </strong> </p> <P ALIGN=justify>
<text-align:justify> Dat doen we vanuit ons zelf ontwikkelde telefonieplatform op basis van openSIPS. Het Session Initiation Protocol (SIP) is een protocol om multimediacommunicatie (audio-, video- en andere datacommunicatie) mogelijk te maken en wordt onder meer gebruikt voor Voice over IP (VoIP). Alle intelligentie leveren we vanuit het KeenSystems platform dat gekoppeld is aan de andere diensten van KeenSystems. Allemaal in te zetten als losse bouwstenen of als geheel. Onze SIP trunks zijn uiteraard ook te gebruiken met bestaande centrales en toestellen. Zo zijn we als volwaardig Telecom Operator in staat via ons eigen netwerk een white-label oplossing te bieden waar uw klant, en ook u als onze Partner, blij van wordt! </p>

How can I make this without the extra paragraph between the title and text? I hope my question is clear, thanks in advance!

Br. Rob

[pandy]

Do you mean without the extra space between the heading the the text? It's OK the text begins on a new line?

[RobD]

Do you mean without the extra space between the heading the the text? It's OK the text begins on a new line?

Its ok to start with a new line but without the space indeed.

[pandy]

OK, then it's easy.

First mark the text up properly. Obviously you have a heading and a paragraph. Don't know what level heading is suitable, but let's say H2.

HTML

<h2>KeenSystems levert VoIP op basis van SIP-trunking.</h2>

<p>
Dat doen we vanuit ons zelf ontwikkelde telefonieplatform op basis van openSIPS. Het Session Initiation Protocol (SIP) is een protocol om multimediacommunicatie (audio-, video- en andere datacommunicatie) mogelijk te maken en wordt onder meer gebruikt voor Voice over IP (VoIP). Alle intelligentie leveren we vanuit het KeenSystems platform dat gekoppeld is aan de andere diensten van KeenSystems. Allemaal in te zetten als losse bouwstenen of als geheel. Onze SIP trunks zijn uiteraard ook te gebruiken met bestaande centrales en toestellen. Zo zijn we als volwaardig Telecom Operator in staat via ons eigen netwerk een white-label oplossing te bieden waar uw klant, en ook u als onze Partner, blij van wordt!</p>

Don't use elements because how they happen to look unstyled. Use them for what they are and then style them to look as you want.

So, the styling. Declare a font for BODY and it will be good for the whole page if you don't specify anything else for for example headings. I just chose something, you can change that to what you want. The font size will be the same for everything that browsers don't give a different size.

Then you want the heading to be bold. And the same size as the bread text. If you make its size 100% it will be the same size as you've declared for BODY.

You don't want margins, so we need to remove the margins browsers may add to both P and H2. I only removed the top margin from P. If you want a second paragraph I assume you want the bottom margin (if the browser adds it), but you can remove it or control its size if you want.

Then we make the P have justified text. The H2 will be left aligned by default, so we don't have to declare that.

CODE

body   { font: 90% Verdana, sans-serif }
h2     { font-weight: bold; font-size: 100%;
         margin: 0 }
p      { text-align: justify;
         margin-top: 0 }

Place the CSS in a style block in HEAD or use a linked style sheet. The style attribute is mostly a bother more than for a quick fix. It's much easier to keep the CSS in one place and you don't have to repeat the same thing over and over again. With the above in a style block in HEAD it will be good for every P and H2 on the page - and for BODY too of course. With a linked style sheet it can be used for a whole site or even several sites.

See here how to do that if you don't know.
https://htmlhelp.com/reference/css/style-html.html (The two top links in the menu there)

If you want some Ps and H2s to be different you need to give them, or these, a class so you can differentiate the styling.

[RobD]

Great, Thanks. I will try