FORUM D’ENTRAIDE INFORMATIQUE (FEI)
Site d’assistance et de sécurité informatique

coup de main html (gallerie photo modal et nav pliante en burger)

Entraide concernant le webmastering (administration de sites).
Règles du forum : Entraide concernant le webmastering (administration de sites). Pour se faire aider à choisir un hébergeur, le service le mieux adapté selon ses objectifs, se faire aider à la création d'un site (problèmes de programmation, d'organisation, résolution de bugs...).
Merci de lire et de respecter la charte générale du forum.
 Répondre
  • Avatar du membre
  • Avatar du membre
  • Avatar du membre
Avatar du membre

coup de main html (gallerie photo modal et nav pliante en burger)

par Gargova
-  lun. 19 déc. 2016 00:47 #182004
Bonjour,

J'ai essayé d'utiliser des CMS pour la creation de mon site web et je reviens toujours à l'idée de faire un truc simple codé à la maison et hebergé gratuitement (chez free). Les templates gratuits des CMS ne me conviennent pas et j'ai plus de temps que d'argent... mais il arrive que je réalise mon manque de compétence :(

Bref, j'ai commencé un site qui me plait mais je bloque sur deux aspects donc je cherche des personnes généreuse et talentueuses qui pourraient me dépanner. J'ai bien cherché sur internet mais je me rend bien compte que je suis une quiche question programmation... ça fait des jours que je tourne en rond.

Bref, le site en cours de construction est visible ici : http://www.garketch.com

j'ai deux requêtes :

je voudrais faire en sorte que ma barre de navigation soit 'responsive', elle s'affiche en tout petit sur mobile pour l'instant. La solution où elle se transforme en icone hamburger cliquable a l'air bien... mais je bloque complètement.

et pour ma galerie photo, j'aime bien le côté décalé zig zag que j'ai obtenu pour l'instant mais je voudrais pouvoir cliquer sur les miniatures et qu'elle s'ouvrent en modal où on la verrait en pleine taille avec une petite description.

à votre bon cœur ;)

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par KeRR_@
-  lun. 19 déc. 2016 19:52 #182029
Bonsoir,

J'ai cette page qui me parait bien pour un navbar responsive -> http://www.w3schools.com/howto/tryit.as ... _js_topnav
Et la page est là -> http://www.w3schools.com/howto/howto_js_topnav.asp

Sinon ce que tu peux faire, c'est d'avoir des breakpoints pour pour chaque devices et tu vas
recréer un design pour chacun -> https://responsivedesign.is/develop/bro ... reakpoints
Et ici aussi -> http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Ce que tu peux faire. Afficher une image et au passage de la souris elle s'affiche en grand avec ces paramètres -> http://www.corelangs.com/css/box/hover.html , il n' y a que les valeurs qui changent dans Hover.
Ou bien sur cette page -> http://www.w3schools.com/howto/howto_cs ... images.asp
Avatar du membre

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par Gargova
-  dim. 25 déc. 2016 19:09 #182154
Merci pour ta réponse et les pistes que tu me proposes.

j'ai essayé des tas de choses avec les breakpoints mais je n'arrive pas à faire que ça fonctionne. .. je vois exactement le même site depuis mon portable que depuis mon ordi...

bref c'est désespérant.

Si quelqu'un a d'autres conseils ou souhaite m'aider de plus près (genre regarder le code et m'expliquer pourquoi et comment) , n'hésitez pas à me faire signe ;)

Merci merci !

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par KeRR_@
-  lun. 26 déc. 2016 13:20 #182159
Bonjour,

regarde sur cette page -> https://openclassrooms.com/courses/appr ... ia-queries
Je joins mes fichiers " html et CSS " les ajouter dans un dossier nommé "site " donc tu as deux fichiers CSS la page HTML va changer
au breakpoint de 700px. Il faudra reprendre tes balises pour remodifier ton affichage pour la petite résolution selon tes préfèrences.
Je te rajoute un lien -> http://www.w3schools.com/howto/howto_js_topnav.asp
avec cette video
https://youtu.be/_X2N_yw9Boo?t=36m51s
Les fichiers CSS peuvent être dans un seul et même fichier, je les sépare pour bien te retrouver dans le code.
Si tu veux que je regarde ton code on va tenter de trouver ou ça coince.
Fichier HTML -> breakpoint.html
Code : Tout sélectionner
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ton site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">  
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="design.css" media="screen" >
<link rel="stylesheet" type="text/css" href="responsive.css"  media="screen" >

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
  </head>
  <body>
    <div class="navbar navbar-inverse" role="navigation">
    
           <div class="navbar-header">
              <a class="navbar-brand" href="#">BreakPoint</a>

	           <ul class="nav navbar-nav">
				  <li>
					 <a class="titre" href="#">Les titres de tes pages</a>
				  </li> 
				</ul> 
			</div>
    </div>
    <div class="container">
			<h2>Hello World</h2>
	</div> 
  </body>
