× Aidez la recherche contre le COVID-19 avec votre ordi ! Rejoignez l'équipe PC Astuces Folding@home
 > Tous les forums > Forum des Webmasters
 Souhaite créer une page web à moindre coût
Ajouter un message à la discussion
Pages : Début ... 1 2 [3] 4 5 ... Fin
[Début] Page 3 sur 9 [Fin]
Jean-Pierre
 Posté le 06/06/2020 à 22:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Tiens, le fiston qui rapplique

Celui même qui l'autre fois à des fins de tests sur le tchat de sa petite frangine Licette, lui avait un peu cassé... Et ensuite est reparti l'air un peu embêté et la queue basse

Pas honte ? Licette avait braillé toute la nuit ceci : "Vilain mon franzin, il a cassé mon zouzou !!!"

Pour la calmer j'ai pris le temps de lui réparer.

.

En plus tu n'as même pas suivi ce topic, car Saphira ne souhaite pas un héberg free.fr ; mais un véritable NDD.

Mais tu pourras proposer ta page de "contact" en tuto Car c'est son souhait d'en avoir un.

Salut fiston , et n'oublie pas qu'un masque ; c'est fait pour se placer exclusivement sur le visage hein...

saphira
 Posté le 06/06/2020 à 22:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonsoir Licette et JP !!
Je vois que vous m'avez concocté un beau morceau d'exercice !!

Journée passée à courir après le temps, juste je me pose pour vous faire un coucou du soir (comme Nounours !!),
je demande à mes instructeurs de m'octroyer un retard pour rendre ma copie demain ??

Merci Malcolm, pour ton grain de sel " pittoresque " que je viens de lire un peu en travers (c'est l'heure qui veut cela ...)
j'ai bien saisi le sens des éléments soulevés.

Je vous retrouverai demain, là, je débranche tout, Saphira == raplapla ....

Merci

Jean-Pierre
 Posté le 07/06/2020 à 12:19 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bonzour Saphira, moi ze préfère t'appeler Fifie comme ma nounoursette bleuemais seulement si tu veux bien hein. Car ze suis une fifille bien élevée.

Ze viens de demander à mon papounet séri et oui il veut bien attendre un peu.

Bon bin il est l'heure et mon papounet vient de me donner mon manzé préféré : une feuille de salade avec de petits morceaux de noix dedans, z'en bave déjà.
Mais remarque bien que c'est normal, car ze suis une petite limace

Bon, ze vais passer à table, mais pas comme les grands bipèdes non non qui eux sont à six (heu.... non assis on dit ze crois), mais directement sur la table

Bizou

Licette

Super_GEGE
 Posté le 07/06/2020 à 13:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

tu peux tester jalbum, il propose un grand choix de skins et est facile à utiliser.

Juste éviter ceux en flash.

Tu peux le tester à 100%, si ça n'a pas changé, il fait juste apparaître une marque tant que tu n'as pas payé.

Autre avantage, le Ftp est intégré.

Dreamer
 Posté le 07/06/2020 à 16:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Super_GEGE a écrit :

tu peux tester jalbum, il propose un grand choix de skins et est facile à utiliser.

Juste éviter ceux en flash.

Tu peux le tester à 100%, si ça n'a pas changé, il fait juste apparaître une marque tant que tu n'as pas payé.

Autre avantage, le Ftp est intégré.

Puis-je conseiller Piwigo dont je suis un grand utilisateur, on peut y mettre photos, textes, page indépendante, etc .. Avec l'aide de plugins

Très simple a utiliser avec une grande communauté et pour te montrer (un peu de pub perso) : photos, jukebox

saphira
 Posté le 07/06/2020 à 19:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonsoir Licette !!

Pou rat tue reuh maire sciez thon pas pas quart sa meuh plaie trot deux plomb geai dent laid caude
avek s'on nède !!

Sais 1 peu commun mètre n'a jeur qui a prend à faim queue les lève ça cheu sans sors tir plue tare

A Bien taux !!

saphira
 Posté le 07/06/2020 à 19:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonsoir Jean-Pierre,

Voili, voilou, je me suis jetée littéralement dans mon exercice et sincèrement, j'accroche à ce truc

Bon, je suis consciente que ma "compréhension" dans le domaine du CSS reste perfectible mais j'ai véritablement la soif de persévérer dans ce domaine.

