Sujet Précédent Sujet Suivant

Position image et texte HTML CSS

Fermé
Sky_Tower Messages postés 1 Date d'inscription dimanche 15 janvier 2023 Statut Membre Dernière intervention 15 janvier 2023 - 15 janv. 2023 à 16:01
Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 - 17 janv. 2023 à 23:06

Bonjour,

Je n'arrive pas à positionner mon image et mon texte comme je le veux. J'aimerais que mon image soit positionner en bas à droite de la page web et le titre "Tommy Shelby Nationalité britannique Profession : Businessman" juste au dessus de sorte que je puisse mettre à gauche d'autres informations sur mon personnage (tableau, compétences, hobbies).

Voici mon code HTML : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styles_CV_Tommy.css" />
        <title>Tommy Shelby</title>
    </head>
    
    <body>
        <header>
            <p> Tommy Shelby  </br>
            Nationalité britannique  </br>
            Profession : Businessman
            <img id="photo" src="Tommys3.webp" />
        </header>
        
        <main>   
            <article>
                <p> Expérience professionnelle : </p>
                <table border="1">
                <table border="1">
                <tr> <th>Année</th> <th>Activité</th> </tr>
                <tr> <td>1914-1918</td><td>Soldat</td> </tr>
                <tr> <td>1919</td><td>Bookmaker</td> </tr>
                <tr> <td>1924</td><td>Criminel</td> </tr>
                <tr> <td>1925-1926</td><td>Ganster</td> </tr>
                </table>
            </article>
            
            <article class="right">
                <p> Compétences : </p>
                <ul>
                    <li> Ganster impitoyable, intelligent, calculateur, politicien </li> 
                    <li> Il n'a connu aucun échec dans tout ce qu'il entrepris </li>
                <u1>
            </article>
            
            <article>
                <p> Hobbies : </p>
                <ul>
                    <li> Interests... smoking, drinking, and gambling. </li>
                    <li> Challenge... holding onto power (it's a challengerrr !)</li>
                <ul>
            </article>
        </main>
        
    </body>
</html>

Et mon code CSS :

html {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #9F9A97;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

html {
  background-color: #4D4B4A;
}

header {
  margin: 20px;
}
 
header p {
  padding-left: 150px;
  font-size: 15pt; 
  color: red;
  display: block;
  float: right; 
}

article {
  margin: lOpx; 
}

p {
  font-size: 12pt; 
  font-weight: bold; 
  font-family: 'Courier New', Courier, monospace; 
}

table {
  font-size: 12pt;
}

li {
  list-style-position:inside;
  list-style-type: disc;
}

img {
  display: block;
  float: right;  
}

#photo {
  width: 165pX;
  height: 250px;
}

Merci d'avance :)


Windows / Chrome 108.0.0.0

1 réponse

Réponse 1 / 1
Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 595
17 janv. 2023 à 23:06

Bonjour,

Tu devrais sortir l'image du header et la mettre ailleurs dans ce cas.

Aussi, attention aux balises qui ne sont pas fermées (p) et les <table> en double.
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses