Mise en page d'un site web

Signaler
Messages postés
9
Date d'inscription
mercredi 16 décembre 2020
Statut
Membre
Dernière intervention
19 décembre 2020
-
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
-
Bonjour,
J'aimerais aligner mon texte et mes images sur ce site web


comme sur ce shéma


Je n'arrive pas à trouver la solution, pourriez-vous m'aider ?

Configuration: Windows / Chrome 87.0.4280.88

5 réponses

Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 633
Bonjour,

Sans voir ton code html .. impossible de te répondre !
A noter que ça passera forcément par du css ...

NB: Pour poster ton code sur le forum, tu devras utiliser les BALISES DE CODE.
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Messages postés
9
Date d'inscription
mercredi 16 décembre 2020
Statut
Membre
Dernière intervention
19 décembre 2020

Bonjour,

Je n'y connais pas grand chose alors je vous ai fait une capture d'écran. J'espère que cela suffira.
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 633
Tu as beau ne pas t'y connaitre ... si tu ne lis pas correctement les réponses qu'on te donne .. on n'avancera pas vite ....

Relis bien ma précédente réponse et poste nous ton code correctement !
Messages postés
9
Date d'inscription
mercredi 16 décembre 2020
Statut
Membre
Dernière intervention
19 décembre 2020

J'espère que c'est ça :

<html>
<head>
	<meta charset="utf-8" />
  <title>Programmation</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body> <h1>Programmation </h1>  

<h1> <a href="billeterie.html"  target="_blank" > Samedi </a> </h1>  

<h2> <a href="https://fr.wikipedia.org/wiki/Nolwenn_Leroy"  target="_blank" > Nolwenn Leroy </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Nolwenn_Leroy_2011_2.jpg" /> </figure> </h2> <br> 
<p>  Chanteuse née le 28 septembre 1982 à Saint-Renan dans le Finistère. Elle a gagné la deuxième saison de la Star Academy et détient maintenant 7 albums. C'est également la marraine de la Fondation Abbé-Pierre et est membre des Enfoirés depuis 2006.  </p> <br> 

<h2> <a href="https://fr.wikipedia.org/wiki/Alan_Stivell"  target="_blank" > Alan Stivell </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Festival_de_Cornouaille_2016_-_Alan_Stivell_-_01.jpg" /> </figure> </h2> <br> 
<p>  Chanteur né le 6 janvier 1944 à Riom en Auvergne. Il milite pour la culture et la langue bretonne et joue plusieurs instruments dont la harpe celtique, le piano ou encore la flûte irlandaise. C'est le premier chanteur breton professionnel qui utilise la langue bretonne.  </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Matmatah"  target="_blank" > Matmatah </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/9/98/Matmatah_Plougastel_02-2017_-_42.jpg" /> </figure> </h2> <br> 
<p>  Groupe de rock et de folk breton créé à Brest en 1995. Ils ont vendu 1 300 000 albums et ont récolté 3 disques d'or + 1 disque de platine. Après 13 ans d'activités, le groupe se sépare en 2008 puis se reforme en 2016. </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Kern_(groupe)"  target="_blank" > Kern </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Festival_de_Cornouaille_2017_-_Kristen_ha_Kelenn_Nikolas_-_13.jpg" /> </figure> </h2> <br> 
<p>  Groupe de musique bretonne créé en 1992. En 2002, le groupe annonce une pause et reviennent dix ans après avec une nouvelle tournée.  </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Anne_Auffret"  target="_blank" > Anne Auffret </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Anne_Auffret_Annie_Ebrel_Loc-Envel_2016.jpg" /> </figure> </h2> <br> 
<p>  Chanteuse bretonne originaire de Bulat-Pestiven. Elle est également harpiste et a reçu le prix Imram qui est un prix attribué pour l'ensemble d'une oeuvre en langue bretonne.   </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Tri_Yann"  target="_blank" > Tri Yann </a>  <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Photo_-_Festival_de_Cornouaille_2012_-_Tri_Yann_en_concert_le_28_juillet_-_029.jpg" /> </figure> </h2> <br> 
<p>  Groupe de folk rock français créé en 1969 à Nantes. Initialement, le groupe réinterprétait des chansons traditionnelles bretonnes mais ils ont fini par créer leur propre répertoire original e, français et en breton.  </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Annie_Ebrel"  target="_blank" > Annie Ebrel </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/1/1c/Annie_Ebrel_%26_Nol%C3%B9en_Le_Buh%C3%A9_-_Festival_Yaouank_2015_-_05.jpg" /> </figure> </h2> <br> 
<p>  Chanteuse française d'expression bretonne, née en 1969. Elle est ambassadrice du chant breton en France et à l'étranger dans des pays comme la Russie, l'Italie, l'Espagne, la Scandinavie, le Québec, les Etats-Unis ou encore la pologne.  </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Denez_Prigent"  target="_blank" > Denez Prigent </a>  <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Denez_Prigent_%26_Fr%C3%A8res_Guichen_-_Festival_Yaouank_2016_-_05.jpg" /> </figure> </h2> <br> 
<p>  Chanteur français interprétant des chants bretons. Il est né le 17 février 1966 à Brest. Il détient sept albums et performe régulièrement en France et dans d'autres pays.   </p> <br> 

