Problème position et dimension image

zakkaria, jeudi 04 février 2021 à 13h58
Modifié

Bonjour,

J’ai un problème avec l’intégration d’une image.

J’ai terminé mon wireframe et je suis en train de l’intégrer. Tout allait bien avec les liens et les textes jusqu’à mon image d’accceuil (.png) En fait je n’arrive pas à positionné et à dimensionner l’image dans le CSS comme dans le frame.

Voici le lien Figma de mon frame : Frame

Il s’agit de l’image photographe.png de la page Acceuil (format écran ordinateur).

Voici mon code html

<html>

<head>
    <title>OCAM_P Acceuil</title>
    <meta name="description" content="Page d'étude pour projet de DesignerWeb"/>
    <link rel="stylesheet" type="text/css" href="acceuil.css">
</head>

<body>

    <header>
        <div id="logo"><h1>OCAM_P</h1>
        </div>
        <div id="searchbar">
        </div>
        <div id="loupe">
            <img src="icons/loupe.svg"> 
        </div>
        <div id="langues">
            <a href="acceuil_en.html"><p>EN|FR</p></a>
        </div>
    </header>

    <section id="socials">
        <div id="twitter">
            <a href="https://twitter.com/?lang=fr" target="_blank"><img src="icons/twitter.svg" alt="twitter"></a>
        </div>
        <div id="instagram">
            <a href="https://www.instagram.com/oca_mp/" target="_blank"><img src="icons/instagram.svg" alt="instagram"></a>
        </div>
        <div id="linkedin">
            <a href="https://www.linkedin.com/in/théo-reveau-948686200" target="_blank"><img src="icons/linkedin.svg" alt="linkedin"></a>
        </div>
        <div id="facebook">
            <a href="https://www.facebook.com/theo.reveau.56/" target="_blank"><img src="icons/facebook.svg" alt="facebook"></a>
        </div>
    </section>

    <div id="contenu">
        <h1>OCAM_P</h1>
        <h2>Photographie Urbaine<br>France</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mauris risus, suscipit tempus iaculis in, pellentesque ut urna. Curabitur vel sollicitudin urna. Fusce eget ex.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel arcu eu urna convallis auctor. Donec pellentesque ligula ultrices felis placerat aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst.</p>
        <a href="qui_sommes_nous.html" target="_self"><h3>Continuer</h3></a>
        <div id="photographe">
            <img src="images/photographe_bnw.png" alt="photographe,photographie,noir et blanc,streetphotography">
        </div>
    </div>

</body>

</html>

Et le CSS

*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'antonregular';
    src: url('fonts/anton-regular-webfont.woff2') format('woff2'),
         url('fonts/anton-regular-webfont.woff') format('woff'),
         url('fonts/Anton-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'permanent_markerregular';
    src: url('fonts/permanentmarker-regular-webfont.woff2') format('woff2'),
         url('fonts/permanentmarker-regular-webfont.woff') format('woff'),
         url('fonts/PermanentMarkeer-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

body{
    position: relative;
    width: 1440px;
    height: 1024px;
    background: #000000;
}

header{
    position: absolute;
    width: 1440px;
    height: 124px;
    left: 0px;
    top: 0px;
}

#logo h1{
    color:white;
    position: absolute;
    height: 101px;
    left: 155px;
    right: 1075px;
    top: 23px;

    font-family: antonregular;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 70px;
    display: flex;
    align-items: flex-end;
    text-transform: uppercase;
    font-feature-settings: 'cpsp' on;
}

#searchbar{
    position: absolute;
    height: 37px;
    left: 949px;
    right: 293px;
    top: 73px;

    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

#loupe{                     /* changer la couler directement dans le fichier .svg */
    position: absolute;
    height: 29px;
    left: 1159px;
    right: 252px;
    top: 77px;
}

a{
    text-decoration: none;
}

#langues{
    position: absolute;
    height: 46px;
    left: 1277px;
    right: 0px;
    top: 62px;

    font-family: antonregular;
    color: white;
    font-style: normal;
    font-weight: normal;
    font-size: 26px;
    line-height: 38px;
    display: flex;
    align-items: flex-end;
    text-align: center;
    text-transform: uppercase;
}
#langues a{
    color: white;
}

#socials{
    position: absolute;
    width: 102px;
    height: 1024px;
    left: 0px;
    top: 0px;
}

#facebook{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 26px;
    top: calc(50% - 50px/2 + 165px);
}

#linkedin{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 26px;
    top: calc(50% - 50px/2 + 67px);
}

#instagram{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 26px;
    top: calc(50% - 50px/2 - 25px);
}

#twitter{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 26px;
    top: calc(50% - 50px/2 - 123px);
}

#contenu h1{
    position: absolute;
    width: 467px;
    height: 47px;
    left: 243px;
    top: calc(50% - 47px/2 - 190.5px);

    font-family: antonregular;
    font-style: normal;
    font-weight: normal;
    font-size: 144px;
    line-height: 211px;
    text-transform: uppercase;

    color: #FFFFFF;
}

#contenu h2{
    position: absolute;
    width: 467px;
    height: 77px;
    left: 243px;
    top: calc(50% - 77px/2 + 13.5px);

    font-family: antonregular;
    font-style: normal;
    font-weight: normal;
    font-size: 32px;
    line-height: 47px;
    text-transform: capitalize;

    color: #FFFFFF;
}

#contenu p{
    position: absolute;
    width: 467px;
    height: 152px;
    left: 243px;
    top: calc(50% - 152px/2 + 170px);

    font-family: permanent_markerregular;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 19px;
    text-transform: capitalize;

    color: #FFFFFF;
}

h3{
    position: absolute;
    width: 106px;
    height: 32px;
    left: 243px;
    top: calc(50% - 32px/2 + 312px);

    font-family: permanent_markerregular;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 32px;
    text-decoration-line: underline;
    text-transform: capitalize;

    color: #FFFFFF;
}

Je ne demandes pas forcément que l’on me mâche le travail, mais j’ai besoin d’un connaisseur qui saurait identifié d’où vient le problème…

J’ai un doute que cela vienne du frame directement car il vrai que l’image déborde de l’écran maquette. Mais je ne connais la solution pour empêcher cela. Ou alors ce la vient de mon code. J’ai supprimé d’emblée mon code concernant l’image car celui-ci n’avait aucun effet souhaité.

Merci d’avance de votre aide précieuse.

(je suis débutant)

04/02/21 à 13h58
Modifié

+0 -0

Pas encore membre ?