Partage

Responsive design

18 juillet 2018 à 15:02:28

Salut à tous, je suis en train de faire un site et j'aimerai que le design soit un minimum responsive. Je veux dire par la que si l'utilisateur affiche le site sur une moitié d'ecran il est un truc correct. Pour la taille des pages ça me semble bon. Mon probleme se situe au niveau de mon header et notamment du menu. La taille de mon header est bien 'responsive' (je suis toujours à 85% de la taille de la page). Mais le contenu du header lui ne change jamais de taille, donc tout devient tres moche (je dis pas que c'est sublime normalement :lol: )

Voici les images en page ecran entoer et demi ecran (je precise que mon ecran doit avoir 1500 pixel en largeur environ)

Alors oui j'ai pris le menu frogweb :pirate: , j'en ai fait un qui me plaisait pas trop, j'avais des décalages lors du déroulement.

Je vous met le code de la page (le debut avec le header du moins) ainsi que les css

Code de la page (tiré du code source directement)

<!DOCTYPE html >
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="accueil.css" />
    <link rel="stylesheet" href="../Menu/entete.css" />
    <link rel="stylesheet" href="../Menu/aside.css" />
    <link rel="stylesheet" href="../Menu/pieddepage.css" />
    <title>Titre de la page</title>
  </head>
  <body>
    <div id="bloc_page">
      <header>
        <div id="titre_principal">
          <div id="logo">
            <img src="../images/logo.gif" alt="Logo de la cave" />
            <h1>
              Cave des vignerons de Montfrin
            </h1>
          </div>
          <h2></h2>
        </div>
        <div id=connexion>
          <form action='http://localhost/Cave/Accueil/accueil.php' method='post'>
            <label><input type='email' name='email' placeholder='votre@mail.com' id='champ'></label>&nbsp;&nbsp;&nbsp;&nbsp;<label><input type='  password' name='password' placeholder='  •••password•••' id='champ'></label>
            <br/>
              <div id='ligne2'>
                <button id='button_login'>Se connecter</button>&nbsp; &nbsp;<a href='' id='forgot_pass'>Mot de passe oublié ?</a>&nbsp;<a href='../Formulaire/register.php' id='new_user'>Nouveau ? Pas encore inscrit ?</a>
              </div>
          </form>
        </div>
        <nav>
          <ul id="menu-demo2">
            <li>
              <a href="../Accueil/accueil.php">Accueil</a>
              <ul>
                <li>
                  <a href="#">lien sous menu 1</a>
                </li>
                <li>
                  <a href="#">lien sous menu 1</a>
                </li>
                <li>
                  <a href="#">lien sous menu 1</a>
                </li>
                <li>
                  <a href="../Accueil/accueil.php#horaire">Nos horaires d'ouverture</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="../Histoire/histoire.php">Notre histoire</a>
              <ul>
                <li>
                  <a href="#">Lien sous menu 2</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 2</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 2</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 2</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="../Vignoble/vignoble.php">Notre Vignoble</a>
              <ul>
                <li>
                  <a href="#">lien sous menu 3</a>
                </li>
                <li>
                  <a href="#">lien sous menu 3</a>
                </li>
                <li>
                  <a href="#">lien sous menu 3</a>
                </li>
                <li>
                  <a href="#">lien sous menu 3</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="../Vins/vins.php">Nos Vins</a>
              <ul>
                <li>
                  <a href="#">Lien sous menu 4</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 4</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 4</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 4</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="../Vins/vins.php">Boutique</a>
              <ul>
                <li>
                  <a href="#">Lien sous menu 4</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 4</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 4</a>
                </li>
                <li>
                  <a href="#">Lien sous menu 4</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
      <div id="banniere_image"></div>
      <section>
        <article>
          <div class="container"></div>
          <h2 id="horraire">
            Horraire d'ouverture
          </h2>
          <ul>
            <li>
              <strong>Lundi</strong>
              <i>
                de 9h00 à 12h00 et de 14h00 à 18h00
              </i>
            </li>
            <li>
              <strong>Mardi</strong>
              <i>
                de 9h00 à 12h00 et de 14h00 à 18h00
              </i>
            </li>

Avec son CSS

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */

body
{
    background-color: #FFFFF0 /* #6D071A */;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: white;
    behavior:url("csshover.htc"); /* fichier pour le menu deroulant*/
}

#bloc_page
{
    width: 85%;
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Header */


/* Espacement pour visibilité du header */
body{
    margin-top: 200px;
}

/* Bannière */

#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/vigne.jpg') no-repeat;
    background-size: 100%;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

et le code css de l'entete (ou on retouvre entre autre le code css du menu venant de frogweb)

header
{
    background: url('../Images/raisin.jpg') repeat-x bottom;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background-color: white /*purple*/;
    /* Ajout pour test */
}

header{
    position: fixed;
    top:0px;
    left: 7.5%;
    right: 7.5%;
    z-index: 1000;
}

body{
    margin-top: 200px;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2em;
    font-weight: normal;
    margin: 0px 0px 20px 10px; /* top left bottom right */ 
    background-color: white/*yellow*/;
    color: #6D071A;
    padding-bottom: 10px;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img
{
    width: 109px;
    height: 80px;
}



/* Partie connexion */
div #connexion{
border-radius: solid black;
position: absolute;
top: 10px;
right: 10px;
color: black;   
}

div #champ{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid blue;

}

#ligne2{
    position:relative;
    padding-top: 5px;
}

#forgot_pass{
    font-size: 0.7em;
}

#new_user{
    font-size: 0.7em;
}


div #button_login{
    border:none;
    color:red;
    background-color: white;
    border: 2px solid red;
}

div #button_login:hover{
    color:white;
    background-color: red;
    border: 2px solid black;
}

nav{
    position: absolute;
    right:20px;
    bottom: 10px;
    background-color: black;
    min-width: 400px;

}

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
font-size: 1em;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute; /* ne pas passer en relative, sinon le menu remonte au survol*/
z-index: 1000;
max-height:0; /*cache les sous menus*/
left: ;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}

#menu-demo2 li:nth-child(4){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}

#menu-demo2 li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#2A2333;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#9F391A;
}
#menu-demo2 li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#CFFF6A;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

Alors d'apres ce que j'ai compris sur mes recherches regler les tailles en % sur le CSS n'est pas forcement la meilleur option ( et 100% correspond au remplissage totat de l'epace accordé, qui depend des élements parent) Corrigez moi si je me trompe. J'ai cependant quand meme trster de regler la taille de ma balise <nav> avec des pourcentage mais meme resultat. J'ai alors tester avec des em et la aussi meme choses

Quelqu'un aurait-il une astuce pour que je puisse adapter mon site si une personne utilise 50% de son ecran par exemple.

J'ai aussi un peu ce probleme de taille lorsque je regarde en "version téléphone" sur google chrome

Merci à vous

Le plus souvent la cause du bug est situé devant l'écran ;)

Frogweb

18 juillet 2018 à 15:11:54

Salut,

on a plutôt coutume de faire un menu burger pour les mobiles.
La seule chose que tu peux faire c'est diminuer le font-size des <li> (ligne 117) et le padding des <a> (ligne 202).
Mais tôt ou tard ça cassera.

Et oui, utiliser les % n'est pas forcément la bonne idée. D'ailleurs c'est aussi la cause de ton problème.
Tu as une marge assez importante de chaque côté de ta page en mode "demi-ecran".
Tu utiliserait max-width tu gagnerait de la place pour ton menu. Ensuite, juste un petit padding pour ne pas que ce soit collé non plus.

PS : c'est marrant ça me dit quelque chose ce menu...

-
Edité par Frogweb 18 juillet 2018 à 15:14:16

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Mewen_bzh

18 juillet 2018 à 15:15:11

Salut,

Il ne manquerait pas une balise meta viewport dans ton HTML par hasard ?

Je ne réponds pas aux messages privés.

Frogweb

18 juillet 2018 à 15:18:14

Mewen_bzh a écrit:

Salut,

Il ne manquerait pas une balise meta viewport dans ton HTML par hasard ?

En tous cas ce n'est pas la cause du problème.
(et ce n'est pas nécessaire si tu n'utilise pas les media-queries).

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

QuentinVidal5

18 juillet 2018 à 15:24:36

Mewen c'est tres fortement probable, même sur! Je ne connais pas cette balise du tout en fait, je vais de suite voir a quooi elle sert et la rajouter.

Frogweb : Ahaha oui, je chercher a reosudre le probleme de mon menu quand je suis tomber sur un topic donnant un lien avec des exemples de menus. Et le que vois-je, une version de ce que j'imagine dans ma tete. (Sur mon menu lors du deroulement les sous menu etait décalés d'une tabulation, ça rendait très bof à mon gout).

J'essai de m'anipuler tous ces padding et font-size pour voir ce que j'arrive à en faire.

Pour ce qui est du mobile ce n'est pas le but premier du site pour l'instant, voir meme tres secondaire..(apres si j'arrive à faire un truc potable tant mieux)

Merci beaucoup pour vos réponses

-
Edité par QuentinVidal5 18 juillet 2018 à 15:25:05

Le plus souvent la cause du bug est situé devant l'écran ;)

Pickles

18 juillet 2018 à 15:27:07

Trop rapide FrogWeb

En effet si tu n'utilise pas les médias queries, inutile d'y mettre la ligne du viewport mais dès que l'on parle de responsive design tu auras surement des media queries quelque part

Développeur FrontEnd | Site CV / Site PRO

QuentinVidal5

18 juillet 2018 à 15:39:03

Ohlala des medias queries :waw: encore un truc que je vais devoir apprendre

L'ajout de la balise viewport à quand meme arranger la vue sur les portables ( A cas ou certaines personnes se demande comment je fais, c'est google chrome qui me le permet, vous faites inspecter élements puis ctrl+shift+M pour passer en vu mode portable, et vous pouvez meme choisir lparmi certains modèles de téléphone ensuite)

Le plus souvent la cause du bug est situé devant l'écran ;)

Frogweb

18 juillet 2018 à 15:39:45

Pickles a écrit:

Trop rapide FrogWeb

En effet si tu n'utilise pas les médias queries, inutile d'y mettre la ligne du viewport mais dès que l'on parle de responsive design tu auras surement des media queries quelque part

C'est pas faux.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

exen

18 juillet 2018 à 15:53:01

Bonjour,

D'un autre coté pleins de fichiers CSS, je ne sais pas si c'est très bon, quand au medias queries c'est une solution miracle, si tu veut en savoir plus tu peut déjà regarder ici :

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-le-responsive-design-avec-les-media-queries

Compos sui.

Frogweb

18 juillet 2018 à 15:53:32

QuentinVidal5 a écrit:

Ohlala des medias queries encore un truc que je vais devoir apprendre

Pas de panique, ça n'a rien de difficile. ça reste de la CSS.

Je te donne un exemple, avec un élément qui fait 500px de large sur écran "normal" et 300px sur un écran qui faut au maximum 500px de large :

monElement {
    width:500px;
}
@media all and (max-width: 500px) {
    monElement {
        width:300px
    }
}

Tu vois, rien de sorcier.
Par contre du coup, la meta viewport est indispensable.

Quelque chose comme ça à mettre dans le <head> :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes" />

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

QuentinVidal5

18 juillet 2018 à 18:25:58

Apprendre le medias queries ne me dérange pas , ça fera une ligne de plus sur le CV

Merci beaucoup pour les sites et les examples. Je vais bidouiller avec tout ça pour essayer d'en sortir un truc joli

Exen les différent fichier CSS c'est pour eviter de copié coller les code css des parties incluses dans toutes mes pages dans celui de chaque page. J'ai pas trouver d'autre moyen, meme s'il doit exister un truc que je ne connais, en meme temps je connais pas enormémentde chose... :lol:

-
Edité par QuentinVidal5 18 juillet 2018 à 18:31:26

Le plus souvent la cause du bug est situé devant l'écran ;)

exen

18 juillet 2018 à 19:53:43

En fait il y a un ordre de priorité quand tu pose un fichier css au dessus d'un autre.

au passage vu que je perle de priorité je me permet de poser cet article assez intéressent

https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations/

Compos sui.

QuentinVidal5

19 juillet 2018 à 10:26:38

Merci beaucoup pour le liens du cours exen, je pense qu'il y a à peu prés tout ce qu'il me faut, en tous cas pour l'instant. Merci aussi pour le lien sur le poids des déclaration en css, je me doutais qu'il y avait un fonctionnement du type, mais j'avais aucune idée de comment ça marchait, je n'ai pas rencontré de problème pour l'instant, surement un peu de chance :ange: .

En ce qui concerne mes multiples déclarations CSS, normalement j'ai fait en sorte que rien ne soit écrit dans 2 CSS différent. Je veux dire par la que mon le css de mon entete est défini uniquement dans entete.css, de même pour le pied de page (l'aside je l'est viré faut que je lève le css, ça par contre c'est un oubli) ensuite je définis le CSS de "la page" (j'entend par la la partie variable entre les pages), ici accueil.css . J'ai pas trouver de moyen pplus simple, sinon ile me faut faire des copié collé de code css à la creation de chaque page.

Merci beaucoup Frogweb pour les explications et l'exemple. je vais essayer d'appliquer tout ça pour rendre ce menu parfait pour les petites pages (il l'est déja sur une taille normal)

Une petit bout de code au cas ou des personnes lisant ce topic (debutant comme moi) voudrait tester le fonctionnement. J'espere que ça pourra vous éviter quelque prise de tete

Une partie html simple

<!DOCTYPE html>
<html>
<head>
	<title>Test Media</title>
	<link rel="stylesheet" type="text/css" href="media.css">
</head>
<body>
	<div id="bloc_page">

	<h1 id="titre">Grand test</h1>
		<p id='premier'> Maintenant on va voir si ça marche</p>
		<p id="second"> Normalement ça change quand on rétrécit l'écran</p>

	</div>
</body>
</html>

Et le CSS pour modifier, mais attention!!!

#bloc_page
{
    max-width: 1500px;
    min-width: 400px;
    height: 1000px;
    margin-left:100px;
    margin-right:100px;
    color:red;
    background-color:blue;
}

@media screen and (max-width: 750px)

{
	#bloc_page{
		background-color: red;
		margin-left: 0px;
	}
	h1{
		color:pink;
	}
    p
    {
        color: white; 
        background-color: black;
        font-size: 1.2em;
    }

}

Sur cet exemple j'ai des margin left et right à 100px de base. Lorsque la page passe en dessous 750px de largeur. Les donnes du #bloc_page qui ne sont pas réecrites sont conservées ( il n'y a pas de remise à zero), il faut donc bien pensez à tous redéfinir!! (en tous cas tout ce qui peut changer)

En retrcissant vous devriee donc voir le margin left disparaitre et le droit est conserver

Merci beaucoup à vous tous.

Etant donné que je pense avoir tous les éléments pour resoudre mon probleme je passe le topic en résolu!! :soleil:

-
Edité par QuentinVidal5 19 juillet 2018 à 16:22:42

Le plus souvent la cause du bug est situé devant l'écran ;)