28172 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

Alors j'ai encore testé plusieurs choses, seulement j'ai un souci avec mon code concernant l'adaptation de la police selon la résolution. J'ai recherché quelques trucs sur le web, comme ici chez vous : http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html, mais ca ne me parle pas beaucoup car ca ne marche pas quand j'y teste. J'ai beau faire les différentes manips, rien ne bchange, mon texte reste toujours inégal selon la résolution. Je comprends pas...

Mon texte est soit étendu quand je baisse la résolution, soit plus compact quand j'augmente la résolution. Je ne veux rien de ca et je souhaite avoir un texte correctement ajusté selon la résolution. Comment faire ? Merci.

<table id="page-table"><tr><td id="page-td">
<div id="menu">
	<table id="tb2">
    	<tr>
        	<td><a href="#"><img id="img_menu" src="menu_actualite.png" alt="menu_actu" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_dessin.png" alt="menu_dessin" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_photoshop.png" alt="menu_photoshop" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_indesign.png" alt="menu_indesign" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_illustrator.png" alt="menu_illustrator" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_profil.png" alt="menu_profil" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_contact.png" alt="menu_contact" /></a></td>
        </tr>
    </table>    
</div>
<div id="global"><p>Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.

Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.<br />Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.

Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.</p></div>
<div id="pied"><p>Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas.</p></div>
</td></tr></table>


html, body {
		height: 100%;
		width:100%;
		margin: 0;
		padding: 0;
		min-width:648px;
		max-width:2500px;
		font-size:100%;
		}
		
	img.superbg {
    	width:100%;
		height:100%;
		position: fixed;
    	z-index:-1;
		}
	
	#page-table {
		background:none;
		color: white;
		}
		
	#global {
		background:none;
		width:50%;
		margin:auto;
		margin-top:20%;
		border: 1px solid black;
		}

	#menu {
		background:none;
		border:none;
		width:57%;
		height:12%;
		margin:auto;
		margin-top:3%;
		margin-bottom:-14%;
		}
	
	#pied {
		background:none;
		width:50%;
		margin:auto;
		margin-top:3%;
		border: 1px solid black;
		text-align:center;
		}
		
	tb2 {
		background:none;
		border:none;
		}
	
	#img_menu {
		width:100%;
		}
		
	p {
		color: #000000;
		}

Modifié par nicky14 (08 Jun 2012 - 01:47)
Bonjour,

je ne suis pas certain de comprendre ce que tu veut avec le texte ?

Est-ce modifier la taille de la police en fonction de la résolution ? Si oui, il y a le media Queries qui peuvent etre une solution.

par exemple:
/* par defaut */
body {font-size:XX;}
/* [b]filtre selon la largeur de la fenêtre [/b]*/
@media screen and (max-width: 2000px) {
body {font-size:XX;}
@media screen and (max-width: 1600px) {
body {font-size:XX;}
@media screen and (max-width: 1200px) {
body {font-size:XX;}
}
@media screen and (max-width: 900px) {
body {font-size:XX;}
}
@media screen and (max-width: 480px) {
body {font-size:XX;}


Pour les vieux machins, c'est du JavaScript qu'il faut pour ça Smiley smile .

Cordialement,
GC
Pages :