28172 sujets

CSS et mise en forme, CSS3

Adapter le texte aux différentes résolutions

Bonjour,

Je suis en train de réaliser un site dédié au monde de l'anime et j'ai un petit soucis pour adapter la taille de mon texte aux différentes résolutions des visiteurs.

J'ai trouvé récemment comment faire pour ce qui est des images mais apparemment la même méthode ne fonctionne pas.

Voila ma solution pour les images : Un width et un height de 100% pour mes blocs et la taille en % dans le CSS en calculant le % que prend mon image sur ma résolution (exemple : image 800x644 ayant comme résolution 1680x1050 cela me donne un width de 44.6% et un height de 44.7%%)

Voici mon code html :

 <div id="banniere">


<img src="Images/noirban.jpg"  width="100%" height="100%">

</div>


et le CSS :

#banniere

{

	position:absolute;
	top:0%;
	left:27%;
	width:44.6%;
	height:44.7%;
}


Est-ce que quelqu'un aurait une solution miracle à me proposer pour le texte svp?

L'adresse de mon site :http://anime.island.free.fr (un peu vide car en construction et que je ne peux mettre du texte c'est embêtant^^)
Modifié par hellboy42 (15 May 2009 - 17:18)
Salut,

Je ne sais pas si ça pourra t'aider, mais je sais que (par expérience) le width et height en % n'est pas pris en compte. Si tu fais avec des pixels, ça change beaucoup d'une résolution à une autre?
Hello,

Ines a écrit :
Je ne sais pas si ça pourra t'aider, mais je sais que (par expérience) le width et height en % n'est pas pris en compte.
Euh... si ! Smiley cligne

Par contre un pourcentage fait référence à une dimension de l'élément parent et il faut donc qu'elle soit précisée. Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#global {
	width: 80%;
	height: 80%;
	background: #00CC00;
	position: relative;
}

#milieu {
	width: 50%;
	height: 50%;
	background: #FF6633;
	padding: 10px;
	position: absolute;
	top: 0%;
	left: 27%;
}
</style>
</head>
<body>
<div id="global">
	<div id="milieu">
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
	</div>
</div>
</body>
</html>
Salut et merci pour les réponses

J'avais aussi essayé en px mais la différence entre 800*600 et 1680*1050 était déja énorme.
Et mes titres, textes n'étaient plus positionné au bon endroit, tenaient 2 lignes au lieu de une...

Même avec des <h1></h1> cela ne change pas la taille suivant les résolutions alors que ça devrait non vu que c'est relatif?

Ta méthode marche pour le texte sans font-size??
Modifié par hellboy42 (15 May 2009 - 12:41)
hellboy42 a écrit :
Ta méthode marche pour le texte sans font-size??
Hem... soit je n'ai pas compris, soit ça n'a rien à voir ! Smiley langue

lire :
* Typographie web : gérer la taille du texte avec les « em ».
* Faire un site pour toutes les résolutions.
* et pour la route (re) lire le Guide de survie du positionnement CSS.

Au passage on n'utilise pas un élément H1 parce que la taille de la police est celle que l'on souhaite mais uniquement lorsqu'il s'agit d'un titre de niveau 1.
Lire http://openweb.eu.org/articles/respecter_semantique
Bonjour,

Le principe de dimensionner l'image à 50% de la largeur et 50% de la hauteur du viewport (zone de visualisation du navigateur), enfin à peu près car je n'ai pas retenu les chiffres exacts, me semble à tout le moins casse-gueule.

On peut obtenir des choses comme ceci:

upload/2043-20090515a.jpg

ou cela:

upload/2043-20090515b.jpg

Adapter à la largeur peut, dans certains cas, être pertinent. Adapter à la hauteur ne l'est généralement pas. On tâchera, pour les images, de conserver un ration hauteur-largeur toujours égal.

Remarques en vrac:
- ton code HTML n'est pas sémantique;
- aucune de tes images n'a d'attribut alt correctement renseigné bien qu'elles portent des informations;
- tes images ne sont pas optimisées (ouch l'image de 500 ko...);
- le type de positionnement utilisé (centrage avec le positionnement absolu) est déconseillé.
Modifié par Florent V. (15 May 2009 - 15:09)
J'ai essayé ta méthode heyoan mais je n'arrive toujours pas à adapter la taille de police aux différentes résolutions... en 800*600 cela prend plus de place sur l'écran (la police grossit^^)

Florent désolé pour les fautes de sémantiques et autres mais je suis débutant et j'ai trouvé que cette solution pour la taille des images (d'ailleurs j'ai bien galérer pour trouver Smiley cligne )

Sinon j'ai lu à plusieurs endroits qu'il y avait moyen d'adapter tout un site en plaçant tous ces éléments dans un tableau faisant 100% de l'écran? Est-ce vraiment possible?

PS : Cherche quelqu'un pour m'épauler dans la création de mon site... enfin pour me donner les bases et normes à respecter ...
Modifié par hellboy42 (15 May 2009 - 17:15)
Sujet clos
Aller à