× 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 ... 2 3 [4] 5 6 ... Fin
[Début] Page 4 sur 12 [Fin]
Dreamer
 Posté le 11/06/2020 à 15:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Comme notre amie n'a pas grand chose à écrire, je propose ce qu'on appelle une Onepage** pratique et à défaut de construire vraiment un site web si elle y ajoute de nombreuses rubriques car pour l'instant : un texte d'accueil, un formulaire de contact, un fichier pdf (a télécharger ??) et quelques photos ne nécessite guère plus !!

** Un site One Page est un site constitué d’une seule page web contenant l’ensemble des contenus d’un site web. Cette page est divisée en plusieurs parties, dont les différents contenus sont accessibles en scrollant horizontalement ou verticalement (ou à l’aide de liens internes ancrés).

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

Tonton Zozo,

Tu ne vas pas t'y mettre à ton tour

Au début OUI : une seule page était en jeu.

Désormais, si tu relis les derniers messages de Saphira...

Pourquoi toujours penser à compliquer ? Bande de grandes méchantes va !


Arff édit :

** Un site One Page est un site constitué d’une seule page web contenant l’ensemble des contenus d’un site web. Cette page est divisée en plusieurs parties, dont les différents contenus sont accessibles en scrollant horizontalement ou verticalement (ou à l’aide de liens internes ancrés).

Gloupssssss mais c'est la définition des sites dits "modernes" et responsibles tout en hauteur ?

Horreur parmi les horreur !

Dès que je tombe sur un site comme ça, je me demande toujours pourquoi pondre des créations si moches et si anti ergonomiques

Mais après tout, c'est peu-être le souhait de Saphira ? (j'en doute...)



Modifié par Jean-Pierre le 11/06/2020 17:53
saphira
 Posté le 11/06/2020 à 21:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonsoir Licette et Jean-Pierre,
Bonsoir Midnightblue et Dreamer,

Sur la présentation, j'imaginais faire figurer le menu en haut centré,
des boutons de forme "douce"' (c'est à dire plutôt ovale ou rond étiré) avec un pourtour fin avec ombrage, pour moi ce serait le TOP ,
pour les Bulles ? honnêtement je n'y ai pas songé plus...
Je "rêvais" d'empreinte de pattes de chien mais là, Saphira en demande certainement beaucoup trop

Déjà si au minimum, j'arrive à offrir une présentation épurée, claire et sympa, de surcroît avec votre aide, je serai comblée !!
(Aparté : J'opère un énorme challenge personnel car avec xxx années de travail dans le secteur privé,
je me lance pour réaliser une activité auprès de mes amis les bêtes, activité qui m'appelait depuis fort fort longtemps...)

Merci Midnightblue pour l'invitation au PHP,
tout ça m'effraie car inconnu et nouveau mais j'y viendrais peut-être avec votre secours

Merci Dreamer pour ta suggestion pour le site One Page,
si la navigation est essentiellement verticale, ce n'est pas ce que je recherche, mais tu m'auras fait découvrir cette appellation

Question qui m'a traversé l'esprit !!
Est-il possible de visualiser le nombre de visiteurs sur son site ? (seulement par celui qui le met en ligne)

Bonne soirée à vous toute (Licette ) et tous
A demain



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

Saphira

Le/ton menu = oui validé par Licette (j'apprécie tes détails)

Le compteur = idem (pour cette raison que ta prestation d'hébergement aura besoin du PHP)

Bon... Licette la pauvrette m'attend pour son bain ; j'y vais

.

PS : Bien des personnes suivant les évènements passés (?) décident de tout plaquer et vivre autrement.

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

Trois petits tours et puis je reviens

Etre sous ton "patronage" c'est ma chance,

si tu veux bien me faire bosser encore pour qu'activement je participe à la construction....M E R C I

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

Trois petits tours...

Hé les copains, que je ne sois pas le seul à bosser hein

Voici du code qui ne mérite qu'à être amélioré suivant cahier des charges : car ici base seule de travail brute de décoffrage :

Principe de la disposition du menu :

#boite_menu {
	width: 800px;
	height: auto;
	color: blue;
 	margin-left : auto;
 	margin-right: auto; 
	font-size: 1.0em;
 	font-weight: bolder;
 	border: 1px solid #737477;	
}

.bouton_oval{
	display: inline-block; 
	vertical-align: top; 
    width: 110px;
    height: 40px;
	margin: 5px;
	background-color: #FDB086;
	border: 1px solid #737477; 
		
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
	
	-moz-box-shadow: 3px 3px 6px 0 #8F0000;
	-webkit-box-shadow: 3px 3px 6px #8F0000;
	box-shadow: 3px 3px 6px 0 #8F0000;
}

.text_menu {
    text-align: center;
    padding-top: 10px;
    font-size: 1.0em;
    color: blue; 
}	

		<div id="boite_menu">
		
			<div class="bouton_oval">
				<div class="text_menu">
					Accueil
				</div>	
			</div>	
		
			<div class="bouton_oval">
				<div class="text_menu">
					Chiens
				</div>	
			</div>	
			
			<div class="bouton_oval">
				<div class="text_menu">
					Chats
				</div>	
			</div>				

			<div class="bouton_oval">
				<div class="text_menu">
					Lapins
				</div>	
			</div>	
			
			<div class="bouton_oval">
				<div class="text_menu">
					Contact
				</div>	
			</div>		

			<div class="bouton_oval">
				<div class="text_menu">
					Livre d'Or
				</div>	
			</div>		
			
			
		</div>

A demain

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

Premier jet pour base à modifier à souhait, puisque ici en CSS mano tout est réglable : (pas comme dans vos usines à gaz, bandes de grandes jalouses )

Voici l'image de base à placer dans un dossier nommé images (même dossier que tes pages) :

Ci-dessous le CSS remanié (pour l'instant le HTML est encore valable) :

#boite_menu {
	width: 800px;
	height: auto;
	color: blue;
 	margin-left : auto;
 	margin-right: auto; 
	border: 1px solid yellow;	
}

.bouton_oval{
	display: inline-block; 
	vertical-align: top; 
    width: 110px;
    height: 80px;
	margin: 5px;
	background: center / contain no-repeat url("images/patte.gif"), #A2A06C;
	border: 1px solid #737477; 
		
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
	
	-moz-box-shadow: 3px 3px 6px 0 #8F0000;
	-webkit-box-shadow: 3px 3px 6px #8F0000;
	box-shadow: 3px 3px 6px 0 #8F0000;
}

.text_menu {
    text-align: center;
    padding-top: 10px;
    font-size: 1.5em;
	font-weight: bolder;
    color: #151558; 
}	
Jean-Pierre
 Posté le 12/06/2020 à 13:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Aller, une dernière pour la route, sinon Licette va encore brailler pour avoir en son assiette sa feuille de salade !

Aspect 100% modifiable à souhait

Cette mouture du menu est désormais fonctionnelle/cliquable -----------> http://lalimacefolle.com/tests/saphira/saphira.html

Remarquons l'option "active" sur le bouton "Chien" = c'est à dire que le visiteur se trouve SUR cette page :

Voici les codes remaniés par ordre, CSS et ensuite page HTML :

/* ================================================================================= */
/* ================================================================================= */

/*====== Nav system ========
	Credits:
	http://css.maxdesign.com 
	http://css.maxdesign.com.au/index.htm 
	http://cssbook.maxdesign.com.au/
	http://css.maxdesign.com.au/listamatic/horizontal02.htm 
	http://css.mammouthland.net/css3/coins-arrondis.php */

#navcontainer a {
	padding: 5px 20px; 
	display: inline-block; 
	vertical-align: top; 
	width: 80px;
	height: 50px;
	margin: 5px;
	background: center / contain no-repeat url("images/patte.gif"), #A2A06C;
	border: 1px solid #737477; 
	text-align: center;
	padding-top: 10px;
	font-size: 1.2em;
	font-weight: bolder;
		
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;

	-moz-box-shadow: 3px 3px 6px 0 #8F0000;
	-webkit-box-shadow: 3px 3px 6px #8F0000;
	box-shadow: 3px 3px 6px 0 #8F0000;
}

#navcontainer a:link, #navcontainer a:visited {
	color: #0F0F43;  	
	/* background-color: #D1CE98; */
	letter-spacing: 1px;	
	text-decoration: none;   
}