</html>
Fichier CSS -> design.css
Code : Tout sélectionner
html  body {
  padding-top: -60px; /* 60px to make the container go all the way to the bottom of the topbar */
	margin: 0px;
	width: 100%;
	background-color: lightblue;
	font-size: 20px;
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@font-face {
    font-family: Roboto Condensed;
    src: url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
}
navbar navbar-inverse   ul li a{
	 font-color: red;
}
.container{ 
text-align: center;
}
.container h2{  
	font-size: 80px;
font-family: 'Roboto Condensed', sans-serif;
  font: italic bold;
 color: purple;
}
Fichier CSS -> responsive.css
Code : Tout sélectionner
@media screen and (max-width: 700px)

{
	 /* Rédigez vos propriétés CSS ici */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');	
	html  body {
  padding-top: -0px; /* 60px to make the container go all the way to the bottom of the topbar */
	margin: 0px;
	width: 100%;
	background-color: lightgreen;
	
}
@font-face {
    font-family: Open+Sans;
    src: url(https://fonts.googleapis.com/css?family=Open+Sans);
}

.navbar-brand{
	display: none;
}

.titre {
	font-family: 'Open Sans';
	text-align: center;
	font-weight:  light;
	font-size: 20px;
	
}
	.container h2{
		font-family: 'Open Sans', sans-serif;
		font-size: 22px;
		color: red;
	}
	h2:hover{  color: #ffffff;}
}
Avatar du membre

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par Invité
-  sam. 31 déc. 2016 03:06 #182240
J'ai réussi à faire un breakpoint sur ma page ! j'ai fait changer la couleur de mon titre :)

je poursuis...

petite remarque en passant : tu spécifies “navbar navbar-inverse ul li a{ font-color: red;}” mais les éléments de la navbar ne s’affichent pas en rouge… c'est une histoire de priorité par rapport aux règles internes de la navbar de bootstrap ou quoi ?
Avatar du membre

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par Gargova
-  sam. 31 déc. 2016 03:32 #182241
par contre en fait, mon breakpoint fonctionne très bien sur l'ordi quand je réduit ma fenêtre de navigateur, mais pas quand je regarde mon site sur mon téléphone Samasung Galaxy s3 qui a à priori une definition max de 480px en largeur, pourtant j'ai fixé mon breakpoint à 700px...

voici mon css additionnel lié depuis ma page index :
@media screen and (max-width: 700px){

#navb ul a
{ font-size:100px; }
}

"navb" étant l'"identifiant" de ma navbar personnalisée
Avatar du membre

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par Gargova
-  sam. 31 déc. 2016 03:47 #182242
alors en fait, j'ai fait plusieurs essais, en regardant à la fois sur un ipad et sur mon galaxy s3, et j'ai testé différents "max-width" 500 / 700 / 800 / 900 / 1000...

et ça n'a d'effet sur les deux appareils mobile que quand je règle à plus de 1000. ce qui est bizarre dans la mesure où les deux appareils n'ont pas la même définition et pour le téléphone il me semblait que c'était 480px de large...

???

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par KeRR_@
-  sam. 31 déc. 2016 14:09 #182245
Bonjour,
Déjà ce qui faut savoir sous les petites résolutions quelles ont tendance a ne rien dire donc il faut forcer
l'affichage correspondant, base toi sur la video qui t'expliquera mieux que moi ^^.

https://youtu.be/mxeKL9AnSrQ?t=18m56s
petite remarque en passant : tu spécifies “navbar navbar-inverse ul li a{ font-color: red;}” mais les éléments de la navbar ne s’affichent pas en rouge… c'est une histoire de priorité par rapport aux règles internes de la navbar de bootstrap ou quoi ?
Oui, Je l'avais oublier celle-la. enfin tu as cette video et celle plus haut pour avoir un aperçus. aussi faut pas oublier le
javascript ou jquery pour plus de fluidité, mais là pas trop avancé :roll: .
Avatar du membre

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par Gargovan
-  mar. 3 janv. 2017 01:11 #182300
Bon, j'ai fait des tas de choses avec les breakpoint, mais maintenant que j'ai un site qui se transforme ça me fait de nouveaux problèmes de mise en page avec la nav que je modifie.

voici mon css de breakpoint :
@media screen and (max-width: 1000px){

body{
display:100%
}
#navb ul{
display:inline-block;
height:auto;
position: relative;
top:40px;

}
#navb ul a
{
display:inline;
font-size:xx-large;
}

#titre {
position:absolute;
top:0;
margin:0;
}

.jumbotron{
position:relative;
top:0px;
}
}

