Partage

[Débutant] Besoin d'aide pour la taille du site.

8 août 2017 à 16:18:31

Coucou.

Je suis entrain de faire un "mini-site" pour pouvoir m'inscrire à une formation et je suis confronté à un soucis, lorsque j'agrandis ma page internet (CTRL + Molette up/down), les éléments <div> contenant mon contenu se rentre dedans et il n'y a pas de barre déroulante horizontale en bas de la page lors d'un très grand agrandissement.

Je vous mets le code de la page 1 de mon site ci-dessous.

<!DOCTYPE html>
<html>
  <head>
  <title>Léo.</title>
  
	<link rel="stylesheet" type="text/css" href="mainp1.css">
	<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  
  </head>
  
  <body>

  <header> <!-- Header Page -->
	<div id="hdtext">
	  <img src="dd.png">
	</div>
  </header>
  
  <nav class="menu-top"> <!-- Menu Navigation -->
	<ul> <!-- Bouton de navigation -->
	<li class="butn"> <a href="#">Accueil</a></li>
	<li class="butn"> <a href="jeuxp2.html"> Jeux </a></li>
	<li class="butn"> <a href="ytp3.html">YouTube</a></li>
	<li class="butn"> <a href="contactp4.html">Contact</a></li>
  </ul>
  </nav>
  
  <div class="p1">
  <div class="descp1">
	<h1 id="desp1">Description</h1>
	
	<p id="desp1p1">des1
	</p>
  </div>
  <div class="actu1">
    <h1 id="actu1">Actualités</h1>
	<p id="actu1p1">actu1
	</p>
  </div> 
  <div class="proj">
	<h1 id="prop1">Projets</h1>
	<p id="prop1p1">prop1
	</p>
	
  </div>
 
  </div>
  
  
  
  
  <footer> <!-- Footer Page -->
	<p id="copyright"> &copy;2017</p>
 </footer>
  </body>
</html>

pour le HTML, et pour le CSS ci-dessous

* {    /* All */
	font-family: "Josefin Sans";
	border-radius: 5px;
}

html { 
	background-color: #A9A9A9;
}

header { /* Upper Page */
	text-align: center;
	color: GhostWhite;
	background-color: #303030;
	height: 100px;
	width: 100%;
	border-style: solid;
	border-width: 2px 0;
}

nav.menu-top{ /* Nav Menu */
	text-align: center;
}

nav.menu-top ul li.butn{ /* Bouton Nav */
	list-style: none;
	display: inline-block;
	
}

nav.menu-top ul li.butn a{ /* Liens Nav */
	color : GhostWhite;
	background-color: #303030; /* color */
	text-decoration: none;
	font-size: 20px;
	padding: 10px 20px;
	border-style: solid;
	border-width: 2px 0;
}

nav.menu-top ul li.butn:hover a{ /* Passage souris L.Nav */
	color: MintCream;
	background-color: DimGrey; /* color */
	transition: 0.3s all;
}

footer #copyright{ /* Bottom Page */
	text-align: center;
	color: GhostWhite;
	background-color: #303030; /* color */
	font-size: 15px;
	height: 20px;
	width: 100%;
	border-style: solid;
	border-width: 2px 0;
}

/* ^ Commun all page pour header/nav/footer */

div.p1{ /* Div block */
	display: block;
	overflow: auto;
}

/* v = Début Block Description */

div.descp1{
	float: left;
	color: GhostWhite;
	background-color: Grey;  /* color */
	width: 400px;
	height: 700px;
	margin-top: 25px;
	margin-left: 200px;
	border-style: solid;
	border-width: 2px 0;
}

#desp1{
	text-align: center;
	background-color: #303030;  /* color */
	margin-top: -2px;
	border-style: solid;
	border-width: 2px 0;
}

#desp1p1{
		font-size: 18px;
		margin-left: 5px;
		margin-right: 5px;
}

/* ^ = Fin Block Description */
/* v = Block Actus (Upper-right) */

div.actu1{
	float: right;
	color: GhostWhite;
	background-color: Grey;
	width: 400px;
	height: 350px;
	margin-top: 25px;
	margin-right: 200px;
	border-style: solid;
	border-width: 2px 0;
}

#actu1{
	text-align: center;
	background-color: #303030;  /* color */
	margin-top: -2px;
	border-style: solid;
	border-width: 2px 0;
}

#actu1p1{
		font-size: 18px;
		margin-left: 5px;
		margin-right: 5px;
}