#navcontainer a:hover {
	/*background-color: #800000;*/
	padding-top: 80px;
	border: 1px solid navy;
	font-weight: bold;	  
	text-decoration: none;
	
	background: center / contain no-repeat url("images/patte.gif"), #A2A06C;	
} 

#active a:link { /*, #active a:visited, #active a:hover { */
	height: 120px;
	font-size: 1.5em;	
	color: #670F0F;
	font-weight: bold;	    
	background-color: #D69D9D;   
	border: 1px solid navy;
	text-decoration: none; 	

	-moz-border-radius: 150px / 150px;
	-webkit-border-radius: 150px / 150px;
	border-radius: 150px / 150px;	
}
/*====================/ Nav system =====================*/


.boite_menu {
	width: 800px;
	height: auto;
	color: blue;
 	margin-left : auto;
 	margin-right: auto; 
	border: 1px solid yellow;	
}

.bouton_oval{
	display: inline-block; 
	vertical-align: top; 
    width: 110px;
    height: 80px;
	margin: 5px;
	background: center / contain no-repeat url("images/patte.gif"), #A2A06C;
	border: 1px solid #737477; 
		
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
	
	-moz-box-shadow: 3px 3px 6px 0 #8F0000;
	-webkit-box-shadow: 3px 3px 6px #8F0000;
	box-shadow: 3px 3px 6px 0 #8F0000;
}

.text_menu {
    text-align: center;
    padding-top: 10px;
    font-size: 1.5em;
	font-weight: bolder;
    color: #151558; 
}	

.

		<p class="space_super"></p>
		
		
		<div class="boite_menu">
			<div id="navcontainer">
				<span><a href="index.html">Accueil</a></span>
				<span id="active"><a href="chien.html">chien</a></span>
				<span><a href="chat.html">chat</a></span>
				<span><a href="contact.php">Contact</a></span>
				<span><a href="./BAGB/index.php">Livre d'Or</a></span>
			</div>
		</div>



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

Bonsoir Licette et Jean-Pierre

Holala, Je suis BLUFFEE !!

Je viens d'enregistrer ta mouture de 13h14 (hé oui, j'ai besoin de m'y repérer dans toutes ces lignes ) et je ne parviens pas au même résultat, OUIN OUIN ...

Devrais-je "fusionner" le HTML d'hier 23h29 avec celui d'aujourd'hui ??
(toutes les pages ET l'empreinte de patte sont enregistrées dans le même dossier)

Bon bain à Licette, je crois que c'est son heure

Merci pour ta patience et à bientôt

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

C'est plus simple, tu as la page en ligne : donc le code source + le CSS directo

L'image = non, j'ai expliqué qu'il fallait que tu la places dans un dossier nommé "images".

Si ici par exemple plusieurs moutures d'une même class CSS ; hé bien simplement écraser l'ancienne et c'est tout.

Si tu sais pas : tu dis

midnightblue
 Posté le 13/06/2020 à 11:32 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit 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 )

.../...

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 )


Mon Cirque Codesque vous remercie de votre offre de collaboration mais le poste de codeur est déjà occupé par un singe savant. Comme en sus il joue de la guitare et sait cuire les oeufs au plat, nous le gardons. Le poste n'est donc pas à pourvoir. Cerise sur le Gato (c'est le nom du singe), son code que vous jetez en pâture sur le forum, est valide W3C - World Wide Web Circus comme vous savez - ce qui est loin d'être le cas des pages de votre barnum de lalimacefolle.com, qui passées à la même moulinette du W3C Validator, donnent un résultat plus proche de la chair à saucisse que du caviar.
La direction vous suggère donc de vous exercer à apprendre quelques bonnes manière à votre limace, avant que de vouloir dresser les éléphants du Cirque à mettre genou à terre devant Sa Majesté des Codes. Ce sera à coup sur moins périlleux pour vous et votre gastéropode caractériel.
Nous avons, par contre, un emploi de clown qui pourrait vous convenir. Faire offre. Merci.