<h1> <a href="billeterie.html"  target="_blank" > Dimanche </a> </h1> <br> 

<h2> <a href= "https://fr.wikipedia.org/wiki/Les_Ramoneurs_de_menhirs"  target="_blank" > Les Ramoneurs de Menhirs  </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Les_Ramoneurs_de_Menhirs_%C3%A0_Plouha_en_2019.jpg" /> </figure> </h2> <br> 
<p>  Groupe de punk celtique français formé en 2006 en Bretagne. Le groupe est aussi connu en France qu'à l'étranger et comptabilise en 2016 sa dixième tournée. </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Manau"  target="_blank" > Manau </a>  <figure> <img src="http://generations.fr/media/news/thumb/870x489_manu-13932.png" /> </figure> </h2> <br> 
<p>  Groupe de slam d'inspiration celtique, connu pour leur célèbre titre "La tribu de Dana". Le groupe est actif depuis la fin des années 90 et comptabilise 8 albums. Ils ont été récompensés par la Victoire de la musique du "meilleur album rap ou groove de l'année. </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Soldat_Louis"  target="_blank" > Soldat Louis </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Festival_de_Cornouaille_2016_-_Soldat_Louis_-_29.jpg" /> </figure> </h2> <br> 
<p>  Groupe de musique traditionnelle bretonne mélangé au rock, créé à Lorient en 1987. Ils comptabilisent aujourd'hui treize albums. </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Dan_Ar_Braz"  target="_blank" > Dan Ar Braz </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Photo_-_Festival_de_Cornouaille_2013_-_Dan_Ar_Braz_C%C3%A9l%C3%A9brations_le_27_juillet_-_029.jpg" /> </figure> </h2> <br> 
<p>  Chanteur breton né le 15 janvier 1949 à Quimper. Il rejoint l'Héritage des Celtes en 1993 puis se retranche dans sa carrière solo en 2002. En 1996, il représente la France au concours de l'Eurovision avec une chanson bretonne. </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Louis_Capart"  target="_blank" > Louis Capart </a> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/6/66/Louis_Capart_-_%C3%8Ele_de_Sein.jpg" /> </figure> </h2> <br> 
<p>  Chanteur d'expression française et bretonne, né le 31 août 1947 à Paris. Il a reçu le Grand Prix de l'Académie Charles-Cros en 1986 et le prix René Jeanne de la SACEM l'année d'après pour son album "Patience". <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Dom_DufF"  target="_blank" > Dom DufF </a> <figure> 
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Dom_DufF_en_juin_2019.jpg" /> </figure>
 </h2> <br> 
<p>  Chanteur breton né le 20 août 1960 à Plouescat dans le Nord du Finistère. Il commence sa carrière solo en 2000 après 9 ans en tant que membre du groupe "Diwell". Il comptabilise à présent 7 albums.  </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Gwennyn"  target="_blank" > Gwennyn </a>  <figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Festival_de_Cornouaille_2017_-_Gwennyn_-_01.jpg" />
</figure> <br> 
</h2>
<p>  Chanteuse bretonne née le 27 juin 1974 à Rennes. Reconnue à l'étranger, elle est devenue une des ambassatrices de la chanson bretonne contemporaine et de la musique pop-rock celtique. Elle a reçu 5 recompenses dont le Grand prix du disque Produit en Bretagne.  </p> <br> 
<h2> <a href="https://fr.wikipedia.org/wiki/Nolwenn_Korbell"  target="_blank" > Nolwenn Korbell </a>  
<figure>  <br> 
<img src="file:///C:/Users/Pauline%20Cadro/Desktop/DOSSIER/LEA/L3/Media/Nolwenn_Korbell_-_Ty_Th%C3%A9%C3%A2tre.jpg" /> 
</figure> <br> 
</h2>
<p>  Chanteuse bretonne née le 3 février à Quimper. Reconnue à l'étranger, elle possède 6 albums studio et participe également à des pièces de théâtre, du doublage de films et de dessins animés.  </p> <br> 



</body>
</html>
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 633
C'est bien ça.

Par contre il va également nous falloir le contenu de ton fichier style.css

NB: Pour tes prochains codes, essaye de les identer un minimum... ça les rendra beaucoup plus lisibles.
Messages postés
9
Date d'inscription
mercredi 16 décembre 2020
Statut
Membre
Dernière intervention
19 décembre 2020

