Site responsive

12 octobre 2018 à 18:35:22

Bonjour, alors voilà je suis en train de faire un site html/css pour un projet en iut info, ma question c'est comment pourrai-je rendre mon site responsive, au niveau de la nav-bar ainsi qu'au niveau de la section, j'aimerai que lorsque que je réduis la fenêtre le texte qui est sur la hero image suit aussi. Voilà mon code html et css. Merci pour votre aide

*{
  padding: 0;
  margin:0;
}


body{
  background-color: grey;
}



header{
  width: 100%;
  background-color: #202020;
  display: block;
  position: fixed;
  top: 0;
  height: 10%;
  overflow: visible;
  z-index: 10;
}

.logo{
  width: 10%;
  display: inline-block;
  position: relative;
  top: 0;
  left: 15%;
  padding-left: 1%;
  padding-right: 1%;
}

.nav{
  position: relative;
  padding: 0;
  width: 60%;
  left: 30%;
  display: inline-block;
  position: absolute;
  margin-top: 1.5%;
  text-align: right;


}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 1.1em 1.2em;
    text-decoration: none;
    float: left;
    font-weight: bold;
    font-size: 100%;
}

li a:hover:not(.accueil) {
  background-color: #282828;
}

.accueil {
    background-color: #353535;
}

li a:hover:not(.spoutnik) {
  background-color: #282828;
}

.spoutnik {
    background-color: #353535;
}

li a:hover:not(.apollo8) {
  background-color: #282828;
}

.apollo8 {
    background-color: #353535;
}

li a:hover:not(.apollo11) {
  background-color: #282828;
}

.apollo11 {
    background-color: #353535;
}

li a:hover:not(.spoutnik) {
  background-color: #282828;
}

.spoutnik {
    background-color: #353535;
}


section{
  width: 75%;
  display: block;
  margin: auto;
  background-color: rgba(0,0,0,0.85);
  
}

figcaption{
  margin-top: 5%;
}

.box-center{
  display: inline-block;
  margin-top: 7%;
  width: 100%;
  background-color: rgba(0,0,0,0.5);

}


.Desc{
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 15%;
  text-align: center;
  background-color: rgba(0,0,0,0.5);
  width: 50%;
  font-family: 'Hind Madurai', sans-serif;

}

.text1{
  font-size: 300%;
  font-weight: bold;
}

.text2{
  margin-top: 1%;
  font-size: 150%;
}

#miniature{
  color: white;
  margin-top: 20%;
  position: relative;
  font-family: 'Hind Madurai', sans-serif;
}


.miniature1{
  margin-top: 7%;
  margin-left: 5%;
  margin-bottom: 10%;
  display: inline-block;
  position: relative;
  text-align: center;
  font-weight:bold;
  font-size: 150%;
  text-indent: 0;

}


.miniature2{
  margin-left: 10%;
  display: inline-block;
  position: relative;
  text-align: center;
  font-weight:bold;
  font-size: 150%;
}

.miniature3{
  margin-left: 10%;
  display: inline-block;
  position: relative;
  text-align: center;
  font-weight:bold;
  font-size: 150%;
}

.miniature4{
  margin-left: 10%;
  display: inline-block;
  position: relative;
  text-align: center;
  font-weight:bold;
  font-size: 150%;
}



