Salut helvetdulac,

Si j'ai bien compris ton soucis, le problème viens du fait que l'image est centrée par rapport à la totalité de la largeur du navigateur alors que le texte est centré sur la largeur restante a coté du menu. Un petit croquis pour être plus clair :


Et plus tu réduis plus ça se voit.

La solution c'est donc de positionner les deux de la même façon :
- Soit positionner le texte par rapport à la totalité de la largeur du navigateur : enlever le décalage a gauche OU rajouter une marge à droite de la même taille que le menu
- Soit centrer l'image avec une marge gauche de le même taille que le menu.

Dis nous, on t'épaulera si besoin

Bonne soirée

bonjour à tous je butte sur un problème d'alignement horizontal, comment est il possible d'avoir des fenêtres de largeur identique qui en cas de changement de taille écran restent alignées horizontalement.
c'est visible sur https://www.cisalpin.com/manifestations/model%20page.php
je précise que les fenêtres sont identiques mais que les photos aléatoires sont cachés par les textes différent.
principe de travail:
une photo aléatoire est affichée au centre de la fenêtre.
si on clique sur une des icones placée à gauche, une fenêtre s'ouvre avec un texte specifique qui se place devant la photo.
si la taille de l'ecran change, la photo n'est plus correspondante avec la nouvelle page.
même si c'est un peu poussé, je dois indiquer que je suis à peu près nul en programmation et , âgé de 82 ans et ne parlant pas anglais, c'est très lent pour obtenir des résultat.
Merci d'avance de vos conseils.
helvetdulac
Modifié par helvetdulac (03 Dec 2021 - 19:42)

OK
Merci

Merci car j'avais zappé qu'on ne pouvait pas mettre la balise <code> dans ::before.
j'ai trouvé l'astuce.
Je personnalise .blockgroup:: before avec les mêmes styles que .col-body code.

.blockgroup::before,
.col-body code {
...
}

Modifié par cpalo (03 Dec 2021 - 13:00)

Salut,


Il faut refaire un petit point sur les sélecteur je pense

blockgroup::before code,

Les balise <code> a l'intérieur d'un before d'un élément avec la classe blockgroup : NOP (impossible)

::before cod

Les balise <code> a l'intérieur d'un before : NOP (impossible)

.blockgroup code

Les balise <code> a l'intérieur d'un élément avec la classe blockgroup : NOP (il est pas là)

.col-body code

Les balise <code> a l'intérieur d'un élément avec la classe col-body : YOU WIN


Le soucis ici c'est que comme ils sont tous empilé les premier font buguer l'interprétation et foire les suivant.

.blockgroup::before { 
    content: "Du texte";
}
.col-body code {
      color: red;
 } 

fonctionne bien. Voir juste "code" si jamais tu n'a pas d'autres balises code ailleurs...

bonne journée !
Modifié par _laurent (03 Dec 2021 - 11:47)

Bonjour,
Ci-dessous mon code simplifié.
Quelque soit le choix retenu (blockgroup::before code,::before code,.blockgroup code,), le code ne s'affiche pas en rouge dans la div blockgroup alors qu'il apparaît bien en rouge dans la div col-body.
Cordialement

<div class="col-body"><p><code>Un peu de texte</code></p></div>	
<div class="blockgroup">....</div>

.blockgroup::before { 
    content: "Du texte";
}
blockgroup::before code,
::before code,
.blockgroup code,
.col-body code {
      color: red;
 } 

Modifié par cpalo (03 Dec 2021 - 11:31)

Ton texte en absolute sera uniquement positionné par rapport à la div parente qui, elle, nécessite le position relative effectivement. La position absolute la sors du flux et ses freres et soeurs n'ont aucun impacte sur elle. L'image se placera selon le flux normal comme si de rien était

La "bonne pratique" ici c'est de ne pas rajouter de CSS inutile

Bonne journée

_laurent a écrit :
Salut,

Est-elle héritée ?

Non -&gt; https://developer.mozilla.org/fr/docs/Web/CSS/position

a écrit :
Dois je mettre absolument position:relative sur l'image ?

Pour quoi faire ? Ca change quelque chose ? Tu en a besoin ? Ca modifie le placement ?

J'étais persuadé qu'il fallait que mon image ai aussi cet attribut pour que le texte soit dessus mais apparemment ce n'est pas nécessaire. Je me suis aussi demandé si ça faisait partie des bonnes pratiques.

Salut,

a écrit :
Est-elle héritée ?

Non -> https://developer.mozilla.org/fr/docs/Web/CSS/position

a écrit :
Dois je mettre absolument position:relative sur l'image ?

Pour quoi faire ? Ca change quelque chose ? Tu en a besoin ? Ca modifie le placement ?

Bon, en rédigeant le message précédent, je me suis aperçu que le fait d'écrire crochetpointcrochet donne ceci .
C'est donc bien cet "orthographe" crochetpointcrochet qui donne en fin de compte une symbolique : dans ce forum c'est Smiley point.
Cette combinaison de caractères est donc l'origine du problème et est reconnu comme tout autre chose mais je ne sais pas quoi !