Plus bas, les résultats affichés, merci de me dire stp, là où je n'aurai pas du ajouter de /* ou autre bourde


Encore MERCI et à bientôt


Jean-Pierre
 Posté le 07/06/2020 à 19:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bonsoir Fifie

Si tu t'y mets aux scies... ça risque d'être contagieux.

Mon papounet m'apporte un bon petit gars tôt, miammmmm !

Papounet a hâte de ramasser ta copie...

Oupssssss, nous tapions en même temps : z'appelle mon papounet

Licette



Modifié par Jean-Pierre le 07/06/2020 19:18
Publicité
saphira
 Posté le 07/06/2020 à 19:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Coucou Super Gégé & Dreamer

Merci pour vos raccourcis et infos

Dreamer, très élégantes les présentations et images sur tes liens, merci beaucoup !!

Jean-Pierre
 Posté le 07/06/2020 à 19:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Pas mal pour l'intégration, mais...

Pourquoi avoir ensuite tout "commenté" en CSS ?

Car en l'état cette class "saphira" est totalement débrayée. Et tu ne peux observer le résultat de cette class.

Tu vois bien qu'en Notepad++ ce qui est en vert c'est du commentaire ; donc inactif.

JP



Modifié par Jean-Pierre le 07/06/2020 19:23
saphira
 Posté le 07/06/2020 à 19:26 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

TOP Licette !!!!

Pas d'urgence, je ne suis malheureuse pas certaine de pouvoir coder à nouveau ce soir....

Te lire est toujours trait dix très y'an

A bientôt

Jean-Pierre
 Posté le 07/06/2020 à 19:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Pour deux mains alors :

Faudra modifier et tester cette class avec ceci pour entrer dans les mystères du CSS :

.saphira{
	text-align: justify;
    padding: 40px 45px 10px 45px;
    font-size: 0.85em;
	/* font-size: 1.2em; */
	/* font-size: 2em; */
    color: blue;
	/* color: #0000FF */
	/* color: #800000 */	
	/* font-weight: bolder; */
}	

JP

saphira
 Posté le 08/06/2020 à 12:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonjour Jean-Pierre,

Pour l'exercice hier, j'ai ajouté des ; */ là où il ne fallait pas

En suivant tes nouvelles indications, j'insère les images mais je doute que le résultat soit celui que tu attendais....

MERCI

Jean-Pierre
 Posté le 08/06/2020 à 12:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bien

Au moins tu n'as pas peur d'aller chatouiller en CSS ! (contrairement au Beau Jako )