footer{
  background-color: black;
  width: 100%;
  margin: auto;
  color: white;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .section {
  padding-top: 100px;
}

/* DEUXIEME PAGE */

.contenu{
  color: white;
  font-size: 20px;
  margin-top: 10%;
  margin-bottom: 10%;
  font-family: 'Hind Madurai', sans-serif;
}

<!DOCTYPE html>
<html>
<head>
  <title>La conquête lunaire</title>
    <meta charset="utf-8">
    <meta charset="ASCII">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="icon" type="image/png" href="img/dear-moon.png" /> 
    <link href="https://fonts.googleapis.com/css?family=Hind+Madurai" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body background="img/506867.jpg">




  <header>
    <a href="index.html">
    <img src="img/logo.png" class="logo" alt="logo"></img>
    </a>

    <nav class="nav">
      <ul>
        <li><a href="dearmoon.html">DEAR MOON</a></li>
        <li><a href="apollo11.html">APOLLO 11</a></li>
        <li><a href="apollo8.html">APOLLO 8</a></li>
        <li><a href="spoutnik.html">SPOUTNIK</a></li>
        <li class="accueil"><a href="index.html">ACCUEIL</a></li>
      </ul>
    </nav>
  </header>




  <section>
    <div class="box-center">

      <img class="Hero" src="img/hero-accueil.jpg" alt="hero1" style="width: 100%">

      <div class="Desc">

        <p class="text1">DÉCOUVREZ LA CONQUÊTE LUNAIRE ...</p>
        <p class="text2">Et ses grandes missions ...</p>

      </div>

    </div>  

    <div id=miniature>

      <figure class="miniature1">
      <p>
        <a href="spoutnik.html"> <img src="img/spoutnik.png" width="200" height="200" alt="spoutnik"></a>
      <figcaption>SPOUTNIK</figcaption>
      </figure>


      <figure class="miniature2">
      <p>
        <a href="apollo8.html"><img src="img/apollo-8.png" width="150" height="200" alt="apollo8">    </a>
      <figcaption>APOLLO 8</figcaption>
      </figure>


      <figure class="miniature3">
      <p>
        <a href="apollo11.html"><img src="img/apollo-11.png" width="150" height="200" alt="spoutnik"> </a>
      <figcaption>APOLLO 11</figcaption>
      </figure>


      <figure class="miniature4">
      <p>
        <a href="dearmoon.html"><img src="img/dear-moon.png" width="200" height="200" alt="dear-moon"> </a>
      <figcaption>DEAR MOON</figcaption>
      </figure>

    </div>

  </section>




  <footer>

    <h3>Copyright &copy; 2018 NGUYEN, CROS, WU France All rights reserved.</h3>

  </footer>





</body>
</html>

AbcAbc6

12 octobre 2018 à 18:50:59

Bonjour, regarder du coté des media queries, voir le cours HTML/CSS si vous ne savez pas ce que c'est ou via votre moteur de recherche favoris.

Quelques remarque votre code HTML n'est pas valide passer votre code au validateur pour voir vos erreurs https://validator.w3.org/ notamment l'attribut background du body est obsolète.

Ligne 21 la balise </img> n'existe pas. Et la ligne 6 est en trop.

Dans la balise <figure> le paragraphe est inutile, ce n'est pas une portion d'un texte dans ce cas, ce n'est sémantiquement pas correct.

Ligne 1 à 4 du CSS c'est NON. A ne pas utiliser, ce n'est pas la peine de supprimer toute les marges des éléments même ceux qui n'en on pas. Faite cela au cas par cas.

Pour les class miniature2 miniature3 miniature4 Vous avez de la redondance dans votre CSS, comme les 3 class ont les mêmes propriétés pourquoi ne pas utiliser une seul class. Dans le cas ou plusieurs class ont les même propriété il est possible de les écrire en séparent le sélecteur de class par une virgule.

L210 CSS inutile => pas de width: 100% pour un block. Lire https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

-
Edité par AbcAbc6 12 octobre 2018 à 18:56:27

iCl3mS

13 octobre 2018 à 22:06:36

merci pour la réponse, j'ai modifié mon site pour qu'il soit responsive mais il y a un probleme: je peux me déplacer vers la droite et on peut voir que l'hero image de prend pas toute la largeur de la page, voici pour code:

<!DOCTYPE html>
<html>
<head>
	<title>La conquête spatiale | Accueil</title>
</head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<body>

<header>

	<div id="logo">

	<img src="img/logo.png" alt="Logo" class="logo">

	</div>

	<input type="checkbox" id="nav-toggle" class="nav-toggle">

	<nav>
		<ul>
			<li class="current"><a href="index.html">Accueil</a></li>
			<li><a href="spoutnik.html">Spoutnik</a></li>
			<li><a href="#">Apollo8</a></li>
			<li><a href="#">Apollo11</a></li>
			<li><a href="#">DearMoon</a></li>
		</ul>
	</nav>

	<label for="nav-toggle" class="nav-toggle-label">
		<span>
			
		</span>
	</label>

</header>


<section class="home-hero">
	<div class="container"></div>
		<h1 class="title">Découvrez la conquête lunaire ...
		<span>Et ses grandes missions ...</span></h1>
	</div>
</section>

<section id="boxes">
	<div class="container">
		<div class="box">
			<img src="img/spoutnik.png">
			<h3>Mission Spoutnik</h3>
			<p>Les débuts de la conquête lunaire.</p>
		</div>
		<div class="box">
			<img src="img/apollo-8.png">
			<h3>Mission Apollo 8</h3>
			<p>La mission des Etats-Unis.</p>
		</div>
		<div class="box">
			<img src="img/apollo-11.png">
			<h3>Mission Apollo 11</h3>
			<p>Un grand pas pour l'Humanité.</p>
		</div>
		<div class="box">
			<img src="img/dear-moon.png">
			<h3>Projet Dear Moon</h3>
			<p>Des artistes sur la lune.</p>
		</div>
	</div>
	
</section>

<footer>
	<h3>&copy;</h3>
</footer>

</body>
</html>

body{
	margin: 0;
	font-family: arial, sans-serif;
	text-align: center;
	background-image: url(img/background.jpg);
}

img {
	max-width: 100%;
	height: auto;
}

content {
  height: 200vh;
  width: 1200px;
  background-color: #333;
  background-blend-mode: multiply;
  background-size: cover;
  display: grid;
  margin: auto;
}

/* Header */

.logo{
	width: 150px;
	height: 150px;
	margin-top: 1em;
}

/* bar de navigation */

header{
	background-color: #202020;
	color: white;
	text-align: center;
	position: fixed;
	width: 100%;
	z-index: 100;

}
/* pour enlever la carré pour cocher */
.nav-toggle{
	display: none;
}
/* déplace le menu à gauche*/
.nav-toggle-label{
	position: absolute;
	top:0;
	left: 0;
	margin-left: 1em;
	height: 100%;
	/* remplit tout l'espace */
	display: flex;
	align-items: center;
}

/* pour créer l'icone du menu */
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
	display: block;
	background: white;
	height: 2px;
	width: 2em;
	border-radius: 2px;
	position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after{
	content: '';
	position: absolute;
}

.nav-toggle-label span::before{
	bottom: 7px;
}


.nav-toggle-label span::after{
	top: 7px;
}

nav{
	position: absolute;
	text-align: left;
	top: 100%;
	left: 0;
	width: 100%;
	/* pour créer l'animation déroulant */
	transform: scale(1, 0);
	transform-origin: top;
	transition: transform 300ms ease-in-out;
}

nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li{
	margin-bottom: 1em;
	margin-left: 1em;
}

nav a{
	color: white;
	text-decoration: none;
	font-size: 1.2rem;
	text-transform: uppercase;
	opacity: 0;
	/* animation pour l'opacité */
	transition: opacity 150ms ease-in-out;
}

nav a:hover{
	color: grey;
}
/* ~ lit nav-toggle et nav, pour faire le menu déroulant */
.nav-toggle:checked ~ nav{
	transform: scale(1,1);
}

.nav-toggle:checked ~nav a{
	opacity: 1;
	transition: opacity 250ms ease-in-out 250ms;
}

/* enleve le menu pour le téléphone quand c'est supérieur à 800 px */
@media screen and (min-width: 800px){
	.nav-toggle-label{
		display: none;
	}

	header{
		display: grid;
		/* sépare le header et met le logo à gauche */
		grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
	}

	#logo{
		/* le logo part se trouve à la colonne 2 */
		grid-column: 2 / 3;
		position: relative;
		width: 200px;
		height: 100px;
	}
	/* le menu se trouve à la collone 3 */
	nav{
		all: unset;
		grid-column: 3 / 4;
		display: flex;
		justify-content: flex-end;;
		align-items: center;
	}

	nav ul{
		display: flex;
		justify-content: flex-end;
	}

	nav li{
		margin-left: 1em;
		margin-bottom: 0;
	}

	nav a {
		opacity: 1;
	}


}