J'ai donc remplacé les crochets par des parenthèses et le problème de l'espace perturbateur n'existe plus.

J'aurai quand même bien voulu savoir quel était le fin mot du truc...

Merci à vous pour votre aide et vos conseils. Je passe le sujet en [contourné] puisque ça n'est pas résolu.
Modifié par lool_lauris (03 Dec 2021 - 00:08)

Bien-sûr, je pourrais mettre un lien cliquable mailto, je sais faire ça... ce n'est pas le problème. Et en fait, ça fonctionne assez bien le [a] et le [point], je ne reçois pas de spam.
Ce que tu me proposes est l'inverse de ce que je souhaite faire.

Comme je l'ai déjà décrit, le soucis est que si il y a un espace entre [point] et org alors l'intégralité du texte à la droite du formulaire se retrouve en dehors du cadre où il devrait normalement se trouver ; et ceci quelque soit la position de cette dernière phrase contact [a] luberon-sous-le-vent [ point] org, qu'elle soit la dernière phrase ou bien la première, si il y a un espace entre [point] et org alors l'intégralité du texte est dehors !

Je te remercie malgré tout de t'intéresser à mon problème et de tenter de m'aider à le résoudre.
Modifié par lool_lauris (03 Dec 2021 - 00:07)

Si je comprends bien, ton mail n'est pas cliquable ? Ce n'est pas très convivial pour les visiteurs. Il ne faut pas s'imaginer qu'ils vont le recopier à la main, en enlevant les at et le point, pour le mettre dans le client mail. En plus, les robots se rient de [a] et de [.], il savant décoder ça. Et l'adresse mail fait doublon avec le formulaire de contact.

Sinon, j'ai mis ton bout de code sur une page, tel qu'il est dans ton modèle. J'ai bien l'espace qui te manque, en utilisant les &nbsp;
Pourquoi ne pas mettre un lien cliquable :

<a href="mailto:contact@luberon-sous-le-vent.org">Contact mail</a>

Après, tu codes le mail, voici des exemples :
https://www.1formatik.com/161/comment-proteger-les-adressesmail-du-spam-sur-un-site-web
Modifié par Bongota (02 Dec 2021 - 18:30)

Cette page est mise en forme via 3 fichiers css :
1/ style_generic.css

@font-face {
	font-family: 'pt_sans_narrowregular';
	src: url('../polices/PT-sans/PTN57F-webfont.eot');
	src: url('../polices/PT-sans/PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
		url('../polices/PT-sans/PTN57F-webfont.woff') format('woff'),
		url('../polices/PT-sans/PTN57F-webfont.ttf') format('truetype'),
		url('../polices/PT-sans/PTN57F-webfont.svg#pt_sans_narrowregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'pt_sansregular';
	src: url('../polices/PT-sans/PTS55F-webfont.eot');
	src: url('../polices/PT-sans/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
		url('../polices/PT-sans/PTS55F-webfont.woff') format('woff'),
		url('../polices/PT-sans/PTS55F-webfont.ttf') format('truetype'),
		url('../polices/PT-sans/PTS55F-webfont.svg#pt_sansregular') format('svg');
		font-weight: normal;
		font-style: normal;
}

/* Eléments principaux de la page */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'pt_sansregular', Arial, Helvetica, 'Helvetica Neue', sans-serif;
	display: table;
	width: 100%;
}

.grid {
	display: table;
	top: 0;
	bottom: 0;
	height: 100%;
	width:100%;
}

header {
	display: table-row;
	width: 100%;
}

header .entete {
	min-width: 905px;
}

#no_javascript {
	padding: 20px;
	background-color: rgb(200, 100, 50);
	font-size: 1.5em;
	color: rgb(20, 20, 20);
	position: fixed;
}

section {
	padding: 0 12% 30px 12%;
	font-size: 1.2em;
	color: rgb(45, 45, 45);
}

section p {
	text-align: justify;
}

section a:visited {
	color: rgb(40, 40, 110);
}

section a:hover {
	color: rgb(150, 150, 150);
}

h1 {
	font-size: 1.5em;
	font-weight: normal;
	color: rgb(88, 88, 88);
	font-family: 'pt_sans_narrowregular', Helvetica, 'Helvetica Neue', sans-serif;
}

strong {
	font-weight: normal;
}

a {
	font-style: italic;
}

span a, figure a, a img {
	border: none;
}

a:focus {
	outline: 0;
} 

.inter_page img {
	width: 100%;
	margin-bottom: -5px;
	background-size: cover;
}

.vide {
	display: none;
}

.italic {
	font-style: italic;
}

/* LOGO ENTETE */
.logo_entete {
	display: inline-block;
	width: 450px;
	padding: 100px 0 30px;
	margin: 0 -50px 0 10%;
	font-family: 'pt_sans_narrowregular';
}

.logo_entete a {
	font-style: normal;
	text-decoration: none; 
}

.titre_entete a {
	font-style: normal;
	text-decoration: none;
}

.titre_entete {
	display: inline-block;
	padding-left: 10px;
	margin-bottom: 20px;
	font-size: 2.3em;
	font-family: 'pt_sans_narrowregular', Helvetica, 'Helvetica Neue', sans-serif;
}

#l {
	font-size: 9.5em;
}