/* ^ = Fin Block Actus */
/* v = Block Projets (Bottom Right) */

div.proj{
	float: right;
	color: GhostWhite;
	background-color: Grey;
	width: 400px;
	height: 300px;
	margin-top: 46px;
	margin-right: 200px;
	border-style: solid;
	border-width: 2px 0;
}

#prop1{
	text-align: center;
	background-color: #303030;  /* color */
	margin-top: -2px;
	border-style: solid;
	border-width: 2px 0;
}

#prop1p1{font-size: 18px;
		margin-left: 5px;
		margin-right: 5px;
}

Screen de la page en 100% : http://i.imgur.com/hDFg0Ab.jpg
Screen de la page agrandis (beaucoup) : http://i.imgur.com/RqtR8T0.jpg (je vous mets pas l'image directement car elle est très grande.)

Voilà, je sais pas si vous pouvez m'aider, mais si oui, merci à vous,

Léo.

ldv

8 août 2017 à 16:59:53

Tu veux que ton site soit en responsive ?

Ne jamais penser que vous posez une question idiote !

LéoXo

8 août 2017 à 17:11:23

Je ne sais pas si c'est la réelle définition de "responsive", ce que je souhaite.

Je souhaiterais que les éléments ne s'entrechoc pas lorsqu'on agrandit la page ou qu'on la regarde sur un écran d'une taille différente du miens. Cependant, il n'est pas voué à être consultable sur tablette & mobile dans un premier temps, donc partir sur du responsive me parait beaucoup.

Je pense que ce qui pose problème dans mon CSS à l'heure actuelle est les "px", il faudrait que j'utilise des em ou des % pour (toutes?) mes valeurs en px, mais je ne sais pas trop comment le faire, c'est pour cela que j'ai fais ce sujet.

-
Edité par LéoXo 8 août 2017 à 17:14:00

H1800

8 août 2017 à 17:24:25

Alors c'est du responsive mais que pour la taille de tes appareils !!

Merci d'avance pour votre réponse rapide et pour votre explication

Mr R0b0t

8 août 2017 à 17:37:37

Salut,

Effectivement, quand l'on emploi le mot responsibe pour un site c'est quand ce dernier change de design en fonction de la taille de l'écran/fenetre.

Pour tester les differentes tailles d'écrans il ne faut pas utiliser le zoom (ctrl + molette) mais modifier la taille de ta fenetre.

Tu as déjà un petit coté responsive sur ton site, quand l'on modifie la taille de la fenetre, certain de tes blocs se mettent en colonne. Continue à jouer sur cet effet si tu ne veux pas que tes blocs se "rentrent dedans".

Tu peux egalement donner une valeur maximale à la largeur de ton corp. Si ton site fait 1000px de large, tous les utilisateurs avec un écran supérieur à 1000px auront le meme design.

"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.

H1800

8 août 2017 à 17:46:17

oui exactement!

MR R0b0t a tout expliquer!

Maintenant c'est à toi de te mettre sur ton éditeur de code!

Passez une bonne journée

(demande : si vous avez un peut de temps passez sur mon sujet parce que je n'ai pas eu de réponse lien : https://openclassrooms.com/forum/sujet/convertir-mon-site-a-un-site-wordpress merci d'avance )

Merci d'avance pour votre réponse rapide et pour votre explication

LéoXo

8 août 2017 à 17:50:12

Ah, il ne faut pas adapter son site en fonction du zoom/dézoom de CTRL+Molette? Je me prends la tête pour rien alors.

Du coup, je vais devoir utiliser le media queries pour supprimer les float en fonction de la taille d'écran & ça devrait suffire.

Je prends aussi note pour la taille maximale @Mr R0b0t.

Merci à vous pour vos réponses.

H1800

8 août 2017 à 18:28:17

de rien

Merci d'avance pour votre réponse rapide et pour votre explication

pipelette13

8 août 2017 à 19:01:29

Bonjour,

il manque l'attribut ALT pour tes images.

Pour ton inquiétude, il faut travailler sur le viewport du média utilisé si ce n'est pas en core fait.

Voici un lien facile à lire: https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

-
Edité par pipelette13 8 août 2017 à 19:02:06

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean

LéoXo

8 août 2017 à 22:17:06

pipelette13 a écrit:

Bonjour,

il manque l'attribut ALT pour tes images.

Pour ton inquiétude, il faut travailler sur le viewport du média utilisé si ce n'est pas en core fait.

Voici un lien facile à lire: https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