/* Header de l'accueil */
.container{
	width: 95%;
	margin: auto;
}
.home-hero {
	background-image: url(img/home-hero.jpg);
	padding: 10em 0;
	width: 100%;
	height: 100%;
	margin-top: 6em;
	display: inline-block;
	background-size: cover;
	background-position: center;
}

.title{
	font-size: 1.5em;
	color: white;
}

.title span{
	display: block;
	font-weight: 500;
}

/* Reponsive de l'hero image */

@media (min-width: 800PX) {
	.title{
		font-size: 2.5rem;
	}
	.home-hero{
		width: 100%;
	}
	.home-spoutnik{
		width: 1200px;
	}
	.contenu{
		text-align: center;
	}


}

/* Les miniatures */

#boxes{
	margin-top: 200px;
	display: inline-block;
	margin-bottom: 200px;
	margin-left: 5%;

}

#boxes .box{
	float: left;
	width: 12%;
	padding: 90px;
	text-align: center;
	color: white;
}

#boxes .box img{
	width: 200px;
}

#boxes .box h3{
	font-size: 30px;
	margin-top: 15px;
}

#boxes .box p{
	margin-top: 15px;
}
/* media queries pour les miniatures de la page d'accueil */

@media (max-width: 800px) {

	#boxes .box{
		float: none;
		text-align: center;
		width: 100%;
	}

	#boxes .box img{
		width: 150px;
	}
}
/* le footer */

footer{
	padding: 20px;
	margin-top: 20px;
	color: white;
	width: 100%;
	background-color: #252525;
	display: block;
}

/*DEUXIEME PAGE -------------------------------------------------------------------*/

.home-spoutnik{
	background-image: url(img/hero-spoutnik.jpg);
	padding: 10em 0;
	width: 100%;
	margin-top: 6em;
	height: 100%;
	display: inline-block;
	background-size: cover;
	background-position: center;
}

.contenu {
	margin-top: 200px;
	margin-bottom: 200px;
	margin-left: auto;
	margin-right: auto;
	bottom: 200px;
	width: 1200px;
}

.contenu p{
	color: white;
}

Site responsive

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Site responsive

Site responsive

Supprimer

Modérer

Signaler le message aux modérateurs