*µ*

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

Cher midnightblue

Désolé de t'avoir vexé à ce point, mon intention était toute autre crois-le bien ; si ce nez (heuuu), si ce n'est dis-je de t'aider.

Je te remercie de m'avoir signalé les quelques petites erreurs. Je viens d'en corriger en vitesse quelques unes.
Les autre je verrais après... Pas de quoi fouetter une chatte

Tenter d'aider un copain ; ça c'est vraiment appréciable et je t'en remercie

(Ton code en question est peut-être valide au WC3 mais perso contempler un brin d'HTML pur encapsulé CSS... Et c'est justement en ce point que je voulais sincèrement t'aider)

Licette souhaitait lire ton message, mais j'ai refusé et tu sais pourquoi : pour éviter cela ---->

JP

PS : aller, ne fais pas l'enfant gâté et viens nous aider et montre-nous que tu codes pas mal du tout.

Le but des forums c'est justement cela : PERSONNE ne peut se prétendre le plus fortiche (moi y compris). Nous trouverons TOUJOURS plus fort que nous. Et c'est en cela qu'un forum apporte à tout le monde, non ?

Reviens ici pour faire une grosse bavouille à Licette afin qu'elle sache t'apprécier à ta juste valeur.

Sa Majesté des Codes te salue ami midnightblue

Alors très vite, reviens nous faire une grosse bavouille à Licette

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

Saphira : Licette me dit que tu dois t'emmêler les pinceaux avec tout ce code que je t'ai déversé, alors voici pour plus de précisions :

La disposition générale DANS le dossier contenant ta PAGE et ton CSS :

Vois-tu : TOUT ça dans le même dossier ici nommé "saphira".

Nouvelle page HTML complet :

<!DOCTYPE html> 
<html> 
	<head> 
		<title> Mon Menu pattes de chiens </title> 
		<link href="saphira.css" media="screen" type="text/css" rel="stylesheet" />
	</head> 
	<body> 

			
		
		<div class="boite_menu">
			<div id="navcontainer">
				<span><a href="index.html">Accueil</a></span>
				<span id="active"><a href="chien.html">Chien</a></span>
				<span><a href="chat.html">Chat</a></span>
				<span><a href="lapin.html">Lapins</a></span>
				<span><a href="contact.php">Contact</a></span>
				<span><a href="./BAGB/index.php">Livre d'Or</a></span>
			</div>
		</div>





	</body> 
</html>

Ensuite le CSS COMPLET :

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


/* ================================================================================= */
/* ================================================================================= */

/*====== Nav system ========
	Credits:
	http://css.maxdesign.com 
	http://css.maxdesign.com.au/index.htm 
	http://cssbook.maxdesign.com.au/
	http://css.maxdesign.com.au/listamatic/horizontal02.htm 
	http://css.mammouthland.net/css3/coins-arrondis.php */
#navcontainer a {
	padding: 5px 20px; 
	display: inline-block; 
	vertical-align: top; 
	width: 80px;
	height: 50px;
	margin: 5px;
	background: center / contain no-repeat url("images/patte3.gif"), #A2A06C;
	border: 1px solid #737477; 
	text-align: center;
	padding-top: 10px;
	font-size: 1.2em;
	font-weight: bolder;
		
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;

	-moz-box-shadow: 3px 3px 6px 0 #8F0000;
	-webkit-box-shadow: 3px 3px 6px #8F0000;
	box-shadow: 3px 3px 6px 0 #8F0000;
}

#navcontainer a:link, #navcontainer a:visited {
	color: #0F0F43;  	
	letter-spacing: 1px;	
	text-decoration: none;   
}

#navcontainer a:hover {
	padding-top: 80px;
	border: 1px solid navy;
	font-weight: bold;	  
	text-decoration: none;
	background: center / contain no-repeat url("images/patte3.gif"), #D69D9D;	
} 