Je ne sais pas ce que veut dire identer mais j'espère que ça reste quand même lisible

 
h1 {
font-family : bree serif ;
font-size : 60px ;
font-weight : bold ;
color : #163573 ;
text-align : center ; 
text-decoration : none ;

}

a {
text-decoration : none ;
color : #163573 ;

} 

a[target=_blank]:link { color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ; 	}
a[target=_blank]:visited{color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ; } 
a[target=_blank]:hover{color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ; } 
a[target=_blank]:focus{color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ;  }
a[target=_blank]:active{color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ;  }

h2 {
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
color : #F2CB05 ;
text-align : left ;
}

p{
font-family : monospace ;
color : #163573 ;
text-align : left ;
}


img { 
width : 20%;
height : 20%  ; 
float:left ; 
margin:15px ;
text-align:right;
}
 
body{
background-color : white ;
	
	
}
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 633
Messages postés
9
Date d'inscription
mercredi 16 décembre 2020
Statut
Membre
Dernière intervention
19 décembre 2020
>
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021

 h1 {
font-family : bree serif ;
font-size : 60px ;
font-weight : bold ;
color : #163573 ;
text-align : center ; 
text-decoration : none ;

}

a {
text-decoration : none ;
color : #163573 ;

} 

a[target=_blank]:link { color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ; 	}
a[target=_blank]:visited{color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ; } 
a[target=_blank]:hover{color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ; } 
a[target=_blank]:focus{color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ;  }
a[target=_blank]:active{color : #F2CB05 ;
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
text-align : left ;  }

h2 {
font-family : bree serif ;
font-size : 35px ;
font-weight : normal ; 
text-decoration : underline ; 
color : #F2CB05 ;
text-align : left ;
}

p{
font-family : monospace ;
color : #163573 ;
text-align : left ;
}


img { 
width : 20%;
height : 20%  ; 
float:left ; 
margin:15px ;
text-align:right;
}
 
body{
background-color : white ;
	
	
} 
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 633
Voici un début de réponse.

Je te laisse adapter à tes besoins

<html>
  <head>
    <meta charset="utf-8" />
    <title>Programmation
    </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
      .gauche{
        float: left;

      }
      .droite{
        float: right;
      }
      .events{
        display: inline-block;
      }
      .event-date{
        margin:4px;
        text-align:left;
      }
      .event-item{
        display: inline-block;
        vertical-align: top;
      }

      .event-item > .image{
        display:inline;
        width:40%;
      }

      .event-item .description{
        width:60%;
      }
      .event-item > .image > figure > img{
        max-width:200px;

      }

      .description{
        font-style: italic;
      }
    </style>
  </head>

  <body> 
    <h1>
      Programmation 
    </h1>  
    <div class="events">
      <div class="event-date">
        <h1> 
          <a href="billeterie.html"  target="_blank" > Samedi 
          </a> 
        </h1>  
      </div>
      <div class="event-item">
        <div class="description gauche">
          <h2> 
            <a href="https://fr.wikipedia.org/wiki/Nolwenn_Leroy"  target="_blank" >
              Nolwenn Leroy 
            </a> 
          </h2>
          <p>  Chanteuse née le 28 septembre 1982 à Saint-Renan dans le Finistère. 
            Elle a gagné la deuxième saison de la Star Academy et détient maintenant 7 albums. 
            C'est également la marraine de la Fondation Abbé-Pierre et est membre des Enfoirés depuis 2006.  
          </p> 
        </div>
        <div class="image droite">
          <figure> 
            <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Nolwenn_Leroy_2011_2.jpg" /> 
          </figure> 
        </div>

      </div>

      <div class="event-item">
        <div class="description droite">
          <h2> 
            <a href="https://fr.wikipedia.org/wiki/Nolwenn_Leroy"  target="_blank" >
              Nolwenn Leroy 
            </a> 
          </h2>
          <p>  Chanteuse née le 28 septembre 1982 à Saint-Renan dans le Finistère. 
            Elle a gagné la deuxième saison de la Star Academy et détient maintenant 7 albums. 
            C'est également la marraine de la Fondation Abbé-Pierre et est membre des Enfoirés depuis 2006.  
          </p> 
        </div>
        <div class="image gauche">
          <figure> 
            <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Nolwenn_Leroy_2011_2.jpg" /> 
          </figure> 
        </div>

      </div>


    </div>
  </body>

</html>


NB: Là .. tu peux voir mon code indenté .....
L'indentation, c'est le "décallage" ( avec des espaces ou des tabulations...) qui permet de voir à quel bloc html appartiennent tels ou tels éléments ... ou quelle ligne de "code" css se trouve dans quoi ...
Bref, je te laisse relire les définitions(certainement plus précises, et plus claires que tu pourras trouver sur internet) concernant l'indentation en programmation.


Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 633
Vu que tu as déjà posté une autre question ... pense à mettre celle-ci en RESOLUE.
Merci.