placement de mon image

Sujet résolu

23 mai 2017 à 20:33:00

bonjour je voudrais savoir comment placer mon image tout en haut a droite de ma page a cote de mon titre.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css">
    <title>Mon CV en ligne</title>
</head>

<body>
    <h1>Edward Joseph Snowden</h1>

    <p class="sousmonnom">
    Lanceurs d'alerte, Militant des droits de l'homme.<br /><p/>

    <a href="C:\Users\guena95\Desktop\teste site html5_css3\CV en ligne/Edward_Snowden.jpg"><img src="C:\Users\guena95\Desktop\teste site html5_css3\CV en ligne/edward_snowden_mini.jpg" alt="Ma tête" /></a>

    <h2>Mon éxperience</h2> <br/>
    <ul>
        <li><strong>De Mai 2004 à Mars 2007</strong> : Agent de sécurité pour la N.S.A.</li>
        <li><strong>De Mars 2007 à Février 2009</strong> : Envoyé par la CIA à la mission américaine des Nations unies à Genève en Suisse</li>
        <li><strong>De Février 2009 à Mars 2013</strong>: Dell (une entreprise américaine qui gère les systèmes d'information de nombreuses agences gouvernementales)entreprise préstataire de la NSA.
        <li><strong>De Mars 2013 a juin 2013</strong> : Booz Allen Hamilton en tant qu’administrateur systèmes pour la NSA, au Centre de renseignement régional SIGINT</li>
        </ul>

    <h2>Mes compétences</h2> <br />
    <ul>
        <li>Maîtrise de Kali et des ces outils.</li>
        <li>HTML5 et CSS3</li>
        <li>SQL</li>
        <li>C et C++</li>
    </ul>

    <h2>Ma formation</h2> <br />
    <ul>
        <p>J'ai arrêté mes etudes après le bac,Je suis autodidacte,J'ai tout appris tous seul dans mes debuts.<br />
        <a href="https://fr.wikipedia.org/wiki/Edward_Snowden#Convictions_politiques">Mon profil Wikipédia</a></p>
    </ul>

</body>
</html>

Mon CSS

h2
{
    color: brown;
}
h1, .sousmonnom
{
    text-align: center;
}
.sousmonnom
{
    text-align: center;
    font-size: 1.2em
}
ul, p
{
    font-size: 1.1em
}
*
{
    font-family: 'ambleregular',Impact,"Arial black",Arial,Verdana,sans-serif;
}
body
{
    background-image: url("neige.jpg");
}
a:visited
{
    color: green;
}
@font-face {
    font-family: 'ambleregular';
    src: url('Amble-Regular-webfont.eot');
    src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Regular-webfont.woff') format('woff'),
         url('Amble-Regular-webfont.ttf') format('truetype'),
         url('Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
img
{
    border: 2px blue solid;
    box-shadow: 6px 6px 6px black;
}

j'arrive pas a déplacer mon IMG

-
Edité par guena95 23 mai 2017 à 20:42:23

stefde3

23 mai 2017 à 21:38:31

Salut

il te faut créer une div qui engloble ton <P> et ton <a> et tu places ensuite ton p et ton a en display:inline-block ou en Float à toi de voir

Le CSS ça peut craindre -->Conférence CSS3.CREATE

lindadu01

24 mai 2017 à 15:48:38

J'utilise le même fonctionnement que Stef pour faire ceci. A savoir :

j'ai crée une balise "header" dans laquelle je mets tout ce qui est en haut de mon site (image, titre, menu...). Dans cette balise, il y a un <img>.

En gros :

<body>
<header>
<img>

Et dans mon css j'ai :

header>img{
    height:85px;
    float:left;
    margin:0;
}

Le > permet de préciser que c'est le premier item img sur lequel on applique les propriétés.

Tu peux l'adapter avec ta balise <a> je pense

Parfois, arrêter 5 minutes son développement permet de mieux repartir face à un problème ;)

stefde3

24 mai 2017 à 20:41:55

@lindadu01 : Salut

en effet c'est ça sauf pour ton explication sur le ">"

header>img siginifie que tu donne un attribut à l'img qui est "enfant" de header.

Mais si tu fais header img { ça fera le même effet puisque tu précises que tu veux seulement que l'image qui est dans header soit impactée :)

-
Edité par stefde3 24 mai 2017 à 21:04:39

Le CSS ça peut craindre -->Conférence CSS3.CREATE

guena95

24 mai 2017 à 21:03:43

d'accord merci je vais essayer sa

Rennor974

25 mai 2017 à 7:37:14

sinon tu met le tout dans un tableau invisible

Lamecarlate

25 mai 2017 à 9:07:17

Rennor974 > tu veux dire dans un tableau HTML ? Si oui, je t'arrête tout de suite. Ce n'est pas fait pour faire de mise en page.

Pas d'aide concernant le code par MP, le forum est là pour ça :)