#active a:link { /*, #active a:visited, #active a:hover { */
	height: 120px;
	font-size: 1.5em;	
	color: #670F0F;
	font-weight: bold;	    
	background-color: #D69D9D;   
	border: 1px solid navy;
	text-decoration: none; 	

	-moz-border-radius: 150px / 150px;
	-webkit-border-radius: 150px / 150px;
	border-radius: 150px / 150px;	
}

#active a:hover { 
	height: 50px;
	font-size: 1.5em;	
	color: #670F0F;
	font-weight: bold;	    
	background-color: #D69D9D;   
	border: 1px solid red;
	text-decoration: none; 	

	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;	
}
/*====================/ Nav system =====================*/


.boite_menu {
	display: inline-block; 
	vertical-align: top; 	
	
	
	width: auto;
	height: auto;
	color: blue;
	
 	margin-left : auto;
 	margin-right: auto; 
	
	border: 1px solid yellow;	
}

.bouton_oval{
	display: inline-block; 
	vertical-align: top; 
    width: 110px;
    height: 80px;
	margin: 5px;
	background: center / contain no-repeat url("images/patte.gif"), #A2A06C;
	border: 1px solid #737477; 
		
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
	
	-moz-box-shadow: 3px 3px 6px 0 #8F0000;
	-webkit-box-shadow: 3px 3px 6px #8F0000;
	box-shadow: 3px 3px 6px 0 #8F0000;
}

.text_menu {
    text-align: center;
    padding-top: 10px;
    font-size: 1.5em;
	font-weight: bolder;
    color: #151558; 
}	

Voilà, tu as tout.

N'oublie pas de placer dans le nouveau dossier "images" la patte de cleps

A te lire pour de nouvelles aventures

Licette et JP

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

Bonjour Licette, Jean-Pierre et Midnightblue


Restons " zen " svp,
j'apprécie particulièrement tous vos appuis successifs

Il nous arrive à tous d'appréhender une lecture de diverses manières, pour autant,
je ne doute pas de la volonté de CHACUN de vouloir oeuvrer pour prêter main-forte en prenant part à cette "aventure" , Merci

Je galérais depuis tout à l'heure avec ma patte de chien car oui, c'était enregistré mais.... après VISU de ton dernier post , Licette avait raison !!!! :

Saphira : Licette me dit que tu dois t'emmêler les pinceaux avec tout ce code que je t'ai déversé, alors voici pour plus de précisions :

La disposition générale DANS le dossier contenant ta PAGE et ton CSS :

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

WAOUH !!
Voici le visuel

Merci !!!!

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

Bravo !

Partant de là, sachant que tout l'apect est paramétrable via CSS, tu peux par exemple changer les couleurs ; diminuer les proportions de tel ou tel autre élément ; etc.

Encore une fois : sur chaque point incompris, n'hésite pas à demander !

Surtout : as-tu bien pigé en gros le principe d'une class ? Au moins le signe du DÉBUT et de sa FIN ? Point hyper important !!!

.

Je viens d'avoir des critiques d'aucuns me disant : "dans ton CSS, il y a des tas de choses en trop ! "

Ma réponse : bin oui... un peu le principe d'une biblio : l'on pioche suivant ses désirs...

.

Ceci dit, une fois digéré tout ça ; dis-nous quelle sera l'étape suivante.

Licette et JP

Publicité
Dreamer
 Posté le 13/06/2020 à 15:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

saphira a écrit :

WAOUH !!
Voici le visuel

Merci !!!!

Puis-je faire une petite remarque concernant le visuel... J'aime pas le pointillé autour du lien cliqué et pour éviter ceci un peu de css

a:focus { outline:0; }

Sur ce, je retourne à ma sieste crapuleuse !!

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

Tonton Zozo !

Oui en effet et merci de ta contribution.

Mais regarde sur mon site la démo : http://lalimacefolle.com/tests/saphira/saphira.html

Y vois-tu ce pointillé ?

Peut-être est-ce son logiciel de capture d'écran qui en est à l'origine.

Quid ?