#s {
	position: relative;
	bottom: 55px;
	font-size: 4.5em;
}

#ousle {
	position: relative;
	bottom: 55px;
	font-size: 3em;
}

#v {
	position: relative;
	right: 3px;
	bottom: 55px;
	font-size: 4.5em;
}

#ent {
	position: relative;
	right: 6px;
	bottom: 55px;
	font-size: 3em;
}

#uberon {
	position: relative;
	right: 225px;
	font-size: 3em;
}

/* MENU */
nav {
	display: table-header-group;
}

nav a {
	font-style: normal;
	text-decoration: none; 
}

.menu {
	top: 0;
	bottom: 0;
	position: fixed;
	right: -170px;
	overflow: hidden;
	width: 260px;
}

.menu p {
	float: left;
	width: 45px;
	padding: 0 5px 0 10px;
	font-family: 'pt_sans_narrowregular';
	font-size: 1.3em;
	color: rgb(100,100,100);
}

.menu p:hover {
	color: rgb(45, 45, 45);
	cursor: pointer;
}

.bouton_menu {
	float: left;
	width: 30px;
	height: 57px;
	background: url('../images/fleche_menu.svg') no-repeat;
}

#bordure_menu {
	float: left;
	background-color: rgba(45, 45, 45, .8);
	width: 120px;
	height: 100%;
	padding: 25px;
	padding-top: 20%;
	/*padding-top: 90%;*/
}

#bordure_menu ul {
	list-style-type: none;
	padding-left: 0;
}

#bordure_menu ul li {
	padding: 0 0 20px 8px;
}

#bordure_menu ul li a {
	text-decoration: none;
	font-size: 1em;
}

#visu_menu {
	position: relative;
	bottom: 43px;
	right: 8px;
}

/* FOOTER */
footer {
	display: table-row;
	height: 250px;
	background-color: rgba(45, 45, 45, 1);
}

#footer {
	text-align: center;
}

footer a {
	font-size: .95em;
	color: rgb(128, 128, 128);
	text-decoration: none;
}

footer a:hover {
	color: rgb(180, 180, 180);
}

footer figure {
	display: inline-block;
	margin: 60px 3% 0 3%;
	border: none;
}

footer figure a {
	font-style: normal;
}

footer p {
	font-size: .8em;
	font-style: italic;
	color: rgb(85, 85, 85);
	margin-top: 30px;
}

2/ style_club.css

header {
	background-image: url("../images/header1.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

/* ENTETE ET MENU */
#logo_entete_color a {
	color: rgb(220, 220, 220);
}

#titre_club {
	color: rgb(220, 220, 220);
}

#bordure_menu ul li a {
	color: rgb(180, 180, 180);
}

#bordure_menu ul li a:hover {
	color: rgb(220, 220, 220);
}

#bordure_menu li .club {
	display: none;
}

/* SECTION LSV*/
#section_lsv {
	background-color: rgba(255, 255, 255, .6);
	padding-top: 1px;
}

/* SECTION MEMBRES MACHINES */
#section_membres {
	background-color: rgba(225, 216, 214, .6);
	padding-top: 1px;
}

#damier_membres {
	max-width: 900px;
	margin: 0 auto 0 auto;
}

.membres {
	display: inline-block;
	font-size: .8em;
	font-style: italic;
	text-align: right;
	width: 200px;
	margin: .5%;
}

#section_machines {
	background-color: rgba(255, 255, 255, .6);
	padding-top: 1px;
}

#damier_machines {
	max-width: 1000px;
	margin: 0 auto 0 auto;
}

.machines {
	display: inline-block;
	font-size: .8em;
	font-style: italic;
	text-align: right;
	width: 300px;
	margin: .5%;
}

.thumb {
  border-radius: 3px;
}

.membres:hover {
	color: rgb(150, 150, 150);
}

.machines:hover {
	color: rgb(150, 150, 150);
}

/* SECTION TARIFS */
#section_tarifs {
	background-color: rgba(204, 204, 204, .6);
	padding-top: 1px;
}

table {
	width: 100%;
}

tr {
	background-color: rgb(200, 200, 200);
}

th, td {
	border: 1px solid rgb(153, 153, 153);
	text-align: center;
	font-weight: normal;
	width: 25%;
	padding: 5px 0;
}

th {
	font-style: italic;
	color: rgb(128, 128, 128);
}

/* SECTION BAPTEME */
#section_bapteme {
	background-color: rgba(255, 255, 255, .6);
}

/* CONTACT */
#section_contact {
	background-image: url("../images/fond_accueil_degrade_opaque45.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 1px;
	margin: 50px 0 2% 0;
}

.contact {
	width: 800px;
	margin: 50px auto 10px auto;
	border: 1px solid rgb(120, 120, 120);
	background-color: rgba(240, 240, 240, .8);
}

.contact #titre {
	margin-left: 5%;
}

.contact form  {
	display: inline-block;
	margin-left: 5%;
	max-width: 310px;
}

.contact div {
	float: right;
	margin: 0 5% 0 2%;
}

.contact input {
	width: 300px;
	height: 30px;
	border: 1px solid rgb(120, 120, 120);
	background-color: rgb(255, 255, 255)
}

.contact textarea {
	max-width: 330px;
	max-height: 390px;
	width: 300px;
	border: 1px solid rgb(120, 120, 120);
	background-color: rgb(255, 255, 255)
}

.contact input:focus {
	background-color: rgb(200, 200, 200);
}

.contact textarea:focus {
	background-color: rgb(200, 200, 200);
}

.contact #copie,#consentement {
	width: 15px;
	border: 1px solid rgb(120, 120, 120);
	background-color: rgb(255, 255, 255);
}

.contact .bouton {
	width: 150px;
	height: 30px;
	font-family: 'pt_sansregular';
	color: rgba(45, 45, 45, .7);
}

.contact .bouton:hover {
	color: rgb(20, 20, 20);
}

.contact a {
	color: rgb(45, 45, 45);
}

.contact .remarque { 
	display:none; 
}

.contact #legende_consentement {
	display:inline-block;
	margin-top: -7px;
	line-height: 90%;
	font-style: italic;
	font-size: 0.7em;
	color: rgb(128, 128, 128);
}

/* SECTION VENIR */
#section_venir {
	background-color: rgba(255, 255, 255, .6);
	padding-top: 1px;
}

iframe {
	width: 100%;
	height: 500px;
	border: 0;
}

3/ shadowbox.css

/*#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}*/
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
/*#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}*/
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png);}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}

#sb-info,#sb-info-inner{height:100px;line-height:20px;}
#sb-caption {clear:both;font-size:80%;line-height:16px;text-align: justify;color:#fff;} 
#sb-title-inner {font-style: italic;font-size: 1.1em;color: #fff;}

Bonjour,
serait-il possible de voir le css de la class "italic" ?
Merci.

Je viens de voir ta réponse, l'idée à l'air très bonne. Mais débutant est le titre de cette rubrique de Forum !!
je te mets le code de mon fichier HTML qui tourne en arrière plan. Dis moi si ça t'inspire un peu plus.

<!DOCTYPE html PUBLIC ">
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<title>Automatic update page</title>
		<script type="text/javascript">
		 
		 /* String.trim() n'est pas pris en charge par tous les navigateurs - il est donc nécessaire d'ajouter cette fonctionnalité */
		 if (!String.trim)
		 {
			String.prototype.trim = function () { return this.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ''); };
		 }
		 
		 /* Fonction principale pour appeler les sous-programmes */
		 function mainJavaScript()
		 {
			updateSingleVariablesTable();
			updateFrame();
		 }
			
		 /* Fonction de mise à jour des variables */
		 function updateSingleVariablesTable()
		 {
			var table = document.getElementById("singleVariablesTable");
			for(i = 1; i < table.rows.length; i++)
			{
				var tagValue = table.rows[i].getElementsByTagName("td")[0].innerHTML;
				var tagId = table.rows[i].getElementsByTagName("td")[1].innerHTML.trim();
				parent.document.getElementById(tagId).innerHTML = tagValue;
			}
		 }
		 
		 /* Fonction de mise à jour de la page Web */
		 function updateFrame()
		 {
			window.setTimeout(function(){location.reload()}, document.getElementById("updateInterval").innerHTML.trim());
		 }	
		</script>

	</head>
	<body onload="mainJavaScript()">

		<table border="1">		
				<tr><td>Rafraichissement en millisecondes</td></tr>
				<tr><td id="updateInterval">800</td></tr>
		</table>
					<br/>	
		<table id="singleVariablesTable" border="1">

				<tr><td>Valeurs</td><td>Variables</td></tr>

				<tr><td>:="ValPosition1":</td> <td>V1</td> </tr>
				<tr><td>:="ValPosition2":</td> <td>V2</td> </tr>
				<tr><td>:="ValPosition3":</td> <td>V3</td> </tr>
				<tr><td>:="ValPosition":</td> <td>V4</td> </tr>
				<tr><td>:="VoyOuvP":</td> <td>VOuvP</td> </tr>	
				<tr><td>:="VoyAtP":</td> <td>VAtP</td> </tr>
				<tr><td>:="VoyFerP":</td> <td>VFerP</td> </tr>
				<tr><td>:="VoyPos1":</td> <td>VPos1</td> </tr>
				<tr><td>:="VoyPos2":</td> <td>VPos2</td> </tr>
				<tr><td>:="VoyPos3":</td> <td>VPos3</td> </tr>
				<tr><td>:="VoyMonE":</td> <td>VMonE</td> </tr>
				<tr><td>:="VoyAtE":</td> <td>VAtE</td> </tr>
				<tr><td>:="VoyDesE":</td> <td>VDesE</td> </tr>
				<tr><td>:="VoyMonVL":</td> <td>VMonVL</td> </tr>
				<tr><td>:="VoyAtVL":</td> <td>VAtVL</td> </tr>
				<tr><td>:="VoyDesVL":</td> <td>VDesVL</td> </tr>								
		</table>
	</body>
</html>

Pour l'écriture de V5 que tu trouves bizarre, c'est l'écriture qu'il faut pour dialoguer avec l'automate (imposé Siemens !!!)
Modifié par Bebeul (03 Dec 2021 - 07:47)

gillesr a écrit :
A priori, chez Ionos tu peux utiliser composer :
https://www.ionos.com/digitalguide/websites/web-development/using-php-composer-in-ionos-webhosting-packages/
avec la possibilité de faire un chmod si besoin.
Sinon, la solution de repli, c'est l'install en local puis le ftp mais, c'est vrai que composer serait mieux.

Oui j'ai vu cette page moi aussi, mais je pense qu'elle s'applique à Ionos USA. Car ce qui est détaillé sur cette page ne fonctionne pas, je l'ai testé

Bonjour parsimonhi,

Excuse ma réponse tardive, j'étais en déplacement.
Merci pour tes bons conseils. Ça va nécessiter de se remettre au travail.

Pour répondre à ta question, pour les espaces, je n'utilise pas <br>, seulement la barre d'espace (je n'ai utilisé &nbsp que pour tenter de résoudre le problème actuel). J'utilise <br /> pour les retours à la ligne.

Sinon, mon problème reste d'actualité... c'est vraiment l'espace - celui de la barre d'espace ou &nbsp; - situé entre et org qui pose problème et ce quelque soit l'endroit où je positionne.

<div>
							<p>Nous contacter par téléphone :</p>
							<ul>
								<li>Alain GAUTIER : 06 09 06 79 90</li>
								<li>Gilles LAURENT : 06 23 37 85 39</li>
								<li>Laurent MONTENOIS : 06 78 59 65 57</li>
							</ul><br />
							<p>Nous joindre par courrier postal :</p>
							<ul>
								<li>
								LUBERON SOUS LE VENT<br />
								En Mairie<br />
								84360 PUGET SUR DURANCE
								</li>
							</ul><br />
							<p>Directement par courriel :</p>
							<ul>
								<li>
									<div class="italic">contact&nbsp;[a]&nbsp;luberon-sous-le-vent&nbsp;[point]&nbsp;org</div>
								</li>
							</ul>
						</div>

ou

<div>
							<p>Nous contacter par téléphone :</p>
							<ul>
								<li>Alain GAUTIER : 06 09 06 79 90</li>
								<li>Gilles LAURENT : 06 23 37 85 39</li>
								<li>Laurent MONTENOIS : 06 78 59 65 57</li>
							</ul><br />
							<p>Nous joindre par courrier postal :</p>
							<ul>
								<li>
									<div class="italic">contact&nbsp;[a]&nbsp;luberon-sous-le-vent&nbsp;[point]&nbsp;org</div>
								</li>
							</ul>
							<ul>
								<li>
								LUBERON SOUS LE VENT<br />
								En Mairie<br />
								84360 PUGET SUR DURANCE
								</li>
							</ul><br />
							<p>Directement par courriel :</p>
							
						</div>

Le résultat est le même, si il y a cet espace entre et org alors le texte sort du cadre qui lui est alloué. Par contre on peut mettre autant d'espaces que l'on souhaite ailleurs, le texte reste bien dans son cadre.
Je vais tenter les display:flex; ou display:grid...

A priori, chez Ionos tu peux utiliser composer :
https://www.ionos.com/digitalguide/websites/web-development/using-php-composer-in-ionos-webhosting-packages/
avec la possibilité de faire un chmod si besoin.
Sinon, la solution de repli, c'est l'install en local puis le ftp mais, c'est vrai que composer serait mieux.

Salut

J'ai des div avec dedans une image et un texte superposé.
La div englobante est donc en position relative et le texte en absolute.
Dois je mettre absolument position:relative sur l'image ou ai-je le droit de le zapper ?

c'est ce que j'ai tenté de faire, mais via SSH ça me met une erreur du genre "dossier en lecture uniquement"

Bonjour,

Pour la plupart des hébergements mutualisés, il faut d'abord installer les dépendances (en local) puis envoyer le tout par ftp.
Dans le cas de Ionos, il semble qu'ils fournissent un accès ssh, donc tu dois pouvoir te connecter au serveur en ssh et faire un 'composer install'.

izador888 a écrit :
je souhaite savoir comment placer deux div en haut a droite en css

Hello

Ton titre précise "Flex box", mais ton contenu parle de "placement de 2 div", pourquoi ?

As-tu une contrainte particulière qui t'impose Flexbox plutôt qu'une autre méthode ?

"en haut à droite" :
- par rapport à la page ? au parent ? à autre chose ?
- par dessus le contenu de page ou en restant dans le flux ?
- les 2 div doivent-il être l'un sur l'autre, l'un à côté de l'autre ?
- y a t-il un comportement différent sur petit écran (mobile) ?

Je crois qu'une illustration, ou plus de détails ne feront pas de mal

Bonne journée !

Devriez-vous vérifier les lignes et savoir si cela s'applique?

Ok merci !

Bonjour,
je travaille actuellement sur un outil permettant de générer des fichiers PDF à partir d'une page web. C'est très utile pour les factures clients par exemple...
Mais dans mon cas, je suis sur un serveur mutualisé car les besoins actuels ne demandent pas plus, or tout ce que je trouve semble devoir fonctionner avec une installation via composer. Or, sans accès root, pas d'installation de composer...
• wkhtmltopdf
• html2pdf
• mpdf

Ne puis je donc pas m'en servir sans composer ? ça me semble fou...
Serveur web Pro mutualisé chez Ionos.
Merci de votre aide

Salut

Je cherche à avoir un espace de largeur fixe après une puce (bullet list) lorsque le texte est justifié. &thinsp; semble être le caractère idéal mais sa largeur n'apparait pas fixe dans Chrome ni Safari (ça marche dans Firefox).
Ca n'a pas non plus voulu marcher en définissant une taille de police d'un <span>&nbsp;</span> (ni &ensp;).
Comment faire autrement (et simplement) ?

Merci d'avance

D'ailleurs ça vaudrait le coup de supprimer ces deux longs style="" et les mettre dans le CSS qui s'applique à chaque fois (je ne sais pas lequel) sous forme

border: 0; padding: 0;

Bein tu enlèves les 2

padding-left: 40px;

dans ça :

<div class="krown-column-container clearfix span6" style="border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 40px;">
		
			<h1><span style="font-size: 1em; font-weight: 600;">Artenza</span></h1>

			<h3><span style="color: #999999;">Naming, identité visuelle, UI design</span></h3>

	</div> 

	<div class="krown-column-container clearfix span6" style="border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;padding-top: 0px;padding-right: 40px;padding-bottom: 0px;padding-left: 40px;">
		
			<h2>Création du nom de marque, de l&rsquo;identité visuelle et webdesign d&rsquo;un site de photographies d&rsquo;art en ligne.</h2>

	</div>

Bonjour parsimonhi,

Merci pour ton suivi.

Je trouve ton lien Menu sur jeudego.org magnifique.

Je vais réfléchir à utiliser <details> pour mon problème.

Je vous tiens informés.

Oui effectivement.

Mais je n'arrive pas à appliquer le code CSS pour que cela fonctionne sur mon site.

Quel serait le code CSS ?

Ca a l'air de le résoudre en partie car Artenza et Naming retrouve leur place.
Je viens d'en découvrir un 2è juste après qui s'applique au paragraphe encore décalé...

Bonjour,

Merci pour votre réponse, effectivement il y a "padding-left: 40px;" sur la div englobante mais cela ne résout pas le problème si on la supprime.

Par contre j'ai identifié 2 "padding-left: 20px;" là où se trouve mon problème.
(voir les captures jointes)
J'arrive à voir ce que cela pourrait donner dans mon navigateur mais lorsque j'essaie de l'appliquer dans mon CSS cela ne fonctionne pas.

Sauriez-vous trouver le CSS exacte à appliquer dans ce cas ?

Je vous remercie

Je me suis rendu compte que si je lançais VSCode et Git Bash en mode administrateur alors la commande composer fonctionne, ainsi que je peux exécuter un fichier php du style 'php index.php'

J'utilise normalement un compte utilisateur normal sur mon mon PC (par sécurité)
on peut pas faire fonctionner composer avec un utilisateur normal?

En lisant rapidement ton tuto ils n'ont pas l'air d'utiliser un iframe mais de faire du javascript (ce qui m'a l'air plus simple)

Du coup si j'ai bien compris :
- Tu as un truc qui ressemble à une base de données et qui doit pouvoir évoluer tout seul dans le temps : (lu dans cette partie la : Reading PLC Data )
- Tu as une notation bizarre pour pouvoir récupérer des informations de cette espece de base de données : :=Nom_Variable:
- Tu as besoin d'un fichier qui va contenir ta variable (et qui ne fait rien d'autre je crois)
- Tu as besoin dans ton fichier index d'un bout de javascript pour recuperer la valeur puis en fonction de cette valeur de faire evoluer la source de ton image.

Du coup en supposant que tu pars sur le même principe avec un fichier IOCounter.htm (il faudrait le renommer en IOStatus.htm je suppose) qui va contenir ta variable ( :=V5: si j'ai bien compris)

Pour ton image, je lui rajouterai un id pour te faciliter la tache du coté javascript

<td align="center"> <img id="image_status" style="height: 55px; width: 55px" src="Images\Status0:=V5:.png"/> <cr> </td>

Ensuite pour le coté javascript (j'ai gardé le même nom de fichier que dans son exemple), il faudrait voir exactement ce que cela retourne pour être sur mais je suppose que tu auras besoin d'un truc du genre :

    <script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({ cache: false });
        setInterval(function() {
            $.get("IOCounter.htm", function(result){
// alert(result);  //a decommenter pour voir exactement ce que cela retourne comme résultat
            if(result.trim=="0"){
               $('#image_status').src="Images\Status00.png" ;
            }
           else{
               $('#image_status').src="Images\Status01.png" ;
           }
 
            });
        },5000);
        });
    </script>

Je vois un

padding-left: 40px;

en style inline sur la div englobante (je n'ai pas cherché à savoir pourquoi il ne s'applique pas dans les autres cas) ; ça pourrait être ça (?).

Bonjour,

Comment ajoutes-tu l'espace ? Avec un <br> ?

Sinon, ton code contient quelques maladresses qui n'aident pas.

1) On n'utilise pas les <br> pour ajouter de l'espace. On utilise plutôt du css. De même, tu utilises bien trop les balises <p>.
2) Tu utilises aussi des &nbsp;, mais d'une part, c'est plutôt à éviter (on peut utilise la plupart du temps white-space: nowrap; dans le css à la place), et d'autre part tu as mis &nbsp au lieu de &nbsp; (il manque le point-virgule). Les navigateurs s'en sortent mais c'est un miracle.
3) Il traine au moins un <fieldset> qui n'est pas dans une balise <form>.
4) Tu as trop de balises dans ton code qui gagnerait à être simplifié.
5) Tu as des unités en px : pas très indiqué pour faire éventuellement du "responsive".
6) Le contenu dans lequel tu cherches à ajouter un espace est en float:right. Mais il est placé dans le html après le contenu qui est censé flotter autour de lui. Or il faudrait qu'il soit placé avant pour que ce float:right ait du sens (si j'ai bien compris ce que tu veux faire). Or mettre ce contenu dans le html avant ne serait pas terrible pour la qualité de ton code. Mieux vaut garder l'ordre actuel et utiliser display:flex; ou display:grid sur le conteneur de classe "contact" pour placer ce contenu à droite dans ce conteneur.

EDIT: j'oubliais aussi qu'à un moment, tu utilises des <> autour d'un texte qui n'est pas une balise. Dans ce cas, il convient de mettre dans le code &lt; et &gt; au lieu de < et >. Sinon, ça peut perturber le navigateur, même s'ils s'en sortent la plupart du temps.

Amicalement,
Modifié par parsimonhi (30 Nov 2021 - 13:24)

Bonjour,

boteha_2 a écrit :
Est-ce assez bien supporté, question importante ?

C'est supporté assez largement. On oublie ie, mais bon, ie est-il encore un navigateur ?

Il y a quelques petits bugs mineurs d'affichage qui peuvent se manifester ici et là, mais ça marche quand même pas trop mal.

Surtout, ça permet d'afficher/cacher du contenu facilement sans bricolage et sans js. C'est son point fort.

Voir https://jeudego.org (qui est le site mentionné dans mon profil) en fenêtre pas trop large. On peut alors afficher/cacher le menu en cliquant sur "menu" en haut à gauche ("menu" n'apparait que si la fenêtre n'est pas trop large).

Ça marche aussi si on désactive js (j'ai prévu dans ce cas un comportement un peu différent : le menu peut être caché/affiché quelque soit la taille de la fenêtre).

Lorsqu'il n'y a qu'un contenu d'un seul niveau, tout un tas d'autres solutions sont possibles. Mais si tu passes à un contenu avec plusieurs niveaux d'imbrication (comme cela semble être ton cas), ça peut devenir vraiment intéressant d'utiliser la balise <details>.

Amicalement,

Bonjour parsimonhi,

Merci de ton suivi.

<details>, c'est en effet une piste intéressante.

Est-ce assez bien supporté, question importante ?

Si je me positionne dans le dossier où se trouve php.exe et si je lance composer, ça fonctionne, là....

voici ma variable d'environnement

Bonjour à tous,

j'ai installé Composer (le gestionnaire de package PHP) et je n'arrive pas à le faire fonctionner.
Pourtant j'ai bien mis le chemin du Php dans la variable d'environnement (windows 10)...
Quand je tape composer dans le terminal de VSCode (ou dans Git bash), il me crache une erreur.

des pistes???

merci


Modifié par lionel_css3 (30 Nov 2021 - 09:26)

Bonjour,

S'il y a pas mal de niveaux d'imbrication, peut-être que la balise <details> pourrait aider.

Amicalement,
Modifié par parsimonhi (30 Nov 2021 - 02:53)

Bonjour,

J'ouvre ce post dans la section html mais je ne suis pas sûr que ce ne soit pas le css qui est en cause...
Je suis confronté à un truc étrange que je ne réussis pas à résoudre.

Voilà, à la suite d'une liste à puce, dans le texte de la dernière ligne, je souhaite ajouter un espace mais celui-ci perturbe toute la mise en page et ce, quelque soit l'endroit où je positionne cette ligne de texte (j'ai fait des essais en déplaçant cette ligne) ; la totalité de la liste à puce sort du cadre qui lui est alloué !?
Je joins 2 images pour que vous vous rendiez compte du problème :

La vue sans espace :
https://ibb.co/XSDH1J7

La vue avec un espace :
https://ibb.co/wQdjdzH

La seule méthode que j'ai trouvée pour le moment qui permette de conserver l'espace, est de supprimer les balises <ul> </ul> mais ça ne me convient pas.

Je peux mettre en ligne le code mais ça risque d'être très volumineux. Voici le lien vers la page en question => http://luberon-sous-le-vent.org/club.php#section_contact
Modifié par lool_lauris (02 Dec 2021 - 23:56)

Bonjour,

Voilà mon problème :

Je créé mon site sous wordpress 5.8.2 avec le thème Koncept.

J'ai modifié dans mes pages Portfolio avec Visual Composer les alignements de textes à gauche (en padding left) pour être aligné sur le logo pour ne pas qu'en responsive le texte soit aligné sur mes photos qui n'ont pas de marge dans les petites résolutions.

J'ai appliqué des modifications en CSS pour ne pas que cela s'applique dans des résolutions plus grandes et en desktop.

J'espère être clair

Tout fonctionne très bien en desktop et en responsive SAUF sur la résolution qui correspond à "ipad".

Voir capture ci-jointe

Adresse du site : https://gddg.fr/portfolio/artenza/

Merci pour vos réponses






Modifié par Le_Grinch (29 Nov 2021 - 18:53)

Merci pour cette première réponse.
Les automates programmables (Siemens et les autres) S7 1200 ont une page Web consultable en ouvrant l'IP de l'automate sur un navigateur.


Cette page est programmable pour qui sait, pour avoir des informations sur l'état des entrées/sorties ou autre de cette automate. Ou commander quelque chose à distance, dans mon cas un moteur électrique.

Un exemple simple est disponible sur le site siemens et voilà la documentation
https://support.industry.siemens.com/cs/attachments/58862931/58862931_S7-1200_Webserver_DOKU_v11_en.pdf

j'essaye d'adapter cette exemple à mon petit projet pour ne plus avoir ce rafraîchissement complet qui est "fin moche".

Ce tuto, explique mieux que moi le processus.
https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages

Salut,

Je ne sais pas ce que c'est un "automate S71200" donc c'est sans doute lié, mais j'ai l'impression qu'il nous manque des informations car je crois que ce n'est pas réalisable juste avec ces infos

A ma connaissance, le concept de "variable" n'existe pas en html , du coup je ne comprends pas comment tu peux modifier des informations en changeant un iframe (je suppose que V1 et VALUE1 changent dans ta ligne d'exemple ?)

Logiquement il doit y avoir un langage de programmation quelque part qui possède ce concept de variable pour que tu puisses bosser (de base je verrais bien du javascript, mais c'est peut être autre chose ?)

Du coup en solution à base de javascript il doit te falloir faire des bouts de codes :

//Il faudra sans doute mettre ce qui suit dans une boucle avec du setTimeout pour faire ça à intervalle régulier. 
//une variable pour récupéré ton iframe 
var iframe = document.getElementById("TON_ID_IFRAME");
//une fonction pour recharger l'iframe, solution prise au pif  ici :  https://stackoverflow.com/questions/2064850/how-to-refresh-an-iframe-using-javascript  
iframe.contentWindow.location.reload(); 
//il te faudra un systeme pour prendre les nouvelels valeurs dans ton iframe 
iframe.contentWindow.document.querySelectorAll(); // ou getElementById() , c'est des exemples
//puis sur le même principe mettre à jour la source de ton image ensuite. 

Faute de mieux et d'aide, je crois que ça va se termine par des chiffres en jaune qui changent en même temps que la variable de l'automate. L'affichage d'un voyant n'a pas l'air possible !


Modifié par Bebeul (29 Nov 2021 - 11:51)

Salut,

Tu as un petit tuto flexbox ici : https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

Sinon pour comprendre un peu les différentes propriétés de flexbox au cas par cas, j'ai bien aimé ce site : https://flexboxfroggy.com/

Et ensuite pour pousser un peu plus la compréhension il y a ce site qui est pas mal aussi je trouve : https://css-tricks.com/almanac/properties/f/flex/

salut les loulous,
je suis débutante dans le développement, et je souhaite savoir comment placer deux div en haut a droite en css

Bonjour,

Peut-être faut-il passer cette discussion dans le forum javascript ?

Pour présenter le problème je me suis fendu d'un codepen

Le code est peut-être perfectible mais il fonctionne sur les PC de bureau comme sur les iPhone.

Le seul problème .concerne les portables sous Android, du moins la version où je teste.

Si tu touches une fois le bouton "Table d'orientation", la couleur change mais il ne se passe rien.
Pour ouvrir le menu il faut cliquer une deuxième fois.

J'ai essayé plusieurs variantes du javascript sans succès.