How do i write three headings in the same line | Sololearn: Learn to code for FREE!
¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita
0

How do i write three headings in the same line

what should i write to make all the headings display in the same line in the webpage.. i need answer for html ..plz not in css I'm a beginner..

28th Dec 2016, 2:16 PM
Paramesh Parimi (Max)
Paramesh Parimi (Max) - avatar
14 Respuestas
+ 4
There's probably cleaner solution for your headings question... But what sort of heading tag? The <header> tag of html5, or the <h1>, <h2>, ... <h6> tags? For the <h1> tag, you must avoid have many and limit to one... So, the solution to place multiple blocks elements in on line, is to embed them in another container, where the <header> tag could advantageously be used to semantically organize your page: <header id="my_header"> <div> <h2>ELEMENT 1</h2> </div> <div> <h2>ELEMENT 2</h2> </div> <div> <h2>ELEMENT 1</h2> </div> </header> With at least these css rules: #my_header { display:table; margin:auto; /* if you want header be center in it's parent */ } #my_header div { display:table-cell; } Another advantage of "display:table-cell;" is that you can vertically center the content... ( which is hard to obtain else ) Obviously, you could put css inline instead as separate ( with "style" attribut ), but it's not a good practice ;) Well also, it's not the only way to do: if you're purist, you must have a "display:table-row;" element embeding the "display:table-cell;"s... and conversly if uou don't, you can have only on container like the <header>, but bypass the <div> and directly define your contents as cells ( the <h2> tags in my example ), but it's not very usefull if your content is more than a few words ( think it can be complex html tree ). For the question about "<p style:"float: left ; margin-right:30px >" you must correct it as indicated by cheeze ( "style=" and not "style:" ), but be carefull with the floating elements: they are not very easy to control ;) Don't you want to post your code, so we can advise you in your global html? ( make it public if you have it already in the code playground, so we can examine it more easily than paste it in a post...
28th Dec 2016, 4:54 PM
visph
visph - avatar
+ 3
Well so, the basics are to make a grid with <table><tr><td> structure ( old bad practice, but usefull for understand ) for making a three column layout: <table> <tr> <td> <!-- CONTENT OF COLUMN LEFT --> <h1>RICHIE RICH</h1> <p>seems like ur born with a golden spoon</p> </td> <td> <!-- CONTENT OF COLUMN CENTER --> <h1>MeDIUM MAC</h1> <p>nor single screen or multiplex</p> </td> <td> <!-- CONTENT OF COLUMN RIGHT --> <h1>OLD JEANS</h1> <p>did u check ur old jeans yet</p> </td> </tr> </table> According to your needs, you can decide to manage your table width many rows: <table> <tr> <td> <h1>RICHIE RICH</h1> </td> <td> <h1>MeDIUM MAC</h1> </td> <td> <h1>OLD JEANS</h1> </td> </tr> <tr> <td> <p>seems like ur born with a golden spoon</p> </td> <td> <p>nor single screen or multiplex</p> </td> <td> <p>did u check ur old jeans yet</p> </td> </tr> </table> And to be more "semantic compliant", your first row being a title row, you can use specials forms of the <table> structure ( look at references in the web for the <th> tag -- special cell tag for heading cells and/or <thead> <tbody> <tfoot>, special container for row... ) For continue, let me explain why it's bad practice to make layout with <table> structure: for being good compliant to html specification, you must be semantically logical... and the <table> element was design for create "real" tables ( which visually are table ), not for layout. But in the early years, before css, we don't have many choices, and a lot of web site have used this trick... But today, we can avoid to use it, use a more semantically appropriate html tag, and set his css property "display" to be treated as you want, independently of your semantic page description... So, with my previous post, I guess you understand and can refactor your code... else ask for what you want clarify ;)
28th Dec 2016, 5:46 PM
visph
visph - avatar
+ 2
use style="float: left ; margin-right: 30px" see if it works
28th Dec 2016, 3:39 PM
David Sebastian Keshvi Illiakis
David Sebastian Keshvi Illiakis - avatar
+ 1
display:"inline" put this inside the heading tag.
28th Dec 2016, 2:36 PM
Kataruna
Kataruna - avatar
+ 1
<h1 style="display: inline"> ftfy
28th Dec 2016, 3:27 PM
David Sebastian Keshvi Illiakis
David Sebastian Keshvi Illiakis - avatar
0
like <h should i write here >
28th Dec 2016, 2:37 PM
Paramesh Parimi (Max)
Paramesh Parimi (Max) - avatar
0
yes
28th Dec 2016, 3:35 PM
Kataruna
Kataruna - avatar
0
ok thanks for the answer...
28th Dec 2016, 3:36 PM
Paramesh Parimi (Max)
Paramesh Parimi (Max) - avatar
0
ok what if I want them in the same line side by side .. like this HOW ARE. YOU if all the three are headings
28th Dec 2016, 3:38 PM
Paramesh Parimi (Max)
Paramesh Parimi (Max) - avatar
0
write display inline in all of the heading tags
28th Dec 2016, 3:39 PM
Kataruna
Kataruna - avatar
0
thanks it works.. ok now if I have a paragraph under it should I write <p style:"float: left ; margin-right:30px >
28th Dec 2016, 3:45 PM
Paramesh Parimi (Max)
Paramesh Parimi (Max) - avatar
0
that float thing is working like align=left function only
28th Dec 2016, 3:56 PM
Paramesh Parimi (Max)
Paramesh Parimi (Max) - avatar
0
its not making them display side by side
28th Dec 2016, 3:56 PM
Paramesh Parimi (Max)
Paramesh Parimi (Max) - avatar
0
<html> <head> <title>DAYS BACK THEN</title> </head> <body> <h1>RICHIE RICH</h1> <p>seems like ur born with a golden spoon</p> <h1>MeDIUM MAC</h1> <p>nor single screen or multiplex</p> <h1>OLD JEANS</h1> <p>did u check ur old jeans yet</p> </body> </html> ... ok i just want all of those headings to be displayed side by side in a line so what do i do...for that
28th Dec 2016, 5:07 PM
Paramesh Parimi (Max)
Paramesh Parimi (Max) - avatar