28172 sujets

CSS et mise en forme, CSS3

Probleme dimension texte

Bonjour,

je suis actuellement en train de concevoir un site, mais quelques problèmes de css s'opposent à moi, dont un qui est en rapport avec du texte.

J'ai comme consigne de rendre le site flexible suivant l'ouverture du navigateur (plein écran ou pas), donc de jouer avec des dimensions en % (jusqu'à là tout va bien).
Mais lorsqu'il y a du texte, par exemple dans l'entête, je n'arrive pas à ce que le texte réduise de taille lui aussi.

J'ai trouvé un bon tutoriel sur les dimensions des textes sur votre site (http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html), mais je pense que je n'ai pas du tout compris car pour ma part cela donne une taille fixe au texte comme pour les px.

Si quelqu'un à une idée sur mon erreur, merci beaucoup.
De plus, je travail sur IE8, mais ayant testé sur mozilla, cela ne marche pas non plus.

PS: je met un petit bout de code

body{
		position:absolute;
		width:100%;
		height:100%;
		background-color:silver;
		font-size:100%;
	}
	#tetebody{
		position:absolute;	
		width:90%;
		height:11%;
		background-color:green;
	}
	#tableentete{
		position:relative;
		left:1%;	
		width:100%;
		height:100%;
		background-color:red;
	}
	
	.logon{
		position:relative;
		width:100%;
		height:100%;
	}
	
	.tdN{
		width:12%;
		height:100%;
	}
	
	.tdtitre{
		width:auto;
		height:100%;
		color:white;
		text-align:center;
		font-size:1.6em;
	}
	
	.tdboutton{
		width:122px;
		height:100%;
	}




<body>
<div id="tetebody">
<table id="tableentete" border="1">
	<tr>
		<td class='tdN'><img class="logon" src="image2/logo.png" alt="logo"/></td>
		<td class='tdtitre'>Connexion</td>
		<td  class='tdboutton'>
		
		</td>
	</tr>
</table>
</div>
</body>

Modifié par achmed63 (10 May 2011 - 15:36)
C'est parce que les tailles de polices en pourcentage ne le sont pas relativement à la taille de l'écran (ou de son bloc).

Mais, elles le sont par rapport à la taille de la police de leur parent (si je ne me trompe pas; je ne suis vraiment pas sûr à 100% du référent exact sur lequel se base la taille de police)

Ce faisant, la taille est fixe puisque non dépendante de la taille de l'écran ou des conteneurs.


Dans ton cas, les media-queries me semblent être la solution recherché.

Mais, une note à part, peu importe la taille de l'écran, la police devrait avoir sensiblement la même taille, puisqu'il est question de lisibilité avant tout... Je ne vois pas bien l'utilité de réduire la taille de la police selon la taille de l'écran.
Bonjour,

Merci pour ta réponse, je vais chercher du coté des media-queries.

Pour l'utilité et être un peu plus précis, l'entête fais la largeur du navigateur et lorsque je réduis le navigateur de moitié par exemple, l'entête rétrécie, le logo et les boutons rétrécissent (c'est ok).
Mais lorsque la cellule du tableau contenant le texte a pour largeur la taille du texte, cela a pour effet de mettre à la ligne les mots (ce qui est normale dans ce cas).

Moi ce que j'aimerai pour éviter cet effet, et si c'est possible bien sûr, c'est que le texte se réduise de taille pour évite les passages à la ligne.


Merci.
Bonjour,

Je me suis tourné vers les media-queries comme conseillé, et ça me paraît être une bonne idée.
Le problème c'est que j'ai testé les deux exemples (http://www.alsacreations.com/xmedia/tuto/exemples/mediaqueries/index.html), mais cela ne marche pas sur IE8 de l'entreprise.
De plus j'ai lu que cela ne marchait qu'à partir de IE9.

Je me tourne donc vers vous si des fois vous avez une autre idée.

Merci de votre aide.
Modifié par achmed63 (12 May 2011 - 09:34)
Sujet clos
Aller à