Partage

Problème de font-size

Css

Sujet résolu

3 mars 2021 à 18:31:51

Bonjour,

J'ai créer un partie mobile en HTML et CSS, j'ai une page "main_outd.php" qui est la page quand on est connecté, et j'affiche les pages avec ajax dans un div, sauf que dans une page que je charge (qui est sous forme de box) , quand il y a trop de box sur la page, la police devient énorme

Mais quand j'essaye de réduire la police, tout deviens minuscule 😡

Ma page HTML (main_outd):

<body onload="start()">
			<div class="page" id="aff-cpe-m">
				<!-- LA PAGE SE CHARGE ICI  -->
			</div>
</body>

La page chargée :

<div class="flex-box-m">
		<div class="box-info-menu">
			<div class="title-box-msg-m">Infos de l'établissement</div>
			<div class="content-msg-m">
				<div onclick="viewMsg('<?= $ie['id'] ?>')" class="info-msg-m">
							<div class="info-msg-icon"><i class="fas fa-exclamation-circle"></i></div>
							<div class="info-msg-txt"><span><b><?= $ie['titre'] ?></b></span><span style="font-size: 35px;">Publiée le <?= $ie['date_debut'] ?> par <?= $ie['createur'] ?></div>
						</div>
			</div>
		</div>
		<div class="box-info-menu">
			<div class="title-box-apm-m">Appel More résumé</div>
			<div class="content-apm-m">
				<i>Aucune information pour le moment !</i>
			</div>
		</div>
		<div class="box-info-menu">
			<div class="title-box-agd-m">Agenda</div>
			<div class="content-agd-m">
				<i>Aucune information pour le moment !</i>
			</div>
		</div>
		<div class="box-info-menu">
			<div class="title-box-rdv-m">Prochain rendez-vous</div>
			<div class="content-rdv-m">
				<i>Aucune information pour le moment !</i>
			</div>
		</div>
		<div class="box-info-menu">
			<div class="title-box-trv-m">Demande de travaux</div>
			<div class="content-trv-m">
				<i>Aucune information pour le moment !</i>
			</div>
		</div>
	</div>

Merci à ceux qui m'aideront !

-
Edité par Joey_czo 3 mars 2021 à 18:36:12

Domi65

3 mars 2021 à 21:47:34

« Merci à ceux qui m'aideront ! »

Ça va être dur sans ton CSS

Et puis, mets-nous plutôt le code HTML que celui en PHP qui le produit.

Maintenant, quand je vois un font-size de 35 px, je ne suis pas surpris que le texte soit énorme.

Dernier point, un font-size, ça devrait être en em ou rem. Pourquoi ? Parce que tu ne sais pas la taille qu'a demandé par défaut l'utilisateur. Si ça se trouve, il est malvoyant et demande un affichage minimum de 40px. Du coup, tout ce qui est en-dessous aura la même taille : 40px. Alors que si u mets 2rem, ce sera de fois la taille de base et si tu mets 2em, ce sera de fois celle dont il hérite. Ça aura beaucoup plus de sens.

Joey_czo

3 mars 2021 à 23:36:49

Domi65 a écrit:

Ça va être dur sans ton CSS

Oui, mais sauf que mon code CSS est divisé en plusieurs pages, et je ne peux pas tout mettre ici 😅

Et même en essayent de mettre en rem, il y a un cran où d'un coup c'est minuscule, et si j'augmente un peu (Passage de 1.28 à 1.29rem) ça devient énorme, donc il n'y a pas de juste milieu.

Mais je viens de remarque que le problème arrive lorsqu'il y a trop de box sur la page (lorsqu'il faut scroll par exemple)

Avec 4 ou 3 box

(4 ou 3 box)

Avec 1 ou 2 box

(avec 1 ou 2 box)

Du coup c'est pas possible un juste milieu pour affichage mobile je suppose ?

(Voilà mon code qui gère les box

.flex-box-m
{
	margin: 10px;
	margin-top: 4vh;
	display: flex;
	flex-direction: column;
}
.box-info-menu
{
	margin: 10px;
	width: auto;
}
.title-box-msg-m
{
	background: #22248EFF;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5vh;
	color: white;
	display: flex;
}
.content-msg-m
{
	padding: 15px;
	width: auto;
	border: 3px solid #22248EFF;
	max-height: 20vh;
	overflow: auto;
	font-size: 2em;
}	transition: 0.5s;
.info-msg-icon
{
	font-size: 85px;
	width: 15%;
}
.info-msg-txt
{
	width: 85%;
	text-align: left;
	font-size: 45px;
	display: flex;
	flex-direction: column;
}
.title-box-apm-m
{
	background: #CAC026FF;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5vh;
	color: white;
	display: flex;
}
.content-apm-m
{
	padding: 15px;
	width: auto;
	border: 3px solid #CAC026FF;
	max-height: 20vh;
	overflow: auto;
	font-size: 20px;
	font-size: 2.5em;
}
.title-box-agd-m
{
	background: #00A810FF;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5vh;
	color: white;
	display: flex;
}
.content-agd-m
{
	padding: 15px;
	width: auto;
	border: 3px solid #00A810FF;
	max-height: 20vh;
	overflow: auto;
	font-size: 20px;
	font-size: 2.5em;
}
.title-box-rdv-m
{
	background: #C03CC7FF;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5vh;
	color: white;
	display: flex;
}
.content-rdv-m
{
	padding: 15px;
	width: auto;
	border: 3px solid #C03CC7FF;
	max-height: 20vh;
	overflow: auto;
	font-size: 20px;
	font-size: 2.5em;
}
.title-box-trv-m
{
	background: #FE812DFF;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5vh;
	color: white;
	display: flex;
}
.content-trv-m
{
	padding: 15px;
	width: auto;
	border: 3px solid #FE812DFF;
	max-height: 20vh;
	overflow: auto;
	font-size: 20px;
	font-size: 2.5em;
}

-
Edité par Joey_czo 3 mars 2021 à 23:38:54

PookieTreePop

4 mars 2021 à 11:17:46

Salut, pourquoi as-tu deux font-size différentes à chaque fois ?

(Dans .content-msg-m ta transition est en dehors des accolades)

Domi65

4 mars 2021 à 12:17:38

Tu mets 2 règles de taille pour tes classes content-apm-m, .content-agd-m, .content-rdv-m et content-trv-m qui se contredisent.

Tu mets d'abord 20px puis 2.5em. La dernière règle est celle qui est retenue.

D'autre part, ce n'est pas comme ça que tu dois travailler. Vu que toutes les propriétés des classes sont les mêmes, sauf la couleur du bandeau. Tu as deux possibilités:

1) soit tu fais un style général dont le sélecteur prend les quatre classes et un autre pour chaque couleur de fond

<div class="class1">Aucune information pour le moment !</div>
<div class="class2">Aucune information pour le moment !</div>
<div class="class3">Aucune information pour le moment !</div>
<div class="class4">Aucune information pour le moment !</div>

.class1, .class2, .class3, .class4 {
/* tes règles générales ici /*
}
.class1{background: blue}
.class2{background: red}
.class3{background: green}
.class4{background: yellow}

2) Soit tu ajoutes une classe pour chacune des couleur

<div class="content blue">Aucune information pour le moment !</div>
<div class="content red">Aucune information pour le moment !</div>
<div class="content green">Aucune information pour le moment !</div>
<div class="content yellow">Aucune information pour le moment !</div>

.content {
/* tes règles générales ici /*
}
.blue{background: blue}
.red{background: red}
.green{background: green}
.yellow{background: yellow}

-
Edité par Domi65 4 mars 2021 à 12:19:50

Joey_czo

4 mars 2021 à 14:08:11

PookieTreePop a écrit:

Salut, pourquoi as-tu deux font-size différentes à chaque fois ?

(Dans .content-msg-m ta transition est en dehors des accolades)

Salut, alors c'était juste pour tester avec la nouvelle font-size, et oui, la transition c'est juste un problème de copier coller ici 😅

Domi65 a écrit:

Tu mets 2 règles de taille pour tes classes content-apm-m, .content-agd-m, .content-rdv-m et content-trv-m qui se contredisent.

Tu mets d'abord 20px puis 2.5em. La dernière règle est celle qui est retenue.

D'autre part, ce n'est pas comme ça que tu dois travailler. Vu que toutes les propriétés des classes sont les mêmes, sauf la couleur du bandeau. Tu as deux possibilités:

1) soit tu fais un style général dont le sélecteur prend les quatre classes et un autre pour chaque couleur de fond
<div class="class1">Aucune information pour le moment !</div>
<div class="class2">Aucune information pour le moment !</div>
<div class="class3">Aucune information pour le moment !</div>
<div class="class4">Aucune information pour le moment !</div>
.class1, .class2, .class3, .class4 {
/* tes règles générales ici /*
}
.class1{background: blue}
.class2{background: red}
.class3{background: green}
.class4{background: yellow}
2) Soit tu ajoutes une classe pour chacune des couleur
<div class="content blue">Aucune information pour le moment !</div>
<div class="content red">Aucune information pour le moment !</div>
<div class="content green">Aucune information pour le moment !</div>
<div class="content yellow">Aucune information pour le moment !</div>
.content {
/* tes règles générales ici /*
}
.blue{background: blue}
.red{background: red}
.green{background: green}
.yellow{background: yellow}

C'est bon j'ai modifié, mais cela ne règle pas mon problème, mais merci quand même 😕

(Update :

<div class="flex-box-m">
        <div class="box-info-menu">
            <div class="title-box-msg-m">Infos de l'établissement</div>
            <div class="content-msg-m">
                <div onclick="viewMsg('<?= $ie['id'] ?>')" class="info-msg-m">
                            <div class="info-msg-icon"><i class="fas fa-exclamation-circle"></i></div>
                            <div class="info-msg-txt"><span><b><?= $ie['titre'] ?></b></span><span style="font-size: 35px;">Publiée le <?= $ie['date_debut'] ?> par <?= $ie['createur'] ?></div>
                        </div>
            </div>
        </div>
        <div class="box-info-menu">
            <div class="title-box-apm-m">Appel More résumé</div>
            <div class="content-apm-m">
                <i>Aucune information pour le moment !</i>
            </div>
        </div>
        <div class="box-info-menu">
            <div class="title-box-agd-m">Agenda</div>
            <div class="content-agd-m">
                <i>Aucune information pour le moment !</i>
            </div>
        </div>
        <div class="box-info-menu">
            <div class="title-box-rdv-m">Prochain rendez-vous</div>
            <div class="content-rdv-m">
                <i>Aucune information pour le moment !</i>
            </div>
        </div>
        <div class="box-info-menu">
            <div class="title-box-trv-m">Demande de travaux</div>
            <div class="content-trv-m">
                <i>Aucune information pour le moment !</i>
            </div>
        </div>
    </div>

CSS :

.flex-box-m
{
	margin: 10px;
	margin-top: 4vh;
	display: flex;
	flex-direction: column;
}
.box-info-menu
{
	margin: 10px;
	width: auto;
}
.title-box-m
{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5vh;
	color: white;
	display: flex;
}
.content-m
{
	padding: 15px;
	width: auto;
	max-height: 20vh;
	overflow: auto;
	font-size: 2em;
}
.msg-m
{
	border: 3px solid #22248EFF;
}
.msg-t
{
	background: #22248EFF;
}
.apm-m
{
	border: 3px solid #CAC026FF
}
.apm-t
{
	background: #CAC026FF;
}
.agd-m
{
	border: 3px solid #00A810FF;
}
.agd-t
{
	background: #00A810FF;
}
.rdv-m
{
	border: 3px solid #C03CC7FF;
}
.rdv-t
{
	background: #C03CC7FF;
}
.trv-m
{
	border: 3px solid #FE812DFF;
}
.trv-t
{
	background: #FE812DFF;
}
.alrt-m
{
	border: 3px solid #FF0000FF;
}
.alrt-t
{
	background: #FF0000FF;
}

(t = pour le titre de la box | m = le contenue de la box)

-
Edité par Joey_czo 4 mars 2021 à 14:19:52

Domi65

4 mars 2021 à 17:57:14

Ton code chez moi ne produit rien d'anormal. Le texte Publié le est très grand, mais c'est normal puisque tu lui mets une taille de 35px

<span style="font-size: 35px;">Publiée le date_debut par createur</div>

Joey_czo

4 mars 2021 à 20:17:12

Tu as essayé en affichage mobile ?

Et c'est les textes "aucune information pour le moment" qui sont soient énormes, soient minuscule.

Domi65

5 mars 2021 à 0:37:17

Tu as essayé en affichage mobile ?

Non.

Si tu as un affichage sur mobile différent, c'est certainement que tu as des règles media queries.

-
Edité par Domi65 5 mars 2021 à 0:37:43

Joey_czo

5 mars 2021 à 13:59:10

Domi65 a écrit:

Tu as essayé en affichage mobile ?

Non.

Si tu as un affichage sur mobile différent, c'est certainement que tu as des règles media queries.

Je n'utilise pas de @media, j'ai directement fait un affichage mobile qui s'affiche seulement dès que la taille d'écran est inférieur à un certaines nombres, sinon il nous redirige vers le site de base (Mobile : https://mobile.monsite.fr | Normal : https://www.monsite.fr )

Mais je crois que c'est buggé, car quand il y a rien d'autre sur la page, le texte est petit (image 1), mais quand il y a autre chose, le texte est plus grand (image 2)

(image 1)

(image 2)

-
Edité par Joey_czo 5 mars 2021 à 15:02:07

Joey_czo

6 mars 2021 à 21:07:55

!up

PookieTreePop

6 mars 2021 à 21:18:33

Salut, tes codes sont assez confus, est-ce que tu peux juste partager le html et le css correspondant aux 2 dernières images que tu as partagées ?

Joey_czo

6 mars 2021 à 22:28:35

PookieTreePop a écrit:

Salut, tes codes sont assez confus, est-ce que tu peux juste partager le html et le css correspondant aux 2 dernières images que tu as partagées ?

Bien sur ! Enfaite il y a deux fichiers (Un, qui est "main_outd" qui est la page affichée, où les pages vont s'afficher grâce à des requetes ajax)

Main_outd.php :

<!DOCTYPE html>
		<html>
		<head>
			<meta charset="utf-8">
			<title>Menu CPE/Administrateur | SC+</title>
			<link rel="stylesheet" type="text/css" href="css/style_admin.css?n=0.06.334">
			<script type="text/javascript">
				function start(){
					setTimeout(function(){
						$("#loading-b").hide();
					},1300);
					loadHomeCPE();
				}
			</script>
			<script type="text/javascript" src="js/admin_mn.js?n=0.091"></script>
			<script type="text/javascript" src="js/page_cpe.js?n=0.049"></script>
			<script type="text/javascript" src="js/action_cpe.js?n=0.09.1"></script>
		</head>
		<body onload="start()">
			<div class="page" id="aff-cpe-m">
				<!-- LA PAGE SE CHARGE ICI  -->
			</div>
			<div id="loading-b" class="loading-block">
				<div class="loading-anim"><i class="fas fa-spinner"></i></div>
			</div>
			<footer class="nav-btn">
				<div onclick="loadHomeCPE()" class="btn-nav">
					<div class="icon-nav"><i class="fas fa-home"></i></div>
					<div class="text-icon">Menu</div>
				</div>
				<div onclick="loadEtabCPE()" class="btn-nav">
					<div class="icon-nav"><i class="fas fa-school"></i></div>
					<div class="text-icon">Établissement</div>
				</div>
				<a style="color: initial;text-decoration: none;" href="https://appelmore.schoolmore.cf/" target="_blank"><div class="btn-nav">
					<div class="icon-nav"><center><img alt="Logo Appel More" src="img/icones/appel_more.png" width="68%"></center></div>
					<div class="text-icon">Appel More</div>
				</div></a>
				<div onclick="loadMailCPE()" class="btn-nav">
					<div class="icon-nav"><i class="fas fa-paper-plane"></i></div>
					<div class="text-icon">Messagerie</div>
				</div>
				<div onclick="loadTBDCPE()" class="btn-nav">
					<div class="icon-nav"><i class="fas fa-columns"></i></div>
					<div class="text-icon">Tab. De Bor.</div>
				</div>
			</footer>
		</body>
		</html>

home_cpe (la page qui affiche le texte) :

<?php
session_start();
require '../php/bdd-connect.php';

if ($_SESSION['type'] == 'outd') {

		$ideta = $_SESSION['id_eta'];
		$reqcompte = $bdd->prepare("SELECT * FROM compte WHERE id = ? AND id_eta = ?");
		$reqcompte->execute(array($_SESSION['id'],$ideta));
		$infocompte = $reqcompte->fetch();
?>
<script type="text/javascript">
	setTimeout(function(){
		$(".page-mnu").css({'opacity':'1'});
	},300);
	$("#slc-pp").hide();
	$("#ind-pp").hide();
</script>
<div id="header-t" class="title-window mc-t"><h2>Menu</h2></div>
<hr class="bor-m">
<div class="page-mnu">
	<h3>Bonjour NOM - PRENOM</h3>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<?php
}
else
{
	echo "Impossible de charger la page ! (Rang = CPE)";
}
?>

CSS :

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*
{
	padding: 0;
	margin: 0;
}
body
{
	font-size: 1.8em;
	width: 100%;
	height: 100vh;
	font-family: 'Montserrat', sans-serif;
}
.title-window
{
	position: fixed;
	top: 0;
	width: 100vw;
	height: 15vh;
	font-size: 50px;
	padding-top: 20px;
	padding-left: 20px;
	background-size: contain;
	color: white;
	transition: 1.5s;
	animation-name: arriveheader;
	animation-duration: 1.5s;
}
.mc-t
{
	background: url('../img/waves/w_cpe_m.svg') no-repeat;
}
.ec-t
{
	background: url('../img/waves/w_cpe_e.svg?n=1') no-repeat;
}
.ma-t
{
	background: url('../img/waves/w_cpe_ma.svg') no-repeat;
}
.tbd-t
{
	background: url('../img/waves/w_cpe_tbd.svg') no-repeat;
}
.err-t
{
	background: url('../img/waves/w_err.svg') no-repeat; 
}
@keyframes arriveheader
{
	from{
		transform: translate(0px, -500px);
	}
	to{
		transform: translate(0px,0px);
	}
}
.page-mnu
{
	padding: 15.2vh 15px 7.5vh 15px;
	animation-name: arrivedroite;
	animation-duration: 0.8s;
	animation-delay: 0.3s;
	opacity: 0;
	transition: 0.8s;
}
hr.bor-m
{
	border-color: #e7008a;
	width: 1000px;
	animation-name: arrivedroite;
	animation-duration: 0.8s;
}
@keyframes arrivedroite
{
	from{
		transform: translate(-1000px, 0px);
	}
	to{
		transform: translate(0px, 0px);
	}
}

J'espère en avoir mis assez 😅

Bien sur, si tu veux, tu peux aller voir ici : https://demo.schoolmore.cf/mobile

Activer le mode "émulation d'appareil' pour afficher comme je le vois !

Cliquez sur "menu" pour afficher avec du texte et sur "Établissement" pour afficher sans texte !

-
Edité par Joey_czo 6 mars 2021 à 22:42:04

Joey_czo

10 mars 2021 à 13:47:28

!up

Joey_czo

12 mars 2021 à 17:19:25

J'ai essayé de chercher, mais je n'ai rien trouver ?

Domi65

12 mars 2021 à 18:15:38

On ne peut pas te répondre, car la page que tu as mise en lien demande une authentification.

EthanShkern

12 mars 2021 à 18:21:31

Bonjour

Joey_czo

12 mars 2021 à 19:23:54

Domi65 a écrit:

On ne peut pas te répondre, car la page que tu as mise en lien demande une authentification.

Il suffit juste de mettre "CPE/Administrateur" et cliquez sur se connecter

EthanShkern a écrit:

Bonjour

Domi65

12 mars 2021 à 19:40:40

erreur 404 !

MikePence

13 mars 2021 à 8:15:37

pourquoi as-tu deux font-size différentes à chaque fois ?

Joey_czo

13 mars 2021 à 11:32:13

MikePence a écrit:

pourquoi as-tu deux font-size différentes à chaque fois ?

Où ça ?

Domi65 a écrit:

erreur 404 !

C'est bon ! C'est réglé ! Mais pense à activer l'affichage mobile sinon tu seras redirigé

Joey_czo

16 mars 2021 à 17:46:08

!up

EthanShkern

17 mars 2021 à 16:12:39

Pas compris

Joey_czo

17 mars 2021 à 18:08:34

EthanShkern a écrit:

Pas compris

Ah mince, qu'es ce que tu n'as pas compris 😬

Joey_czo

19 mars 2021 à 19:41:16

Je sais que c'est pas très claire, si vois avez besoin de plus d'infos demandez moi 😅