placer photo avec un lien avec css

la photo a un lien et je ne sais pas la placer en haut à droite

Sujet résolu

15 juillet 2019 à 11:37:53

Bonjour

voici mes écritures html et css. Merci d'avance pour votre aide et bonne journée

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
    <link rel="stylesheet"href="style.css"/>
<title>cv hennebo julien ></title>
<head/>
<body> 
  <div class="hennebo"> <h1> Hennebo Julien</h1>  
      <p>  6 Allée des sternes<br/>
        6200 Berck  </p>   </div>
      <div class="photo">  <a href="contenu/images/photocv.jpg">
              <img src="contenu/images/photocv-%20mini.png" alt="photo identité"> 
                 </a>  </div>
        
    <h2> Expériences professionnelles </h2> 
    <ul> <div class="professionnel">
        <li> 2019 Eolia <span class="lieu"> Fort Mahon</span> <strong> moniteur de char à voile</strong> </li>
        <li> 2017-2019 Sessad de Berck <strong>Aide médico psychologique</strong> </li>
        <li> 2017 Ehpad St Walloy <strong>aide soignant</strong> </li>
        <li> 2017 UHR unité d'hospitalisation renforcée à Rue <strong>Aide médico psycho</strong> </li>
    </div>
        </ul>   
        
    <h2>Education</h2>
    <ul> 
        <li> 2017 <strong>Aide médico psy</strong> irts Etaples </li>
        <li> 2012 <strong>certificat qualification handisport</strong> </li>
        <li> 2007 <strong>Bpjeps voile et char à voile</strong> Creps de basse normandie </li>
        <li> 1999 <strong>licence sciences économique et sociales</strong> à Lille 1 </li>    
    </ul>
<div class="cursive"> <h2> Centres d'intérêt </h2>  </div>
    <div class="centres">  <ul>
         <li> Sports nautiques et funs, Enfants, Cinéma, Lectures, cuisines </li>
         <li> social, politique, culture, ami(e)s, conjointe </li>
   </ul>
       </div>
     
    </body>
    </html>

.professionnel
{
    color: blue;
}
.hennebo
    {
     text-align:center;
        text-shadow: 1px 1px 0.5px black;
}
    .photo
{
    text-align: right;
    vertical-align: top;
    filter:drop-shadow(10px 4px #4444dd);
}
body
    {
    background: url(contenu/images/imagefond.jpg);
    }
    .centres
    {
    border: 1px solid black;
          border-radius: 10px 40px 40px 10px;
    width: 300px;
    height: 120px;  
        background-color:rgb(133,234,162);
}
@font-face {
  font-family: "Deutsch-Gothic";
  src: url("Deutsch-webfont.eot");
    src:url("Deutsch-webfont.eot")format("embedded-opentype"),
        url("Deutsch-webfont.woff")format("woff"),
        url("Deutsch-webfont.ttf")format("truetype"),
        url("Deutsch-webfont.svg")format("svg");
}
body
{
    font-family: 'Deutsch-Gothic',arial,serif;
}

AbcAbc6

15 juillet 2019 à 11:52:56

Bonjour,

Manque de précisions

Vous êtes ici sur un forum d'entraide communautaire et non pas sur un forum de demande de service, le but n'est donc pas de fournir une réponse toute faite ou de directement fournir la solution à quiconque viendrait sans la moindre trace. Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :

Un descriptif clair et précis du problème
La tentative actuelle de résolution que vous avez effectué
Le résultat attendu et le résultat actuel
Toutes pistes de recherches pouvant aider à la résolution

Manque de recherche

La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de ressources répondant à votre besoin.

Je vous invite à effectuer de vraies recherches qui sont à la base d'un bon apprentissage…

JulienHennebo

16 juillet 2019 à 10:48:12

Bonjour,

Merci de votre retour, je n'arrive pas à placer une photo qui comporte un lien en haut à droite de l'écran.(photo minicv)

on clique sur la photo et la photo s'agrandie.(photocv)

J'ai tenté aussi avec la balise "background-position", "background", "position", mais ça ne fonctionne pas, je ne sais pas comment

faire car ce n'est pas une simple photo mais une photo qui comporte un lien... la photo est déja écrite avec le html...

je n'ai pas vu qu'on ecrivait le lien dans le css.

Au final, je n'ai réussi qu'à la placer à droite avec text align: right;

vertical align: top; ne fonctionne pas dans ce cas.

Bonne journée et merci d'avance de votre aide

AbcAbc6

16 juillet 2019 à 19:03:05

Bonjour, indiquez une bordure de couleur de 1px pour voir la dimensions de vos éléments.

Si l'image dois être en haut à droite, comme vous l'avez mise dans un block div, pourquoi ne pas écrire ce block juste après le body, en premier donc.

Vous constaterez que le reste ce place en dessous de la photo, logique. Pour éviter cela il serait bien de faire sortir ce div du flux courant et cela tombe bien il existe un propriété qui le permet et qui en plus aligne à droite en même temps c'est float: right; .

Maintenant que la div contenant la photo est bien positionnée, vous constatez que le titre <h1> n'est plus bien centrer, il faut donc alors enlever l'effet du flottant pour l'élément suivant. Pour cela 2 possibilités, soit un overflow: hidden; sur le parent du flottant, soit utiliser la propriété clear sur l'élément qui suit directement le flottant.

Avez vous bien tout compris? En résumer

.hennebo
    {
     text-align:center;
        text-shadow: 1px 1px 0.5px black;
        clear: both;
}
    .photo
{
    
    filter:drop-shadow(10px 4px #4444dd);
    float: right;
    border: 1px solid red; 
}

Édit: passez votre code au validateur vous avez d'autres erreurs https://validator.w3.org/

-
Edité par AbcAbc6 16 juillet 2019 à 19:45:21

JulienHennebo

18 juillet 2019 à 10:13:07

Bonjour,

merci à vous, j'ai pu résoudre mon problème et voir l'intéret de la propriete float.

merci bien et bonne journée

AbcAbc6

18 juillet 2019 à 10:52:20

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e