Partage

Vérification et problème superposition

Sujet résolu

21 mars 2018 à 11:38:22

Bonjour,

Pour commencer voici mes codes :

Page Html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Plateforme de télémédecine</title>
  <link rel="stylesheet" href="css/main.css">
  <script src="script.js"></script>
</head>
<body>
	<header class="header">
	
	
	</header>

	<div class="menu"> 
<h5>Titre menu</h5> 
<ul> 
<li><a href="page4.html">Lien</a></li> 
<li><a href="page5.html">Lien</a></li> 
<li><a href="page6.html">Lien</a></li> 
<li><a href="page3.html">Lien</a></li> 
<li><a href="page3.html">Lien</a></li> 
<li><a href="page3.html">Lien</a></li> 
</ul> 
</div> 

 <div class="contenu">
  <aside class="chat">
		MESSAGE
		</aside>
		
<aside class="donnee1">
		E-Health
		</aside>
		
		<aside class="donnee2">
		E-Health
		</aside>
  
  <aside class="block1">
      TEST	
  <aside>
  
  <aside class="block2">
      TEST	
  <aside>
  
  </div>
  
  
  <footer class="footer">
  
  </footer>
</body>
</html>

CSS :

body {
	min-height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

html {
	 height: 100%;
}

.header {
	height:100px;	
	top : 0px;
	background-color: #00CCFF;
	}
	
.footer {
	
	height:50px;
	background-color:#00CCFF;
	position: absolute; bottom: 0; left: 0; right: 0;
}	

.menu {
	height : 850px;
	float: right;
	width: 200px;
	background-color : #F55555;
	
}


.block1 {
	
	width:320px;
	height:320px;
	background-color:#FF3300;
	margin-top: 50px;
	margin-left :30px;
	
}

.block2 {
	
	width:320px;
	height:320px;
	background-color:#FF3300;
	margin-top: 350px;
	
}

.chat {
	width:400px;
	height:690px;
	background-color:#CCCCCC;
	position:absolute;
    left: 400px;
}

.donnee1 {
	width:700px;
	height:320px;
	background-color:#CCC666;
	position:absolute;
	left: 900px;

   
}

.donnee2 {
	width: 700px;
	height:320px;
	background-color:#CCC666;
	position:absolute;
    left: 900px;
	margin-top: 375px;
}

Donc voilà j'ai effectué la structure de page. Cependant je voudrai avoir une vérification parce que je suis très débutant. Afin de pouvoir continuer la partie design.

Et je rencontre un problème surement à cause "position:absolute". Ce problème est lorsque je réduit la page cela crée un décalage vraiment pas rès propre.

Si vous avez d'autre conseil je suis aussi preneur.

Merci d'avance.

-
Edité par JOJOKing 21 mars 2018 à 14:28:33

Mewen_bzh

21 mars 2018 à 14:44:11

Bonjour,

Il y a quelques erreurs dans ton HTML, notamment :

- certains aside ne sont pas fermés : je suppose que <aside> en lignes 42 et 46 doivent être remplacées par </aside>,

- la norme voudrait que les scripts soient placées en bas de page, juste avant la fermeture du body.

Ensuite j'ai du mal à voir pourquoi tu as autant de aside ? Au final quel est le corps principal de ton site ?

La présence d'un h5 est sujette à discussion également car tu n'as pas de h1, h2, h3 et h4 avant mais comme je le disais ce point est discutable.

En ce qui concerne le CSS, le position absolute un peu partout est très brutal,c'est comme si tu prenais un missile nucléaire pour tuer un moustique. Tu as un contexte particulier qui justifie d'utiliser cette méthode plutôt qu'une autre plus simple, plus précise, plus responsive et plus moderne ?

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

Lamecarlate

21 mars 2018 à 15:09:16

Bonjour,

> La présence d'un h5 est sujette à discussion également car tu n'as pas de h1, h2, h3 et h4 avant mais comme je le disais ce point est discutable.

Non, ce n'est pas discutable.

On ne démarre pas un livre par la sous-partie : on met un chapitre, puis une partie, puis une sous-partie.

Pour le reste, je suis d'accord : attention à l'absolu, c'est puissant mais difficile à maîtriser, et c'est surtout à utiliser ponctuellement, pas sur tous les éléments. Est-ce qu'on pourrait avoir un schéma de ce que tu cherches à faire ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JOJOKing

21 mars 2018 à 15:43:32

Bonjour,

Merci pour vos réponses !

Mewen_bzh > Merci pour les aside je l'ai ai fermé. Pour les scripts merci pour l'information je corrige.

Pour le résultat "final" voir l'image (pour l'instant c'est du brut et c'est moche mais c'est seulement pour le placement des "blocks")

Oui en effet pour les h5 ... c'était pour tester mais ça sera forcement corriger.

Ahh oui d'accord, en effet un peu violent Non pas vraiment à par de placer des blocs sur une page.

Lamecarlate > En effet pour le h5 cela sera corriger je voulais seulement tester des petits truc avec.

En effet, j'ai du mal à maîtriser les position absolu ^^

Voici une capture de ce que je voudrai, au niveau de la position des blocs.

Lamecarlate

21 mars 2018 à 16:38:00

Merci pour le schéma

Du coup je vois un peu mieux ton besoin, et je te propose :

déjà, de lire l'article https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible pour la gestion header/contenu/footer
ensuite, dans le contenu, pour la séparation avec la zone rouge de droite : https://www.emmanuelbeziat.com/blog/colonne-verticale-sur-toute-la-hauteur-de-page
puis dans le "contenu du contenu" (zone de gauche du contenu) :
-> un élément avec les deux blocs rouges
-> un élément avec le bloc gris
-> et un élément avec les deux blocs dorés
la zone de gauche en question, tu lui ajoutes display: flex, et ça devrait déjà faire quelque chose.

Pour plus d'info sur le modèle flexbox, je t'invite à lire le cours d'OC : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Mewen_bzh

21 mars 2018 à 16:43:44

Une fois n'est pas coutume mais, au vu de ton schéma, je vais contredire Lamecarlate et te pousser à regarder plutôt du côté du module CSS Grid pour disposer tes blocs :

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout

https://www.w3schools.com/css/css_grid.asp

https://css-tricks.com/snippets/css/complete-guide-grid/

https://www.alsacreations.com/article/lire/1388-css3-grid-layout.html

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

Lamecarlate

21 mars 2018 à 16:58:42

Ah, très bonne idée d'aller voir Grid, c'est encore mieux

(j'en suis encore à flex, moi, j'ai du mal à me tenir à jour, mon boulot ne me permet pas forcément d'aller jouer avec les toutes dernières nouveautés)

(et à propos de jouer… http://cssgridgarden.com/#fr )

-
Edité par Lamecarlate 21 mars 2018 à 16:59:15

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JOJOKing

21 mars 2018 à 17:59:42

Merci beaucoup, je regarde ça se soir et je reviens vers vous si je rencontre des problèmes

EDIT :

Bonsoir,

Alors voilà j'ai refais tous avec le module CSS Grip (vraiment pas mal !)

Cependant j'ai énormément de mal à placer mes blocks aux centres.

Voici mes codes :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>TITRE1</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/main.css">

</head>
<body class="container">

  <header class="container-header">TITRE 2</header>
  <main class="container-main">
<div class="wrapper">
  <div class="one">Un</div>
  <div class="two">Deux</div>
  <div class="three">Trois</div>
  <div class="four">Quatre</div>
  <div class="five">Cinq</div>
</div>
  
  </main>
  <aside class="container-menu">menu</aside>
  <footer class="container-footer">Footer</footer>

</body>
</html>

Css :

/* Define grid areas */
.container-header { grid-area: header; }
.container-footer { grid-area: footer; }
.container-main { grid-area: main; }
.container-menu { grid-area: menu; }


.container {
	display: grid;
	grid-template-areas: "header header header"
	                     "main main menu"
	                     "footer footer footer";

	grid-template-columns: 0px 1fr 200px;

	grid-template-rows: 80px 
						1fr 
						50px;

	min-height: 100vh;
}



@media screen and (max-width: 600px) {
	.container {
		grid-template-areas: "header"              
		                     "main"
		                     "menu"
		                     "footer";

		grid-template-columns: 100%;
		grid-template-rows: 80px 
							1fr
							50px 
							50px;
	}
}

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}



/* Custom Styles */

html {
	font-size: 62.5%;
}

body {
	font-size: 1.5rem;
	line-height: 1.6;
	font-family: 'Open Sans';
}

p {
	display: block;
	margin-bottom: 15px;
}

.container-header {
	background-color: #ffdb3a;
	font-size: 2rem;
	font-weight: 700;
	font-style: italic;

	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.container-footer {
	background-color: rgb(100, 100, 100);
	color: #fff;
	font-size: 1.2rem;
	font-style: italic;

	display: flex;
	justify-content: center;
	align-items: center;
}

.container-menu {
	background-color: rgb(230, 230, 230);
	text-align: center;
}

.container-header,
.container-menu,
.container-main {
	padding: 15px;
}


.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 50px;
}
.one {
  grid-column: 1 / 3;
  grid-row: 1/ 4;
    width: 354px;
    height: 354px;
}
.two { 
  grid-column: 1 / 3;
  grid-row: 2;
  width: 354px;
    height: 354px;
}
.three {
  grid-column: 3 / 5;
  grid-row: 1 / 4;
    width: 400px;
    height: 758px;
	
}
.four {
  grid-column: 5;
  grid-row: 1 / 2; 
  width: 750px;
    height: 354px;
}
.five {
  grid-column: 5;
  grid-row: 2  / 3;
   width: 750px;
    height: 354px;
}

Les captures pour comprendre :

Taille des marges pas très propre

Navigateur réduit : Problème de superposition

-
Edité par JOJOKing 21 mars 2018 à 21:40:05

JOJOKing

22 mars 2018 à 20:33:03

Bonsoir,

petite mise à jours css je commence un peu à comprendre le grid XD

J'ai réussi à avoir la page souhaitée cependant lorsque je réduis la page ça dépasse à droite et c'est très moche :

/* Define grid areas */
.container-header { grid-area: header; }
.container-footer { grid-area: footer; }
.container-main { grid-area: main; }
.container-menu { grid-area: menu; }


.container {
	display: grid;
	grid-template-areas: "header header header"
	                     "main main menu"
	                     "footer footer footer";

	grid-template-columns: 0px 1fr 200px;

	grid-template-rows: 80px 
						1fr 
						50px;

	min-height: 100vh;
}



@media screen and (max-width: 600px) {
	.container {
		grid-template-areas: "header"              
		                     "main"
		                     "menu"
		                     "footer";

		grid-template-columns: 100%;
		grid-template-rows: 80px 
							1fr
							50px 
							50px;
	}
}

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}



/* Custom Styles */

html {
	font-size: 62.5%;
}

body {
	font-size: 1.5rem;
	line-height: 1.6;
	font-family: 'Open Sans';
}

p {
	display: block;
	margin-bottom: 15px;
}

.container-header {
	background-color: #ffdb3a;
	font-size: 2rem;
	font-weight: 700;
	font-style: italic;

	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.container-footer {
	background-color: rgb(100, 100, 100);
	color: #fff;
	font-size: 1.2rem;
	font-style: italic;

	display: flex;
	justify-content: center;
	align-items: center;
}

.container-menu {
	background-color: rgb(230, 230, 230);
	text-align: center;
}

.container-header,
.container-menu,
.container-main {
	padding: 15px;
}


.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
   grid-template-columns: 354px 500px 1fr;
   grid-auto-rows: 354px;
   grid-column-gap : 10px;
   grid-row-gap:30px;
  
}

.one {
  grid-column: 1 ;
  grid-row: 1;

}
.two { 
  grid-column: 1 ;
  grid-row: 2;
}
.three {
  grid-column: 2  ;
  grid-row: 1 / 3 ;
}
.four {
  grid-column: 3 / 3;
  grid-row: 1 / 2; 

}
.five {
  grid-column: 3 / 3;
  grid-row: 2  / 2;

}

EDIT : Bonjour, J'ai réussis à régler le problème de fenêtres ! Merci ! Je laisse le sujet ouvert au cas où j'ai encore des questions! Merci beaucoup !

-
Edité par JOJOKing 23 mars 2018 à 9:41:37

JOJOKing

26 mars 2018 à 20:59:39

Bonjour,

Je reviens vers vous j'ai normalement fini mais je rencontre un problème lorsque je passe d'un écran à un autre la taille du site ne s'adapte pas je suppose que c'est à cause des valeurs pixels mais je ne sais pas comment corrigé ça ...

voici le code :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Plateforme Telemedecine</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/peerjs.css">
  <!-- Client -side dependencies -->
    <link rel="stylesheet" href="node_modules/picnic/releases/picnic.min.css">
    <link rel="stylesheet" href="node_modules/picnic/releases/plugins.min.css">
	
    <script src="node_modules/handlebars/dist/handlebars.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
    <script src="js/script.js"></script><span id='error'></span>
</head>
<body class="container">
	<header class="container-header"> 
	<img id="image1" src="img/logo_telemedecine.png" alt="logo"/>
		<div id="connect">
			<h2>ID: <span id="id"></span></h2>
			<input type="text" name="name" id="name" placeholder="Name">
            <input type="text" name="peer_id" id="peer_id" placeholder="Peer ID">
		</div>
			<button id="login">Login</button>	 
		<h1> Plateforme Télémédecine</h1>
		 
	</header>
	
		<div class="container-wrapper">
			<div class="one"><!-- Display the video of the remote peer -->
				<div id="peer-camera" class="camera">
					<video width="300" height="300" autoplay></video>
				</div>
			</div>
			
			<div class="two"><!-- Display video of the current user -->
				<div id="my-camera" class="camera">
					<video width="300" height="300" autoplay></video>
				</div>
			</div>
			
			<div class="three">
				<div id="connected_peer_container" class="hidden">
              Connected Peer:
					<span id="connected_peer"></span>
				</div>
				<div id="chat">
					<div id="messages-container">
						<ul id="messages" style="width: 400px; height: 585px; overflow: auto"></ul>
					</div>
						<div id="message-container">
							<input type="text" name="message" id="message" placeholder="Type message..">
							<button id="send-message">Send Message</button>
							<button id="call">Call</button>
						</div>
				</div>
			</div>
			<div class="four">Quatre</div>
			<div class="five">Five</div></div>
  
	<aside class="container-menu"><h2>MENU</h2><br>
		<ul id="onglets">
			<li><a href="http://peerjs.com/" target=_blank>Peerjs</a></li><br><br>
			<li><a href="https://www.cooking-hacks.com/documentation/tutorials/ehealth-biometric-sensor-platform-arduino-raspberry-pi-medical" target=_blank>E-Health</a></li><br><br>
			<li><a href="http://www.u-pec.fr" target=_blank>U-pec</a></li>
		</ul> <br><br><br>
			<img id="image2" src="img/logo.png" alt="logo"/>
	</aside>
	<footer class="container-footer">© Jonathan BLONDEL - 2018</footer>
	
 <!-- Handlebars template for constructing the list of messages -->
    <script id="messages-template" type="text/x-handlebars-template">
      {{#each messages}}
      <li>
        <span class="from">{{from}}:</span> {{text}}
      </li>
      {{/each}}
    </script>
</body>
</html>

Css :

/* Define grid areas */
.container-header { grid-area: header; }
.container-footer { grid-area: footer; }
.container-menu { grid-area: menu; }
.container-wrapper {grid-area : main;}


.container {
	display: grid;
	grid-template-areas: "header header header"
	                     "main main menu"
	                     "footer footer footer";


	grid-template-rows: 100px 
						1fr 
						50px;

	min-height: 100vh;
}

.container-wrapper {
  display: grid;
   grid-template-columns: 354px 500px 670px;
   grid-auto-rows: 354px;
   grid-column-gap : 80px;
   grid-row-gap:30px;
}

.one {
  grid-column: 1 ;
  grid-row: 1;

}
.two { 
  grid-column: 1 ;
  grid-row: 2;
}
.three {
  grid-column: 2  ;
  grid-row: 1 / 3 ;
}
.four {
  grid-column: 3 / 3;
  grid-row: 1 / 2; 

}
.five {
  grid-column: 3 / 3;
  grid-row: 2  / 2;
}

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


/* Styles */

html {
	font-size: 62.5%;
}

body {
	font-size: 1.5rem;
	line-height: 1.6;
	font-family: 'Open Sans';
}

p {
	display: block;
	margin-bottom: 15px;
}

h1 {
	margin-left : 250px;
	font-size : 5rem;
	
}

h2{
	margin-top : 10px;
	font-weight:bold;	
}

#image1 {
	width : 250px;
	height : 98px;
}

#image2 {
	width : 180px;
	height :180px;
}

.container-header {
	display: flex;
	border-bottom : 5px solid;
	-moz-box-shadow: 2px 2px 5px #aaa; 
    -webkit-box-shadow: 2px 2px 5px #aaa; 

}

.container-footer {
	font-size: 1.2rem;
	font-style: italic;
	display: flex;
	justify-content: center;
	align-items: center;
	-moz-box-shadow: 5px 5px 10px 0px #aaa;
	-webkit-box-shadow: 5px 5px 10px 0px #aaa;
	-o-box-shadow: 5px 5px 10px 0px #aaa;
	box-shadow: 5px 5px 5px 5px #aaa;
 
}

.container-menu {
	text-align: center;
	width: 200px;
	border-top : 1px solid;
	
}

.container-menu,
.container-wrapper{
	padding: 15px;
}

.container-wrapper > div {
  border: 2px solid;
  border-radius: 5px;
  padding: 1em;
  -moz-box-shadow: 2px 2px 5px #aaa; 
  -webkit-box-shadow: 2px 2px 5px #aaa; 
}

#onglets
{
    font : bold 13px Batang, arial, serif;
    list-style-type : none;
    padding-bottom : 25px;
    border-bottom : 1px solid #9EA0A1;
    margin-left : 0;
}

#onglets a
{
    display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;
}

/* Fin Styles */

	
/*Couleur*/ 
.container-header {
	background-color: #F0F3F4;
	border-bottom-color : #ECF0F1 ;
}

.container-footer {
	background-color: #BDC3C7;
	color: #000;
}

.container-menu {
	background-color: #F0F3F4;
	border-top-color : #ECF0F1 ;
}

.container-wrapper > div {
  border-color: #B3B3B3;
  background-color: #E8E7E7;
  color: #000;
}

body {
	background-color : #F8F8FF;
}

#onglets a:hover
{
    background : #fff;
}

#onglets
{
    border-color :  #9EA0A1;
}

#onglets a
{
    color : #666;
}
/*Fin Couleur*/

Donc si vous des idées je suis preneur !

Merci d'avance