The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Title and text aligned differently
RobD
post May 1 2020, 03:52 AM
Post #1





Group: Members
Posts: 3
Joined: 1-May 20
Member No.: 27,313



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


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 1 2020, 05:59 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,821
Joined: 9-August 06
Member No.: 6



Do you mean without the extra space between the heading the the text? It's OK the text begins on a new line?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobD
post May 1 2020, 10:01 AM
Post #3





Group: Members
Posts: 3
Joined: 1-May 20
Member No.: 27,313



QUOTE(pandy @ May 1 2020, 05:59 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 1 2020, 10:55 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,821
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobD
post May 6 2020, 02:40 AM
Post #5





Group: Members
Posts: 3
Joined: 1-May 20
Member No.: 27,313



Great, Thanks. I will try
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th June 2020 - 05:02 PM