Problème alignement à gauche

10 août 2017 à 13:00:35

Bonjour,

je viens demander votre aide aujourd'hui car je suis débutant dans la matière et car je ne parviens pas à résoudre mon problème moi même malheureusement.
Je ne parviens pas à aligner mon image sur la gauche, c'est comme si quelque chose la bloqué alors que rien ne semble gêner.. Il doit y avoir pas mal de chose à corriger dans ce que j'ai fait pour le moment j'en suis conscient. Pouvez-vous m'aider ?

Merci d'avance !

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Pierre Dejonghe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <header>
        <div class="barre"></div>
         <div class="conteneur"> 
         
          <a href="index.html">
          </a>
          <img src="img/logo%20D.png" width= "60" height="60">
             <div class="menu top">
             <nav>
              <ul>
                  <li><a href="">Accueil</a></li>
                  <li><a href="">Qui suis-je?</a></li>
                  <li><a href="">Works</a></li>
                  <li><a href="">Contact</a></li> 
              </ul>
            </nav>
            </div>
            </div>
   </header>
   <div class="ligne1">
   <img src="img/Sans-titre-2_0003_Rectangle-2-copie.png">
   </div>
    <div class="ligne2">
   <img src="img/Sans-titre-2_0003_Rectangle-2-copie.png">
   </div>
   <div class="presentation">
     <h2>Qui suis-je?</h2>
       </div>
       <div class="qsj">
          <nav>
           <a> Je m'appelle Pierre Dejonghe, j'ai 21 ans. Je suis en troisième année en école d'art graphique à E-artsup Lille.<br> Je suis spécialisé dans la communication visuelle. J'ai également des notions en html5 car j'ai entièrement réalisé mon portfolio.  </a>
           
        </nav>
        <div/>
        <div class="work">
          <nav>
          <ul>
           <li><a href="">All</a></li>
           <li><a href="">Logo</a></li>
           <li><a href="">Illustration</a></li>
           <li><a href="">Print</a></li>
        </ul>
        </nav>
        
        <div class="dour">
        <img src="img/dour.jpg" width="384" height="216">
        </div>
        </div>
    </div>
</body>
</html>

*{
    
box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: helvetica, arial, futura, sans-serif;
    background-color: black;
}

.conteneur img{
    margin-left: 20px;
    margin-top: 8px;
    z-index: 6;
}

.barre {
    height: 77px;
    width: 1216px;
    background-color: rgba(0,0,0,0.3);
    z-index: 1;
    position: absolute;
}

.conteneur {
    background-image: url(img/fond_02.png);
     width: 1216px;
    height: 856px;
    
}

.centreur{
    width: 1200px;
    margin: 0 auto 0 auto;
}

    
header nav{
    position: absolute;
    width: 800px;
    height: 77px;
    left: 60%;
    top: 0px;
    margin-left: -400px; 
    
}

nav ul li{
    display: inline-block;
    text-transform: uppercase;
}

header nav ul li a{
    z-index: 1000;
    color: #FFF;
    text-decoration: none;
    font-family: futura;
    margin-left: 50px;
    line-height: 77px;
    height: 77px;
    font-size: 11px;
    display: block;
}

header nav ul li a:hover{
    background-color: white;
    color: #D78;
    
}

ul {
    margin-top: 0px;
    margin-left: 70px;
}



.presentation h2{
    font-size: 20px;
    font-family: helvetica;
    margin-left: 550px;
    color: white;
    
}

.ligne1 {
    position: absolute;
    margin-top: 15px;
    margin-left: 380px;
    
}

.ligne2 {
    position: absolute;
    margin-top: 15px;
    margin-left: 705px;
}

.qsj {
    position: absolute;
    margin-top: 50px;
    margin-left: 190px;
    height: 50px;
}


.qsj a {
    color: #FFF;
    
    
}

.work {
    
    padding: 0px;
    margin: 50px;
    text-align: center;
    float: left;
}

.work nav ul li a {
    
    display: inline-block;
    margin: 0 30px;
    text-decoration: none;
    color: dimgray;
    
}

.work nav ul li {
    display: inline-block;
    text-transform: uppercase;
    
    
}

.dour {
    position: relative;
    margin-top: 50px;
    margin-left: 10px;
    
    
}

ChrisLebure

10 août 2017 à 13:38:34

Bonjour,

de quelle image parles-tu ?
En effet il y a pas mal de choses à revoir, par exemple les positionnement absolu qui ne semblent pas du tout utiles, et donc les margin non plus,
en regardant l'image, on distingue 4 div les unes au dessus des autres, tout simplement, quelque chose comme :

<header>
    <h1>Qui suis-je</h1>
    <p>Je m'appelle...</p>
</header>
<nav>onglets de navigation</nav>
<main>
    <img src="mon_image.jpg" alt="">
</main>

PierreDejonghe1

10 août 2017 à 14:09:56

ChrisLebure a écrit:

Bonjour,

de quelle image parles-tu ?
En effet il y a pas mal de choses à revoir, par exemple les positionnement absolu qui ne semblent pas du tout utiles, et donc les margin non plus,
en regardant l'image, on distingue 4 div les unes au dessus des autres, tout simplement, quelque chose comme :
<header>
    <h1>Qui suis-je</h1>
    <p>Je m'appelle...</p>
</header>
<nav>onglets de navigation</nav>
<main>
    <img src="mon_image.jpg" alt="">
</main>

Tout d'abord merci beaucoup pour ton aide !
Je parle de l'image dour.jpg.

Il semble y avoir un un blocage au niveau du texte "je m'appelle Pierre..." je ne peux pas aller plus à gauche.

j'ai essayé des choses pour le coller au bord de gauche mais je n'y suis pas parvenu..

Ca doit surement venir de ce que j'ai fait précédemment mais je ne trouve pas d'où cela peut venir.

ChrisLebure

10 août 2017 à 15:03:42

Franchement c'est un gros b...el ton code,
recommence tout, laisse tomber les positionnement absolus, les marges, etc,
commence par du simple, le schéma que je t'ai donné, et ajoute éventuellement des éléments à l'intérieur de la structure de base, par exemple des images nommées "logo"

Attention aux espaces dans les noms d'images, fortement prohibés

Encore une fois : commence une structure simple, et complexifie au fur et à mesure si nécessaire. La copie d'écran montre une structure très simple c'est ce que tu dois coder

LéoXo

11 août 2017 à 2:30:35

  <a> Je m'appelle Pierre Dejonghe, j'ai 21 ans. Je suis en troisième année en ...  </a>

Utilise la balise <p> à la place de <a> pour mettre du texte, la balise <a> est utilisé pour des hyperlink.