(Une autre bordure entourant tout ce menu existe en jaune : c'est simplement pour "matérialiser" cet espace)

Licette te fait de grosses léchouillles

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

Par précaution en local pour l'instant j'ai ajouté ta requête :

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

Jean-Pierre a écrit :

Tonton Zozo !

Oui en effet et merci de ta contribution.

[...]

Licette te fait de grosses léchouillles

Désolé, mais j'avais regardé le rendu de notre amie !!

Et une feuille de salade pour Licette et de la laitue bien tendre SVP !!

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

Bonzour mon tonton Zozo

Tu es zenti, grâce à toi mon papounet vient de me donner une belle et grosse feuille de laitue très fraîsse miammm

Pour la peine, ze vais te santer une sanson

Licette

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

Encore une variante avec une nouvelle papatte

Si tu préfères je te la donnerais.

Aussi cette variante en virant le "color" sur deux occurrences : background: center / contain no-repeat url("images/patte4.gif"); /*, #A2A06C;*/

Également cette autre présentation plus et purée (ouppsss) épurée dis-je :



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

Voir ici la news démo : http://lalimacefolle.com/tests/saphira/saphira.html

Gilles



Modifié par Jean-Pierre le 14/06/2020 13:56
saphira
 Posté le 14/06/2020 à 13:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Bonjour Licette, Jean-Pierre et Dreamer

Oui, c'est bien l'impression écran qui donnait cet effet de contour supplémentaire ??
Mon regard n'était pas aussi expert que le vôtre, je ne l'avais pas remarqué en enregistrant l'image

Pour Licette, une belle ration, elle en aura au moins pour plusieurs jours !!

Très chouette la nouvelle papatte, j'ai un faible pour celle-ci


Pour la suite, pourrais-tu m'indiquer comment rattacher mon fichier PowerPoint (ou Pdf) sur un des onglets s'il te plait ?

J'ai préparé mes brassards, ma bouée, je suis prête !!!!

Merci

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

............

Je conserverai volontiers l'encart " Clinique de la Papatte Agile "

Publicité
Pages : Début ... 2 3 [4] 5 6 ... Fin
[Début] Page 4 sur 12 [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
29,99 €Souris gamer Logitech MX518 à 29,99 €
Valable jusqu'au 14 Août

Boulanger solde la nouvelle version Legendary de la souris Logitech MX518 qui passe à 29,99 € alors qu'on la trouve ailleurs à 59,99 €. Cette très bonne souris dédiée aux joueurs dispose d'un capteur optique très précis Hero 16000 DPI, 8 boutons programmables et une mémoire permettant de sauvegardera 5 profils d'utilisation différents. 


> Voir l'offre
83,93 €Disque dur externe portable Seagate Basic 4 To USB 3.0 à 83,93 €
Valable jusqu'au 14 Août

Amazon fait une promotion sur le disque dur externe portable Seagate Basics d'une capacité de 4 To qui passe à 83,93 € livré gratuitement. Ce disque dur externe portable au format 2,5 pouces dispose d'une interface USB 3.0 compatible USB 2.0. Une excellente affaire pour ce disque dur qui offre des débits de 115 Mo/s. Il n'est pas soudé et est donc démontable si vous souhaitez le réutiliser ailleurs (console, NAS, PC).


> Voir l'offre
118,34 €Kit de 32 Go (2 x 16 Go) de mémoire DDR4 Corsair Vengeance LPX 3200 MHz à 118,34 € livré
Valable jusqu'au 14 Août

Amazon Allemagne fait une belle promotion sur le kit de 32 Go (2x16 Go) de mémoire DDR4 Corsair Vengeance LPX 3200 MHz CL16 qui passe à 113,69 € (avec la TVA ajustée). Comptez 4,65 € pour la livraison en France soit un total de 118,34 € livré. alors qu'on le trouve ailleurs à plus de 170 €.

Vous pouvez utiliser votre compte Amazon France sur Amazon Allemagne et il n'y a pas de douane. Si vous êtes perdu en allemand, vous pouvez traduire le site en anglais.


> 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