18043 sujets

Questions générales et questions de débutants

Problème de débutant HTML/CSS

Bonjour tout le monde, j'ai un petit soucis avec mon code et j'aimerais avoir l'avis d'un connaisseur dessus.. voilà le résultat esconté : http://www.noelshack.com/2016-51-1482153534-14817293576249-2.jpg
et voilà mon résultat : http://www.noelshack.com/2016-51-1482153630-capture.jpg
Voilà le code (je met uniquement la partie concernée)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Yohann-Furp</title>
</head>

<body>
<header>
<p><img src="profile.jpg" alt="profile" align="top"></p>
<h1>Yohann Furp</h1>
<h2>Etudiant chez OpenClassrooms</h2>
</header>

EN CSS :
h1
{
text-align:center;
font-size:3em;
}

.profile
{
border:5px black solid;
float:right;
}

h2
{
text-align: center;
font-size: 1.5em;
clear:right;
}

Voilà si quelqu'un pouvait m'éclairer là dessus ça m'enleverai une épine du pied merci beaucoup ! Smiley biggrin
Modifié par Yoyofurp (19 Dec 2016 - 14:21)
Bonjour.

.profile ciblerait un élément HTML qui aurait pour class profile. Or il n'y a rien de tel dans le code. Il faut, pour faire 'flotter' l'imagen que float soit appliqué au paragraphe... quelquechose comme :
header p
pour que les styles soient restreints aux paragraphes dans header. Ses éléments frères vont flotter... enfin uniquement h1... puisque h2 a la propriété clear...

Smiley smile

PS : L'attribut align semble obsolète.
Modifié par Zelena (19 Dec 2016 - 14:53)
Salut et joyeux Noël.

Si la solution précédente ne fonctionne pas, je te propose celle-ci, qui soit n'est pas la meilleures, mais tu pourras au moins y parvenir relativement facilement.

Pour ta carte de visite :

Pour le HTML

Tu crées un <div class="Vcard"> ou autre selon tes préférences....

a l'intérieur de celui-ci tu mets ton titre soit dans un paragraphe soit dans un titre du genre <h3>

tu insères une image en la nommant également avec une class

Pour le CSS

un petit background sur ton <div>
ton image tu la passes en position relative

ensuite tu n'a plus qu'à jouer avec le positionnement et les z-index dans le cas échéant....

Damien
Sujet clos
Aller à