Forum d'Entraide Informatique (FEI)

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

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

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 !

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;}
}

Merci beaucoup pour ton aide Kerr. C'est vraiment sympa.

Je vais essayer de trouver le temps de m'y mettre sérieusement et je reviens vers toi dans quelques jours ! (débordé!)

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 ?

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

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...

???

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é

.

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 "

sinon, grafikart il est très bien mais il part dans des trucs un peu compliqué en faisant comme si c'était simple (c'est encourageant au début mais c'est agaçant quand on y arrive pas) et puis il utilise SASS et COMPASS... je pense que j'apprendrai ça plus tard...

Bonsoir Gargova

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); 
     }
}

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.

Bonjour Gargovan

Tu pouvais envoyer ton lien en mp ou le supprimer mais un très bon début en mode responsive.

Merci à toi , c'est un petit coup de pouce....

@ bientôt.

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.

Bonsoir,
J'ai trouver aussi un menu burger

à tester .

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...

Forum d'Entraide Informatique (FEI)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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