pour le display, j'ai testé inline et inline-block et je n'observe pas de différence.

je vous laisse regarder ce que ça donne directement à cette adresse : http://www.garketch.com/about.html

je ne comprend pas le comportement de la barre de nav au fur et à mesure que je rétrécie la fenêtre... pourquoi ça se met en carré sur la droite à mi-chemin ?


et sinon, Kerr, désolé, je n'ai rien compri à ce que tu disais là :"Déjà ce qui faut savoir sous les petites résolutions quelles ont tendance a ne rien dire " :reflexion:

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par KeRR_@
-  mar. 3 janv. 2017 21:39 #182314
Bonsoir Gargova :bienvenue2:
Hidden Content (for members only)
Où, as-tu trouvé du contenu caché ?

Bon, c'est tou petit test pour regarder si cela s'affiche sur téléphone car c'est beaucoup de teste mais continues tu vas y arriver c'est une question de temps ^^.

Code : Tout sélectionner
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ton site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="design.css" media="screen" >
<link rel="stylesheet" type="text/css" href="responsive.css"  media="screen" >

<!-- Latest compiled and minified CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
  </head>
  <body>
	  <header class="header">
		<a href="#" class="header__icon"></a>
				<a href="#" class="header__icon"></a>
					  <nav class="navb">
						  <ul class="titre">
						 <li> <a href="#" class="header__logo">GARKETCH</a><li>
						  
							<li><a class="titre" href="#">Home</a></li>
							<li><a class="titre" href="#">About</a></li>
							<li><a class="titre" href="#">Gallery</a></li>
							<li><a class="titre" href="#">Contact</a></li>
					   </ul>
					</nav>	 
				  </div>		
		</header>
	    <div class="site-content">
            <div class="container">
                <h2>GARKETCH</h2>	
<p>
"Garketch finds interest in nature's spontaneous patterns and forms made by biological and physical phenomenon. Photography and experiments with life and physics are at the core of his approach. As a biological being, Garketch, is sometimes amazed to see the spontaneity of his art and how forms emerge from raw materials in his hands; he paints, makes sculptures, wondering about the forces driving his inspiration. Behind the visual aspects Garketch thinks about life, death, science, people, beliefs, mysticism, vanity... and reality (if there’s a reality)".
Garketch, visual artist
</p>
<p>
"Garketch should be considered a living god, creating and destroying worlds and universes as he exercise his art."
Gerard De Fitzlhped, professor at Centre de Sociologie de l’Innovation Artistique
</p>
<p>
"Garketch transcends raw material through a modern vision of first art. His sculptures are impregnated with a blend of magic and innocence, insuflating a blow of youth as a challenge to death."
</p>
<p>
Josino Dasilva, curator at Musée de l'Humanité
</p>
<p>
"Garketch shows us the underlying connexions in the universe pattern by using spontaneous natural forms that seem to occur in a not so natural way."
Gertrud Altenberg, director of the Centre pour l'amour inconditionnel nu devant Garketch
</p>
   </div>	
<footer>
<p>
© 2016 Garketch 
</p>		 
</footer>		 
   </div>
  </body></html>
Design_CSS
Code : Tout sélectionner
/*------*\	
	BASE	
  \*-----*/      
   .html, body {
		  
		  font-family: Roboto;
		  font-size: 16px;
		   line-height: 1.4;
		   height: 100%;
		  	background-color: #e5ece7;
     
			margin: 0;
			padding:  0;
    }	  
 a { text-decoration: none; color: inherit;}  
ul {
    list-style: none; /* Remove list bullets */

}
.container{ margin: 0 30px; overflow: hidden;} 

.site-content {	 padding-top: 66px; }	  
/*------*\
	Header	 
   \*-----*/    
     .header{
		position: fixed;
		left: 0;
		right: 0;
		height: 66px;
		width: 100%;
		
		 line-height: 66px;
    	color: #ffffff;
   	float: left;	
 background-color: #2e7d32;
}	  
.navb ul li a{
	font-weight: bold;
	padding: 0 25px;
	float: left;
}  
	/*------*\
      MENU
   \*-----*/	  
.navb ul li a{
	float: left;
	padding: 0 15px;
}

