18041 sujets

Questions générales et questions de débutants

Adapter mon site à toutes les résolutions

Je ne suis pas certain de ta questions mais de façon générale, tu n'as qu'à utiliser les valeurs en pourcentage pour chaque propriété CSS qui nécessite une taille. Ça adaptera ton site à la résolution de l'utilisateur.

Le site que tu nous as envoyé, il n'y a rien "d'adapté" à ma résolution, au contraire, il est juste très petit et il est possible pour tout le monde ( ici je parle des desktop users et non pas des mobile users ) de voir le site, même en 800x600 et encore là puisque dans certaines page tu as 2 barres de défilement ce qui n'est pas idéal.

J'espère avoir répondu à ta question, sinon je crois qu'il faudra plus de détails !
Merci pour ta réponse.

Si je me réfère à ton premier paragraphe... il faudrait que j'utilise le code suivant :
body (width:100%;) ???

En fait, je souhaiterais que les navigateurs (IE, Firefox, Safari) affichent la taille exacte de ma page (centrée) sans que les marges (blanches) apparaissent... d'où l'exemple mis en lien. J'ai trouvé le code suivant : <body onLoad="Javascript: self.resizeTo(taille horizontale,taille verticale);">

Mon site est en construction... On trouve un bandeau noir en tête de page de 1000 px x 150 px... Pour l'arrière plan, j'utilise le blanc voire un gris très clair... d'où ma crainte de voir apparaître les fameuses marges blanches...

J'espère que j'ai été un peu plus explicite.

En tout cas merci !
Bonjour,

Redimensionner le navigateur des utilisateurs est une mauvaise idée. Tu ne sais pas quel est leur résolution d'écran et donc pas si la taille de navigateur que tu veux leur imposer "tiendra" sur leur écran. Accessoirement, ce genre de comportement pour un site web a plutôt tendance à exaspérer les visiteurs.

Si tu veux faire un site qui s'adapter à la taille de l'écran (donc avec des dimensions proportionnelles), tu peux suivre ce tuto.

Si tu veux faire un site de taille fixe et éviter les "marges blanches" il suffit de définir un fond (couleur ou image) pour l'élément html : 
html{
  background:#couleur url(image.jpg)...;
}
Bonjour et merci Laurie-Anne,

Je serais davantage intéressée par le design "liquid" - type Alsacréations, Le Monde... J'ignore quel code utiliser !!! (Désolée... mais je débute !!).
Laurie-Anne a écrit :
Tu as été lire le tutoriel que je t'ai indiqué ?



Oui... bien sûr et merci pour le lien... mais ce tuto concerne le design fluide... ??

Quelle est la meilleure solution... ??

J'ai pour navigateur Safari... j'utilise de temps à autre Firefox... J'ai banni IE...
figueline a écrit :
mais ce tuto concerne le design fluide... ??
Oui, effectivement, comme c'est indiqué dans le tuto.

figueline a écrit :
Quelle est la meilleure solution... ??
Je pense que dans ton cas, le plus important serait d'apprendre les bases du développement HTML+CSS, principalement le positionnement avec CSS (je te laisse parcourir les tuto du site). Essayer de suivre le premier tuto peux également t'aider à comprendre comment contruire ta page.

figueline a écrit :
J'ai pour navigateur Safari... j'utilise de temps à autre Firefox... J'ai banni IE...
Pour t'assurer que ton site est bien construit et passe sur tous les navigateurs, il sera important de le tester sous IE6-7-8.
Merci Laurie-Anne,

En effet, j'ai regardé les tutos susceptibles de répondre à mes problèmes de mise en pages... Tous bien intéressants...

Cela dit, j'ai un souci avec la balise DIV (contenant un bandeau par ex.)... qui a toujours tendance a être en décalée par rapport au reste du site et ce, lorsque je fais un aperçu dans un des navigateurs...

J'ai utilisé dreamweaver 3... il y a donc fort longtemps et depuis plus rien... Il faut maintenant que je me remette dans le bain... et ce n'est pas forcément facile.
Bonjour,
Moi aussi j'ai un petit problème de fluidité de site. J'ai lu le tuto qu'indique Laurie-Anne et tout va bien pour Firefox, safari et netscape. J'ai placé le commentaire conditionnel indiqué en fin de tuto, mais ça ne fonctionne pas. J'ai forcément oublié ou mal compris quelque chose... mais quoi ?
voici le code que j'ai inséré dans le head :
<!--[if lt IE 7]>
<style type="text/css">
div {
width: 770px;
width: expression(document.body.clientWidth <= 602? "600px" : document.body.clientWidth >= 1002? "1000px" : "auto");
}
</style>
<!--[endif]-->
Merci de votre réponse.
Salut abc,

abc a écrit :
tout va bien pour Firefox, safari et netscape.
Euh... qui se soucie de Netscape ? Smiley langue

Pour ce qui est de ton commentaire conditionnel, l'as-tu bien placé après l'appel de ta feuille de style générale ?
Modifié par Heyoan (06 Feb 2010 - 10:12)
Merci de ta remarque Heyoan. Apès vérification, il est bien placé après l'appel à la feuille de style, juste avant la fin du head.
Je viens de vérifier dans les préférences : apparemment java est bien activé dans IE. Pour ce qui est du sélecteur. Pour le moment je n'ai sur ma page que 2 div frères notés ainsi : 
<div id="enseigne" >
et 
<div id="conteneur">
dans le body de ma page.
Eh bien déjà dans la pratique on n'appliquera cela qu'à un élément DIV contenant tout les autres :
<div id="global">
	<div id="enseigne">
	</div>
	<div id="conteneur">
	</div>
</div>
Ensuite on utilise le sélecteur #global { ... } et pas div { ... } qui ciblerait... tous les éléments DIV.

Cela pourrait également résoudre ton problème s'il s'agit d'une question de priorité des sélecteurs.
Je viens de faire ce que tu me suggères : rajouter un div global sur la page et mettre #global comme sélecteur. Malheureusement cela ne change rien. Je viens aussi de jeter un coup d'oeil à la page que tu m'indiques sur la priorité des sélecteurs : un peu compliqué. Il faudra que je relise cela très attentivement!
En attendant, je vais continuer à développer le site sans tenir compte de IE, tout en vérifiant qu' en-dessous 600px de largeur les pages restent lisibles. Pour la largeur, cela a moins d'importance me semble-t-il.
Un grand merci pour tes réponses, qui, même si mon petit problème n'est pas résolu, vont me permettre de compléter un peu mes maigres connaissances.
En fait j'aurais du faire tout de suite ce qu'on fait d'habitude : te demander ton code html et css (l'idéal étant un lien vers une page en ligne).

D'autre part si tu souhaites aller plus loin merci de créer ton propre sujet. Smiley cligne
Sujet clos
Aller à