Déjà je te conseillerais, afin de ne pas tout mélanger, de virer les autres choses au dessus de cette class (ou les mettre sous "commentaire".
Car tu ouvres des balises sans les refermer.

Par contre au dessus garde tes balises de saut de ligne (<br / ou <br>).

Déjà suivant cet essai, tu peux déjà remarquer que le formatage (en partie) est bien présent :

text-align: justify -------> hé hé... là était le piège !
padding: 40px 45px 10px 45px ----> idem ci-dessus, c'est lié


font-size: 0.85em -------> vois-tu la font plus petite ?
color: blue; ---------> la couleur de la font

Pour en revenir aux lignes de commande de cette class, tout est OK sauf la ligne de justification = les espaces latéraux.

Ce sera pour t'éviter de patiner à fond les patins par la suite...

Pourquoi pourquoi vas-tu me demander ?

Hé bien cette ligne CSS de la class "saphira" étant : text-align: justify est correcte en elle-même oui mais... par contre son appel en page HTML est faussé de chez faussé !

Faut absolument se mettre en mémoire que la balise <span> se répercute EXCLUSIVEMENT sur UNE SEULE LIGNE.

Or le texte en question comporte plusieurs lignes ; par conséquent il est normal que le rendu HTML soit out en partie

(Les valeurs du "padding" repousssssssssent en cet ordre : haut - droite - bas - gauche ; c.-à-d. en sens horaire)

Tu pourras aussi t'amuser en mettant une valeur bien élevée pour la taille de la font et voir le résultat. Idem pour la "color", etc.

Exercice suivant afin d'assimiler ce point important : en CSS sur la class en question, remplace tout simplement les balises <span> contre du <div>

Ensuite nous verrons qu'il faut bien présenter le code afin de le comprendre facilement. Surtout d'espacer ....les éléments.

Mais surtout surtout d'indenter correctement... Sinon ça fait bricolo qui ne sait pas ce qu'il fait, ou bien usine à gaz bien éloigné des con pétances de son maître.

Licette et JP

saphira
 Posté le 08/06/2020 à 16:27 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Coucou Licette et JP

Testé modification taille font + couleur, SNIF , j'ai bloque quelque part , le "purple" n'est pas pris en compte pas plus que la taille
et pour le <br> il est en surbrillance, je suppose que cela n'est pas "normal"...

Dreamer
 Posté le 08/06/2020 à 16:43 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Avant que le JP et sa Licette ne reviennent 2 trucs

</br> doit s'écrire <br /> et pour les couleurs, tu as ce petit site : https://htmlcolorcodes.com/fr/ qui pourra t'aider mettre un code en lieu et place d'un nom ..

Publicité
Jean-Pierre
 Posté le 08/06/2020 à 17:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Saphira et tonton Zozo

Oui pratique pour par exemple éviter d'utiliser une pipette.

Tonton, tu as bien fait d'observer qu'une balise de saut de ligne est erronée -----> </br> = niet !

Quoique... écoute :

.

Saphira, déjà tu as zappé de mettre sous commentaire ton code en amont... car balises ouvertes mais non refermées. Et ça peut influer...

Mais pour l'instant ça n'influe aucunement car tu as fait une grosses bêtise et Licette fine mouche et ayant observé cela se marre bien !

Attention au fichier CSS et les autres trucs de page genre HTML HTML PHP etc.

Dans un fichier CSS c'est du code CSS et RIEN en HTML !

Si les sauts de lignes sont bien en CSS, rien de mieux pour faire foirer tout le formatage.

En virant ces horreurs là ; ça devrait bien mieux marcher



Modifié par Jean-Pierre le 08/06/2020 17:46
Jean-Pierre
 Posté le 09/06/2020 à 10:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Hier j'avais quelques doutes assez confus de la situation. Ce matin j'ai enfin percuté !!!

En fait tu avais "inversé" les manettes : mélangé CSS et page.

Mais c'est une bonne nouvelle puisque "Toute erreur est la capitalisation de précieux renseignements" (ma pensée du matin en pensant aussi à Maxime Roberval...).

En France si un ingé fait pareille bourde ; il risque fort de se faire lourder. Tandis qu'aux US au contraire ce sera un acquis ajouté à son "capital expérience".

Bref : on récapépète au bédut avec un big coup d'éponge partout :
(mais existe UN piège : de saisir le bon nom de TON fichier CSS en header... )

Nouvelle page :

<!DOCTYPE html> 
<html> 
	<head> 
		<title> Ma première page Web </title> 
		<link href="saphira.css" media="screen" type="text/css" rel="stylesheet" />
	</head> 
	<body> 

		
		<p class="space_super"></p>
		
		
		<p> Bonzour tout le monde disait tonton Zozo </p> 


		<p class="space_super"></p>
	
	
		<h1> Ceci est ma première page </h1>


		<p class="space"></p>	

		
		<span class="text_saphira_2"> Je crois que je vais adorer le code </span>

		
		<p class="space"></p>		


		<div class="saphira">
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
			Je me nomme Saphira et j'adore la couleur bleue des bijoux. 
		</div>



	</body> 
</html>




Nouveau CSS :

body { 
  background-color: #F8EFD3;  
  /*margin: 0px; */
  font-family: Verdana, Helvetica, Arial, Sans-Serif;
  font-size: 1em;
  color: #05083B; 
  /* text-align: center; /* Center images ; blocs ; tableaux ; etc.  */
}

a:link { 
  text-decoration: none;
  color: #05083B; 
}

a:visited { 
  text-decoration: none;
  color: #8F0000; 
}

a:hover {
    text-decoration: underline;
    color: #FF7328;
    cursor: pointer;
	
}

a:active { 
    text-decoration: none;
}

a img {
    border: none;
}

li {
  padding-bottom: 10px;
}


h1 { 
  font-size: 1.8em; /* big */
  text-align: center;
  color: #05083B; 
}

h2 {
  font-size: 1.5em; 
 /* font-weight: bold; */
  text-align: center;
  color: #05083B;
}

h3 { 
  font-size: 1.2em; 
  text-align: center;
  color: #05083B; 
}

h4 { 
  font-size: 1.0em; 
  text-align: center;
  color: #05083B;  
}

h5 { 
  font-size: 0.8em; 
  text-align: center;
  color: #05083B; 
}

h6 { 
  font-size: 0.7em; 
  text-align: center;
  color: #05083B; 
}

p {
  font-size: 0.7em;
  color: #05083B; 
}




/*------- Espaces -------*/
.super_space {
  height: 100px;
  width: 100%; 
}

.space {
  height: 37px;
  width: 100%; 
}

.space_mi {
  height: 17px;
  width: 100%; 
}

.space_super {
	height: 50px;
	width: 100%; 
}
/*------/ Espaces -------*/




imgX {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 100px;
}

img.resize {
    width:230px;
    height: auto;
}

img.centre {
	display:block;
	clear:both;
	margin-left:auto;
	margin-right:auto;
}

.centrer {
	text-align:center;
}



/* ------- TABLEAU ET CELLULES ------------------------------------------------------------------- */
.tableau {
	width: 800px;  /* Longueur tableau */
	height: 187px; /* Hauteur tableau  */
	margin-left: auto;  /* Centrage    */
	margin-right: auto; /* Idem        */
	border-collapse: separate;
	/* border: 1px solid red;      Bordule optionnelle autour tableau                   */
	border-spacing: 20px 10px;  /* Respectivement espace horizontal et ensuite vertical */
}

.cellule {
	background-color: #9CCEFB;  /* Couleur fond de cellules  */
	width: 50px;   /* Dimension horizontale à vide pour test */
	height: 50px;  /* Dimension verticale à vide pour test   */
	padding: 10px; /* Espace pourtour encadrement            */
	text-align: center; /* Centrage texte dans cellule       */
	vertical-align: middle;
	border: 1px solid #737477; /* Bordule autour cellule     */

	/*--- Paramétrage arrondis et ombres... ---*/ 
	-moz-border-radius: 12px;    
	-webkit-border-radius: 12px; 
	border-radius: 12px;
	-moz-box-shadow: 3px 3px 6px 0 #424239;
	-webkit-box-shadow: 3px 3px 6px #424239; 
	box-shadow: 3px 3px 6px 0 #424239; 
	text-shadow: 0.1em 0.1em 0.1em #AFAF89; /* Effet d'ombre sur le texte */
}

	
/* http://css.mammouthland.net/zoomer-vignettes-thumbnail-avec-css.php */
 
.thumb {
	position: relative; 
	top: 0;
	left: 0; 
 }
  
.thumb a{margin: 0; text-decoration: none;}
.thumb a:img {border:2px solid white;} /* Encadrement images hors survol */
.thumb a:hover {
	  border:0px

/*  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5; 
*/

}

.thumb a:hover img {
	border: 2px navy solid; /* Bordure lors survol */
} 

/* ---/Tableau & cellules ------------------------------------------------------------------- */




/*--- BOX & TEXT ------------------------------------------------------------------------------*/

/* http://css.mammouthland.net/css3/coins-arrondis.php */
.boite {
	width: 870px;
	margin: 0 auto;
	background-color: #AFE3B7;
	padding: 0px;
	border: 1px solid #8F0000; 
	color: #05083B;

	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 3px 3px 6px 0 #8F0000;
	-webkit-box-shadow: 3px 3px 6px #8F0000; 
	box-shadow: 3px 3px 6px 0 #8F0000; 
	text-align: left; 
}



.boite_2 {
	width: 870px;
	margin: 0 auto;
	background-color: #CECEAA;
	padding: 0px;
	border: 1px solid #737477; 
	color: #05083B;

	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 3px 3px 6px 0 #424239;
	-webkit-box-shadow: 3px 3px 6px #424239; 
	box-shadow: 3px 3px 6px 0 #424239; 
	text-shadow: 0.1em 0.1em 0.1em #AFAF89; /* Effet d'ombre sur le texte */
}



/* http://css.mammouthland.net/css3/coins-arrondis.php */
.boite_titre {
	width: 400px;
 	padding: 10px;
	margin-left : auto;
 	margin-right: auto; 
  	background-color: #E8CE79; 
	border: 1px solid #737477;
	font-size: 1.0em;
 	font-weight: bolder;
 	color: #05083B;

	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 3px 3px 6px 0 #424239;
	-webkit-box-shadow: 3px 3px 6px #424239; 
	box-shadow: 3px 3px 6px 0 #424239; 
	text-shadow: 0.1em 0.1em 0.1em #AFAF89; /* Effet d'ombre sur le texte */
}


.boite_titre_2 {
	width: 870px;
	margin: 0 auto;
	background-color: #E8CE79;  
	padding: 0px;
	border: 1px solid #737477; 
	font-size: 1.3em;
	font-weight: bolder;
	color: #05083B;

	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 3px 3px 6px 0 #424239;
	-webkit-box-shadow: 3px 3px 6px #424239; 
	box-shadow: 3px 3px 6px 0 #424239; 
	text-shadow: 0.1em 0.1em 0.1em #AFAF89; /* Effet d'ombre sur le texte */
}


.text_box1_color_bc { 
	font-size: 1.0em; 
	font-weight: bolder;
	text-align: center;
	color: #3366FF; 
}

.text_box0_67 { 
	font-size: 0.7em; 
	text-align: center;
	color: #E8E8FF; /* Presque blanc */
}

.text_box0_70 {
    /*border: 1px solid black;*/
    text-align: justify;
    padding: 10px 37px 10px 30px;
    font-size: 0.70em;
    color: #05083B;
}	

.text_box0_75 {
    /*border: 1px solid black;*/
    text-align: justify;
    padding: 10px 37px 10px 30px;
    font-size: 0.75em;
    color: #05083B; 
}	

.text_box0_80 {
    /*border: 1px solid black;*/
    text-align: justify;
    padding: 10px 37px 10px 30px;
    font-size: 0.80em;
    color: #05083B; 
}	

.text_box0_85 {
    /*border: 1px solid black;*/
    text-align: justify;
    padding: 10px 37px 10px 30px;
    font-size: 0.85em;
    color: #05083B;
}	

.text_box0_85_center {
    text-align: center;
    padding: 10px 37px 10px 30px; 
    font-size: 0.85em;
    color: #05083B; 
}	

.text_box0_85_list {
    /*border: 1px solid black;*/
    text-align: justify;
    padding: 10px 37px 10px 30px;
    font-size: 0.85em;
    color: #05083B;
}	

.text_box0_88 {
    /*border: 1px solid black;*/
    text-align: justify;
    padding: 10px 37px 10px 30px;
    font-size: 0.88em;
    color: #05083B; 
}	

.text_box0_98 {
    /*border: 1px solid black;*/
    text-align: justify;
    padding: 10px 37px 10px 30px;
    font-size: 0.98em;
    color: #05083B;
}	

.text_box1_00 {
  text-align: justify;
  padding: 10px 37px 10px 30px;
  font-size: 1em;
  color: #05083B; 
  font-weight: bolder;
}

.text_box2_00 {
  text-align: justify;
  padding: 10px 37px 10px 30px;
  font-size: 2em;
  color: #D6E0EA; 
  font-weight: bolder;
}

.surligne {
	padding: 3px 10px;
	background-color: #8F0000;
	color: #FEE2C2;
}

.surligne2 {
	padding: 3px 10px;
	font-size: 1.0em;
	font-weight: bold;
	text-align: center;
    background-color: #fdbe77;
    color: black;
}

.surligne3 {
	padding: 3px 10px;
	font-size: 1.0em;
	/*font-weight: bold;*/
	text-align: center;
    background-color: #FDB086;
    color: #05083B;
}

.surligne4 {
	margin-left: 30px;  
	padding: 3px 10px;
	font-size: 1.0em;
	/*font-weight: bold;*/
	text-align: center;
	background-color: #FDB086;
	color: #05083B;
}

/*---/ Box & text -------------------------------------------------------*/



.image_droite {
  position: relative; 
  top: 0.5em; /* Marge supérieure */
  left: 30em; /* Décalage image vers la droite */
}

.logo_list 
{
	 /*border: 1px solid black;*/
	margin-left: 24px;  
	padding: 10px 37px 10px 30px;
}	

/*============== Zone Footer ==============*/
.info_footer {
  font-size: 0.8em; 
  text-align: center;
  color: #05083B;
}

.footer {
  padding-top: 3px; 
  height: 88px;
  font-size: 0.7em; 
  text-align: center;
}

/*=============/ Zone Footer ==============*/


/* -------- Class de test ---------- */

.text_saphira_2 {
  text-align: center;
  padding: 10px 37px 10px 30px;
  font-size: 2em;
  color: #1F50CB; 
  font-weight: bolder;
  letter-spacing: 5px;
  text-shadow: 0.2em 0.2em 0.2em #AFAF89;
}

.saphira{
	text-align: justify;
    padding: 40px 20px 10px 200px;
    font-size: 0.85em;
	/* font-size: 1.2em; */
	/* font-size: 2em; */
    color: blue;
	/* color: #0000FF */
	/* color: #800000 */	
	/* font-weight: bolder; */
}	





Surtout remarque bien (et conserve) l'aération du code !

Sans oublier l'indentation de la page (Nous y reviendrons)

Mais faut déjà tester tout ça qui est du tout cuit

saphira
 Posté le 09/06/2020 à 20:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonsoir JP et Licette

J ' A D O R E !!!!

Merci beaucoup pour le "tout cuit"
Voici le résultat

J'avais hâte d'être à ce soir pour m'y remettre
Après lecture de ta remarque sur sauce <br> mélangée au css,je me suis vautrée complètement mais promis, je ne recommencerai plus

Pour le moment, j'ai du mal à "arracher" du temps pour m'exercer, ça me fait réfléchir le soir avant de m'endormir !!

MERCI MERCI MERCI

saphira
 Posté le 09/06/2020 à 20:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonsoir Dreamer

Merci pour ton intervention et lien de couleurs,
je le conserve précieusement

Bien noté dans mes "tablettes" avec surlignement fluo le br / >

Jean-Pierre
 Posté le 09/06/2020 à 20:40 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Tant mieux si ça te plait alors

Tu pourras observer qu'avec seulement environ une dizaine de ligne de code par elles-mêmes, ça donne quelque chose de tout à fait présentable.

En plus de cette façon à la mano, contrairement aux usines à gaz ; tu peux aller au bout de tes idées et produire un site qui ne ressemblera à nul autre.

Tu pourras aussi observer la puissance du CSS !

Pour ton futur site, faudra songer à ce que tu souhaites réaliser avec précision = le CdC = le Cahier des Charges.

De là nous en tirerons un squelette (ainsi qu'appelle cela tonton Grigri ) qui sera une sorte de fil rouge pour toutes tes pages = la CG = la Chatre Graphique.

S'il comporte un millier de pages et si tu souhaites changer par exemple la couleur de la font = UNE seule ligne en tout et pour tout à modifier = 10 secondes montre en main, idem pour les autres choses.

Je ne veux pas te pousser, digère tout cela tranquillement.

Lorsque tu seras prête pour de nouvelles aventures ; nous parlerons des boites si tu le souhaites !

Licette et JP

saphira
 Posté le 10/06/2020 à 21:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonsoir Licette et JP !! Lien vers une image externe


J'apprécie véritablement vos recommandations ainsi que votre appui dans ce post,
c'est incroyablement plus que ce que je ne pouvais espérer......

Après avoir corrigé ma bourde de l'autre jour, voici (enfin) ce que j'attendais en visu

Pour votre proposition de "squelette", oh !! oui, volontiers

Mon idée de départ (qui ne demande qu'à recevoir d'autres conseils avisés ), je pensais avoir 1 page incluant plusieurs onglets plutôt qu'une " longue longue" page à dérouler :

* 1 page d'accueil sur laquelle je présenterai succinctementc mon activité puis,

* 1 onglet ouvrant sur un fichier sous format Pdf ou PowerPoint (ce fichier donnerait le descriptif et "l'esprit" de la structure),
pensez-vous qu'il serait plus judicieux de zapper le fichier Pdf et inclure sous format HTML texte + photos, qu'en pensez-vous ??

* 1 onglet des conditions générales (le fichier Word et/ou Pdf sont quasiment bouclés),

* 1 onglet de type "formulaire de contact",

* 1 onglet de type "souvenirs de vacances".

Voili, je vous dis à très bientôt,
Bonne soirée à tous
MERCI

ps : pour la suite de nos aventures, préférez-vous que je clôture ce post et que nous avancions en MP ou pas ?? Merci !!

Jean-Pierre
 Posté le 10/06/2020 à 22:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Saphira

Pour la reprise de ton ancienne page au moins tu ne restes pas passive en attendant que le code tombe tout cuit.

J'allais justement fermer ma bécane et voyant ta réponse...

Nan nan pas de MP stp, avec le recul et le résultat ; trop de mauvais souvenirs (hein Beau Jako ? )

Pour le PDF en question, tout dépend de son contenu ergonomiquement parlant. Mais pour l'instant ce genre de détails ne doit pas primer.

Tu parles d'onglets... je dirais plutôt menu non ?

Bref, que vois-tu à ce niveau dit de "navigation" :

Menu flottant à gauche ?

Menu en haut centré ?

Menu vertical à gauche ?

Avec ou sans bulles ?

Aspect des boutons du menu... Avec un graphisme ?

Plutôt dépouillé ou tout le contraire ?

Etc.

A cogiter... et nous montrer au moins un exemple quelque part

Au début tu ne parlais que d'une seule page

Licette et JP

midnightblue
 Posté le 10/06/2020 à 23:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Pour cette histoire d'onglets, un chouia de PHP serait je pense avantageux. Ainsi on pourrait appeler toutes les pages à partir du menu d'une page index grace à la méthode _GET...Cela évite d'avoir à répliquer le menu dans toutes les pages pour la navigation, cela permet aussi de ne rédiger qu'un seul header, celui de la page index. Pour les autres pages, pas de balises head, ni body...ces pages venant s'insérer dans le body de la page index. De préférence on les nommera au format .php. même si codées en HTML - CSS.

Page index.php

<?php

/*initialisation _GET avec la valeur par défaut */

if(empty($_GET["n"]))$_GET["n"]="0";

$n=$_GET["n"];

/* Le tableau des pages */

$pages[0]="accueil.php";
$pages[1]="page1.php";
$pages[2]="page2.php";

?>

<!doctype html>
<html lang="fr">
	<head>
	<!--ici ton header-->
	</head>
	
<body>

<!--Menu-->

<div class="menu">
#<a href="?n=0">Accueil</a>
#<a href="?n=1">Page1</a>
#<a href="?n=2">Page 2</a>
</div>

<!--Affichage de la page demandée-->

<div class="page">

<?php

/* vérification de l'existence et affichage de la page demandée par la fonction include*/

if(file_exists($pages[$n]))include($pages[$n]);

?>

</div>

</body>
</html>

Bref...un micro CMS

*µ*



Modifié par midnightblue le 10/06/2020 23:26
Jean-Pierre
 Posté le 11/06/2020 à 12:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

midnightblue

En lisant ton dernier mot : Licette s'est mise à brailler comme jamais !

Pourquoi pas Wix alors !

.

Par contre je te propose dans un autre thread de t'aider, si tu le souhaites, afin d'améliorer un peu le cirque codesque de tes pages :
(J'espère que ce n'est pas un CMS qui t'a pondu ça )

<div style="text-align:right;font-size:9px">28/05/2020</div><div class="surtitredelacolonnedeune">Les annonces du premier ministre</div><h2 class="titredelacolonnedeune">Déconfinement 2 : levée des mesures les plus restrictives</h2><h3 class="chapodelacolonnedeune">A l'exception de l'Ile de France, Mayotte et la Guyane qui demeurent en orange, les mesures les plus restrictives du confinement sont levées, notamment la limite des 100km pour les déplacements. Le mouvement de retour à la normale s'amorce avec la réouverture - conditionnelle cependant -  des bars, restaurants salles de sport et de spectacles, et aussi des lycées et musées..</h3><div class="signature"></div><div style="text-align:right"><i><a href="lire.php?rub=restedumonde&amp;art=88"># LIRE ->>></a></i></div><hr>


<div style="text-align:right;font-size:9px">23/05/2020</div><div class="surtitredelacolonnedeune">BAISSE D'INTENSITE DE L'EPIDEMIE</div><h2 class="titredelacolonnedeune">Entre optimisme et méfiance</h2><h3 class="chapodelacolonnedeune">LCI - Jour après jour, les indicateurs tendent à montrer que l'épidémie de Covid-19 tend à s'essouffler en France et en Europe. Si certains scientifiques continuent d'alerter sur le risque d'une deuxième vague, d'autres n'hésitent plus à conclure qu'elle ne viendra pas.<br><br></h3><div class="signature"></div><div style="text-align:right"><i><a href="lire.php?rub=restedumonde&amp;art=87"># LIRE ->>></a></i></div><hr>


<div style="text-align:right;font-size:9px">22/05/2020</div><div class="surtitredelacolonnedeune">L'EPIDEMIE EN FRANCE / 21 MAI 2020</div><h2 

Mais merci, l'intention était louable et sympa

Si tu as bien suivi ce fil de discussion, je tente de rester "simple" et d'appliquer une/ma pédalgogie (hein ? si si avec un "L") qui donne envie et non repousse...

JP (Licette refuse ici de signer car elle est furieuse )

Publicité
Pages : Début ... 1 2 [3] 4 5 ... Fin
[Début] Page 3 sur 9 [Fin]

Vous devez être connecté pour poster des messages. Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !


Les bons plans du moment PC Astuces

Tous les Bons Plans
4,99 €Housse Case Logic EHDC101K de protection de disque dur externe 2.5 pouces à 4,99 €
Valable jusqu'au 15 Juillet

Amazon fait une promotion sur la housse de protection de disque dur externe 2.5 pouces Case Logic EHDC101K qui passe à 4,99 € au lieu de 7 €. La housse est semi-rigide et possède un élastique intérieure qui maintient le disque dur en place pendant le transport. Vous pourrez ranger vos câbles USB dans la fine poche en maille.


> Voir l'offre
129 €Sonde de calibration Datacolor SpyderX Pro à 129 €
Valable jusqu'au 14 Juillet

Amazon fait une promotion sur la sonde de calibration Datacolor SpyderX Pro qui passe à 129 € alors qu'on la trouve ailleurs à partir de 179 €. La livraison est gratuite. Cette solution avancée d'étalonnage vous permettra de régler parfaitement les couleurs de votre écran afin d'avoir un rendu le plus fidèle possible.


> Voir l'offre
249,35 €Mini PC T-BAO TBOOK MN25 (Ryzen 5 2500U, 8 Go RAM, 256 Go SSD NVME) à 249,35 € avec le code BGFRTBK
Valable jusqu'au 16 Juillet

Banggood propose actuellement le mini PC T-BAO TBOOK MN25 à 249,35 € avec le code promo BGFRTBK. Ce mini PC au format NUC d'Intel possède un processeur Ryzen 5 2500U avec chip graphique Vega 8, 8 Go de RAM DDR4 et un SSD NVME de 256 Go. Il dispose d'une connectique complète : un emplacement 2,5 pouces libre (pour ajouter un disque dur ou un SSD supplémentaire, le WiFi5, le bluetooth 4.1, 4 ports USB 3.0, 2 ports USB 2.0, un port HDMI 2.0, un DisplayPort, un port Ethernet Gigabit et tourne sous Windows 10 que vous pourrez mettre en français. Ce mini PC fait 12,8 x 12,8 x 5 cm et pèse 1,2 kg. Il est livré avec une alimentation européenne. Branchez ce mini PC sur une TV ou un écran et vous avez un ordinateur discret et performant.

Ce marchand sérieux se trouvant en Chine, la livraison peut prendre une vingtaine de jours. Vous pouvez payer par carte bancaire ou par Paypal (conseillé pour bénéficier de la garantie Paypal).


> Voir l'offre

Sujets relatifs
créer un site ---- Aircus.com vous en pensez quoi pour une page WEB ?
Créer une page web responsive ?
créer une page web sans codage avec photoshop
créer une page web avec code d'accès
créer une page site web avec code d'accès'
créer une page web
Créer une bordure dune page web
créer des commentaires sur une page web
Comment créer une page web simple
Créer une arborescence sur une page web
Plus de sujets relatifs à Souhaite créer une page web à moindre coût
 > Tous les forums > Forum Forum des Webmasters