-
Edité par pipelette13 il y a environ 3 heures

Je n'ai pas appris ce qu'était un attribut ALT, je vais donc me renseigner dessus.

Pour ce qui est du viewport, je vais voir, j'ai vu qu'avec le @media dans le CSS, on pouvait gérer ça très facilement. Je vais aller lire ton lien qui a l'air intéressant tout de même. Merci à toi pour ta réponse !

pipelette13

9 août 2017 à 16:30:03

Re,

Cela n'a rien à voir, les @media permettent de modifier une règle CSS (surcharge) selon la taille de la fenêtre du navigateur : détection -> modification.

Pour le viewport, pour faire simple le navigateur se débrouille pour ajuster le contenu de manière cohérente. Lire le lien.

Pour l'attribut alt, il permet entre autre d'afficher un texte au cas ou l'image est introuvable, mais aussi de donner une information textuelle aux non/mal - voyants -> C'est donc très important

Cela fait partie du minimum au niveau de l'accessibilité d'une page web, et les moteurs de recherches en plus d'avoir un code valide la prenne en compte: https://openclassrooms.com/courses/faire-un-site-web-accessible

Sinon oui c'est bien expliqué dans le cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-images-18#/id/r-1609799

De toute façon le validateur officiel en ligne te rappellera à l'ordre en cas d'oublie https://validator.w3.org/

-
Edité par pipelette13 9 août 2017 à 16:45:24

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean

LéoXo

11 août 2017 à 0:07:28

pipelette13 a écrit:

Re,

Cela n'a rien à voir, les @media permettent de modifier une règle CSS (surcharge) selon la taille de la fenêtre du navigateur : détection -> modification.

Pour le viewport, pour faire simple le navigateur se débrouille pour ajuster le contenu de manière cohérente. Lire le lien.

Pour l'attribut alt, il permet entre autre d'afficher un texte au cas ou l'image est introuvable, mais aussi de donner une information textuelle aux non/mal - voyants -> C'est donc très important

Cela fait partie du minimum au niveau de l'accessibilité d'une page web, et les moteurs de recherches en plus d'avoir un code valide la prenne en compte: https://openclassrooms.com/courses/faire-un-site-web-accessible

Sinon oui c'est bien expliqué dans le cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-images-18#/id/r-1609799

De toute façon le validateur officiel en ligne te rappellera à l'ordre en cas d'oublie https://validator.w3.org/

-
Edité par pipelette13 9 août 2017 à 16:45:24

"Lors de votre venue, vous devez apporter sur une clé USB, un mini-site de 4 pages HTML/CSS reliées entre elles que vous aurez vous-même (attention ce point est très important) élaboré, dans lequel vous pouvez traiter le thème de votre choix, soyez créatifs !"

Après je dois respecter cette règle, donc théoriquement, avec ce que j'ai appris durant l'étape 3 de la candidature, donc je vais éviter de trop en faire. Mais c'est bon à prendre pour le futur.

pipelette13

11 août 2017 à 0:34:42

Ok, mais je ne sais pas ce qu'est le niveau de l'étape 3

Pour la balise alt c'est sûr, si pas de @media pas de viewport. Faire un design fluide alors...

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean

LéoXo

11 août 2017 à 1:01:43

En gros j'ai fais les cours ci-dessous sur Codecademy et un peu de lecture/visionnage sur le net. Je sais pas trop ce que ça représente en terme de niveau, mais je suis débutant dans tout les cas.

-> HTML & CSS, https://www.codecademy.com/learn/learn-html-css

-> JavaScript, https://www.codecademy.com/learn/learn-javascript

-> PHP, https://www.codecademy.com/learn/php

(Je ne sais pas si on peut mettre les liens ici, donc hésitez pas à me dire si jamais).

-
Edité par LéoXo 11 août 2017 à 2:19:02

EmmanuelBeziat

11 août 2017 à 1:13:55

@pipelette13 je sais que je me répète un peu, mais… tu peux carrément mettre ta barre de compétence en html au max.

-
Edité par EmmanuelBeziat 11 août 2017 à 1:44:09

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

pipelette13

12 août 2017 à 11:46:28

Merci rhooManu

Bon je suis passée à intermédiaire, le niveau 3 c'est le tien et je ne l'ai pas .

Si je passe au 3 tu passes au 4 . De plus tu devrais faire parti du staff vu des compétences !

EDIT: le markdown ne passe pas.

-
Edité par pipelette13 12 août 2017 à 11:51:26

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean