Un espace qui perturbe la mise en page [pas résolu mais contourné]

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://xxxxxxxxxxxx

La vue avec un espace :
https://xxxxxxxxxxxxxxxx

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://xxxxxxxxxxxxxxxxxxxxxxxxxx
Modifié par lool_lauris (07 Dec 2021 - 17:57)

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 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>xxxxxxxxxxxxxxxxx</li>
								<li>xxxxxxxxxxxxxxxxxxxxx</li>
								<li>xxxxxxxxxxxxxxxxx</li>
							</ul><br />
							<p>Nous joindre par courrier postal :</p>
							<ul>
								<li>
								xxxxxxxxxxxxx<br />
								En Mairie<br />
								xxxxxxxxxxxxxx
								</li>
							</ul><br />
							<p>Directement par courriel :</p>
							<ul>
								<li>
									<div class="italic">contact&nbsp;[a]&nbsp;xxxxxxxxxxxxx&nbsp;[point]&nbsp;org</div>
								</li>
							</ul>
						</div>

ou

<div>
							<p>Nous contacter par téléphone :</p>
							<ul>
								<li>xxxxxxxxxxxxxxxx</li>
								<li>xxxxxxxxxxx</li>
								<li>xxxxxxxxxxxxxxxxxxxx</li>
							</ul><br />
							<p>Nous joindre par courrier postal :</p>
							<ul>
								<li>
									<div class="italic">contact&nbsp;[a]&nbsp;xxxxxxxxxxxx&nbsp;[point]&nbsp;org</div>
								</li>
							</ul>
							<ul>
								<li>
								xxxxxxxxxxxxx<br />
								En Mairie<br />
								xxxxxxxxxxxxx
								</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...
Modifié par lool_lauris (07 Dec 2021 - 17:56)

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

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

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:l'adresse_mail">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 (30 Dec 2021 - 21:39)

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)