Position image et texte HTML CSS
Grandasse_ Messages postés 924 Date d'inscription Statut Membre Dernière intervention -
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
- Position image et texte HTML CSS
- Ma position - Guide
- Extraire texte d'une image - Guide
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Transcription audio en texte word gratuit - Guide
