How to manipulate text (HTML/CSS) without divs?-CodePudding

I want to create my Resume in HTML.

[Here is my Resume][1] [1]: https://i.stack.imgur.com/f4UIa.jpg

I need help in:

is the dimension of the page good as a A4 ?
How to Position the text like in picture, but i want without divs because i'm still noob with them!
And how to make the page and the text fixed like a pdf or word so when i print it, it be conform?
Thank you.

This is my CSS:

#name{font-size: 26pt;
    font-family: garamond;
    font-weight: bold;
    display:inline;} /*ignore line break*/
.title{font-size: 12pt;}
.sous-title{font-weight: bold;}

body{
    font-size: 11pt;
    font-family: Verdana;
    color: rgb(64, 64, 64);
    max-width: 44em; /*3ordh*/
    padding: 65 45px;
    margin: 6em auto 19em;
    position: relative;
    box-shadow: 0 0.3em 1em rgb(110, 110, 110);
    height: 90em}

This is my html :

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="portfolionotabs.css">
    <title>Resume</title>
</head>

<body>
    <p id="name">Med Amine <br>Terbah</p>
    14, St.Echifaa, Riadh
    [email protected]<br>
    Sousse 4023  216
     216 20690405
    <hr />
    <p >Objective</p>
    A highly motivated student looking for a first time position within a retail environment. Through my studies, i
    have
    demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to
    utilise
    these skills to work with customers and satisfy their needs.
    <hr />
    <p >Education</p>
    ISGS
    <p >IT management</p>
    September 2014 - July 2017<br>
    Graduated: No<br>
    Completed 2nd year
    <hr />
    CSFMTS
    <p ></p>International trade</p>
    September 2019 - Current<br>
    Graduated: Yes<br>
    Currently on internship
    <hr />

    <p >Work experience</p>
    <p ></p>Ben Ahmed Transit (Internship)</p>
    Beb Bhar, Sousse<br>
    October 2021 - November 2021<br>
    <hr />
    <p >Languages</p>
    English •••••<br>
    French •••••<br>
    Italian •••••
    <hr />
    <p >Skills</p>
    Problem-solving Reasonably experienced<br>
    Communication Reasonably experienced<br>
    Adaptability<br>
    Active Listening
    <hr />
    <p >Technical skills</p>
    Ms-office Advanced level<br>
    Ciel 2019 Advanced level<br>
    <hr />
    <p >Hobbies and interests</p>
    Exercising and healthcare<br>
    Yoga and meditation<br>
    Volunteering
</body>

</html>

CodePudding user response：

Maybe I can answer two of your questions.

How to Position the text like in picture, but i want without divs..?

Divs are really not too difficult and a core concept of html, so it would be beneficial to learn how to use them. You can find some good explanation on MDN Web Docs div details to help you. But since you ask for an alternate, I can offer one: Tables. Now, I personally do not like to use tables, but it can do the job. A warning is that tables can make it more difficult to have a responsive site that works well on small screens. But since you wish to mimic a printed document it would work for that.

Example:

<hr />
<table>
  <tr>
    <td>
      <p >Objective</p>
    </td>
    <td>A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to
      work with customers and satisfy their needs.</td>
  </tr>
</table>
<hr />

That's a bit basic and doesn't match the style you want, but gives you the idea of how to place the two columns side by side. Of course you will need to add the appropriate properties to set the cell sizes, padding, and spacing to what you want it to be.

The basic principle is use <tr> for each row and <td> for each cell in the row. Then build like you would a spreadsheet or table in a word document.

And how to make the page and the text fixed like a pdf or word so when i print it, it be conform?

If you use tables, you can use a fixed width (in pixels). That can accomplish this. A good reference is Fixed-width tables with text-overflow on MDN. But again, a warning. This approach can cause difficulty on smaller screens; it is not a responsive design.

CodePudding user response：

#name{font-size: 26pt;
    font-family: garamond;
    font-weight: bold;
    display:inline;} /*ignore line break*/
.title{font-size: 12pt;}
.sous-title{font-weight: bold;}

body{
   padding: 10px;
    font-size: 11pt;
    font-family: Verdana;
    color: rgb(64, 64, 64);
    max-width: 44em; /*3ordh*/
    padding: 65 45px;
    margin: 6em auto 19em;
    position: relative;
    box-shadow: 0 0.3em 1em rgb(110, 110, 110);
    height: 90em
}

.fright{
  float: right;
  margin: 0 20px;
}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="portfolionotabs.css">
    <title>Resume</title>
</head>

<body>

    <p id="name">Med Amine <br>Terbah</p>
    
    <span >
      [email protected]<br>
       216 20690405
    </span>
    <span >
      14, St.Echifaa, Riadh<br>
      Sousse 4023  216
     </span>
     
    <hr />
    
    <table>
      <tr>
        <td valign="top" width="230px">Objective</td>
        <td>
        A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work with customers and satisfy their needs.
        </td>
      <tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td valign="top">Education</td>
        <td>
            ISGS<br>
            <b>IT management</b><br>
            September 2014 - July 2017<br>
            Graduated: No<br>
            Completed 2nd year
          </td>
      </tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td></td>
        <td>
          CSFMTS<br>
         <b> International trade</b><br>
          September 2019 - Current<br>
          Graduated: Yes<br>
          Currently on internship
        </td>
      </tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td>Work experience</td>
        <td>
          <b>Ben Ahmed Transit (Internship)</b><br>
          Beb Bhar, Sousse<br>
          October 2021 - November 2021<br>
        </td>
      </tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td>Languages</td>
        <td>
          English •••••<br>
          French •••••<br>
          Italian •••••
        </td>
      </tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td>Skills</td>
        <td>
          Problem-solving Reasonably experienced<br>
          Communication Reasonably experienced<br>
          Adaptability<br>
          Active Listening
        </td>
      </tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td>Technical skills</td>
        <td>
          Ms-office Advanced level<br>
          Ciel 2019 Advanced level<br>
        </td>
      </tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td>Hobbies and interests</td>
        <td>
            Exercising and healthcare<br>
            Yoga and meditation<br>
            Volunteering
        </td>
      </tr>
    </table>
</body>