a:hover{ color: #c6ff00;}
Responsive.CSS
Code : Tout sélectionner
@media only  screen and (max-width: 460px)

{ 
  .header {
	  position: static;
  }	
  	   .header__icon{
		  position: relative;
		  display: block;
		  width: 50px;
		  height: 39px;	 
		 cursor: pointer; 
		  } 
  .navb {
	position: absolute;
	left: 0;
	top: 0;
	 width: 150px;
	
	 background-color: #428a46;
}		
	navb titre {
		display: block;
		height: 40px;
		text-align: center;
		line-height: 40px;
		boder-bottom: 2px solid white;
	
	}
  menu  navb ul li a {
	  transform: translateX(-260px); 
     }
}
Avatar du membre

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par Gargovan
-  mar. 3 janv. 2017 23:30 #182318
waow, merci pour le code !

j'ai testé et ça s'affiche plutot bien sur mobile, mais la barre de navigation ne se rétracte pas quand on clique à côté... bref, c'est un bon début de code que je garde précieusement. J'ai commencé à retoucher le CSS pour revenir à mon apparence blanc et bleu mais c'est pas fini...

si tu est curieux de voir le résultat, tu peux checker cette adresse :
http://www.garketch.com/about2

(le contenu secret, est supposé ne pas s'afficher pour les visiteur non membres du forum, je n'ai pas envie de diffuser plus que ça mon site quand il s'agit de phase expérimentales...)

Je galère grave mais néanmoins je comprend de mieux en mieux.

Sinon, je crois que je vais mettre un peu mon codage de côté pour le moment et revenir à un éditeur de site web pour avancer un peu plus vite. J'ai refait des test avec Mobirise et quand même c'est sympa, j'ai automatiquement une navbar responsive et ma galerie s'affiche plutôt bien et quand je clique sur les photos j'ai une lightbox qui s'ouvre et je peux faire défiler de gauche à droite. Bref ce qui est cool c'est que maintenant j'ai de meilleures connaissances pour retoucher les parties du code que je veux améliorer à la main ! J'aurais probablement des tas d'autres questions pour ces retouches de post-prod ;)
D'après mes tests, j'ai déjà un petit bug dans l'animation de défilement de la lightbox quand je passe d'une photo à l'autre... bref, je mettrai une nouvelle version en ligne et on en rediscute !

Merci beaucoup.
Avatar du membre

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par Gargovan
-  mar. 10 janv. 2017 02:56 #182441
Petit retour sur mes progrès,

finalement j'en ai eu marre de Mobirise et j'ai repris mon code freestyle, j'ai réussi à ajouter le fameux modal qui montre les photos, j'ai découvert que ça s'appelle une lightbox et il y a un plugin très bien qui s'appelle Lightbox2 pour le faire.

http://lokeshdhakar.com/projects/lightb ... ng-started

Et pour la navbar qui se transforme en burger responsive, j'ai trouvé un truc sympa sur codepen :

http://codepen.io/mblode/pen/qEGWwB

voilà, par la même occasion j'ai appris comment on insère du javascript... tjrs en progrès. :D
Avatar du membre

Re: coup de main html (gallerie photo modal et nav pliante en burger)

par eluzerkharix
-  mer. 12 févr. 2020 07:32 #201267
Gargova a écrit : ↑lun. 19 déc. 2016 00:47 Bonjour,

J'ai essayé d'utiliser des CMS pour la creation de mon site web et je reviens toujours à l'idée de faire un truc simple codé à la maison et hebergé gratuitement (chez free). Les templates gratuits des CMS ne me conviennent pas et j'ai plus de temps que d'argent... mais il arrive que je réalise mon manque de compétence :(

Bref, j'ai commencé un site qui me plait mais je bloque sur deux aspects donc je cherche des personnes généreuse et talentueuses qui pourraient me dépanner. J'ai bien cherché sur internet mais je me rend bien compte que je suis une quiche question programmation... ça fait des jours que je tourne en rond.

Showbox jiofi.local.html tplinklogin
j'ai deux requêtes :

je voudrais faire en sorte que ma barre de navigation soit 'responsive', elle s'affiche en tout petit sur mobile pour l'instant. La solution où elle se transforme en icone hamburger cliquable a l'air bien... mais je bloque complètement.

et pour ma galerie photo, j'aime bien le côté décalé zig zag que j'ai obtenu pour l'instant mais je voudrais pouvoir cliquer sur les miniatures et qu'elle s'ouvrent en modal où on la verrait en pleine taille avec une petite description.

à votre bon cœur ;)
j'ai essayé des tas de choses avec les breakpoints mais je n'arrive pas à faire que ça fonctionne. .. je vois exactement le même site depuis mon portable que depuis mon ordi...
 Répondre
 Retourner vers « Webmastering »
Problème d'allumage

Bonjour à tous J'ai un souci avec mon pc de[…]

FLTL_READ_MORE
Game

Je cherchais un site de jeux en ligne qui combine […]

FLTL_READ_MORE
Problème de téléchargement

Bonjour Suivez les indications de KAV, si vous n'[…]

FLTL_READ_MORE
Présentation

Hello :hello: , Merci pour l'accueil

FLTL_READ_MORE
FLTL_VIEW_MORE_TOPICS