5568 sujets

Sémantique web et HTML

Redimensionner l'image de fond en fonction de la résolution

Bonjour à tous,

Voilà ceci est mon premier poste et j'ai déjà une question.

J'ai essayé de me créer un site sans tableaux, sans frames.
Niveau design, j'ai voulu mettre une image de fond via le CSS. Mais le problème,c'est que en fonction des résolutions (logique vous allez me dire),ben celle-ci ne se redimensionne pas.
Alors je me tourne vers vous pour savoir si il n'y aurait pas une solution.

Voici l'adresse de mon site d'essai: http://tbmdj.dommel.be/

Pour bien comprendre le problème,j'ai demandé à un amis qui a un écran 22pouces,de me faire un print screen:
http://img166.imageshack.us/my.php?image=screen1dc6.jpg

Voyant le résultat,je me dois de trouver une solution.

J'espère que vous saurez m'aider.

Merci d'avance,bonne journée.
Ludo
Mets donc un background-color avec la couleur unie du fond de ton image et ensuite applique un top center sur l'image de fond.

Genre mets ça en fait 

background: #35484b url("../Images/fond.jpg") top center;


Voilà :o
wouaw, merci beaucoup, c'était tout simple en faite Smiley smile

Connaissez-vous une technique pour que les éléments s'affichent de la même manière dans firefox et dans internet explorer? J'imagine que chaque browser a ses spécificités.

Enfin bref, voilà ce que ca donne maintenant:
http://img98.imageshack.us/my.php?image=screen2mb1.jpg

C'est déjà mieux qu'avant. Restera plus qu'a placer mon titre et l'info du bas. Moi je les placais en utilisant position : absolute et des em. mais apparement quand on change de résolution,c'est pas la meilleur des solutions.
Déjà je vais t'expliquer ce que je t'ai donné dans le post d'avant par ce que donner une réponse sans expliquer ça rime à rien

background: #35484b url("../Images/fond.jpg") top center;


Dans ce code, tu appliques une couleur de fond à ton body, puis tu lui ajoutes une image et les "top" et "center" correspondent au placement de cette image respectivement vertical et horizontal.
Donc l'image est verticalement en haut et horizontalement centrée.

Bref voilà...

Pour ton autre problème... disons que je te conseille de faire une div "global" qui englobe (hahaha sans dec') toutes tes div. Un truc dans le genre...


<body>
<div id="global">
<div id="titre">
<img src="Images/titre.png" alt="Official website of TBM DJ aka Dancephonic" width="478" height="56" />
</div>

<div id="page">
	<ul id="menu">
		<li><a href="index.html" title="To know all news about TBM DJ and Dancephonic">News</a></li>
		<li><a href="html/discography.html" title="To listen to all production of TBM DJ and Dancephonic">Discography</a></li>
		<li><a href="html/links.html" title="Some useful links or another dj website">Links</a></li>
		<li><a href="html/contact.html" title="To contact TBM DJ and Dancephonic or to send a demo">Contact</a></li>

	</ul>
	
	<hr />
	
	<h2>News</h2>

	<p>Official website of TBM DJ aka Dancephonic is open<br />
	More news will come soon.</p>
</div>
<div id="info">
	<p>©2001 - 2008, TBM DJ and Dancephonic Music Productions</p>

</div>
</div>
</body>


Là tu ajoutes à ton css...


#global {
width: largeur que tu souhaites;
margin-left:auto;
margin-right:auto;
}


Normalement, ça centre tout le site horizontalement. Et si tu fais ça bien, avec ton fond centré et tout ton site centré ça devrait collé sur tous les navigateurs.

Normalement...

~Meow~
Merci beaucoup pour votre aide, j'ai mis une valeur de 600em à width pour que ca s'affiche sur ma résolution, il ne restera plus qu'a tester sur la résolution de mon amis pour voir si ca marche ou pas.
Modifié par roucou (08 Jan 2008 - 18:50)
J'ai aussi remarqué sur mon site que si on zoome, l'ascenceur n'apparait pas,même chose avec une fenetre de 800*600,savez-vous ce qu'il faut ajouter?
Bonjour,

Rapidement en passant: le dimensionnement et surtout le positionnement des blocs à l'aide de l'unité EM, qui est fonction de la taille du texte définie par l'utilisateur ou d'un éventuel agrandissement ou redimensionnement du texte, est généralement une erreur.

Ici, c'est une erreur dramatique, qui fait exploser la mise en page dès que la taille du texte par défaut n'est pas celle attendue (16px), ou lorsque on modifie en live la taille du texte (Ctrl+, Ctrl-...).

C'est à refaire.

roucou a écrit :
J'ai aussi remarqué sur mon site que si on zoome, l'ascenceur n'apparait pas,même chose avec une fenetre de 800*600,savez-vous ce qu'il faut ajouter?

Alors, par le menu:
1. Ne pas créer un div#global de 770em de large ( Smiley eek ).
2. Ne pas utiliser le positionnement fixe sans savoir très exactement ce que ça implique. Dans une mesure un tout petit peu moins forte, on peut dire la même chose du positionnement absolu. Et ne pas tout passer en relatif pour autant: le positionnement statique, par défaut, c'est très bien.
3. Pour le centrage horizontal, la technique des marges automatiques est l'idéal. KnS a donné de bonnes pistes pour cela.

roucou a écrit :
j'ai mis une valeur de 600em à width pour que ca s'affiche sur ma résolution

Je ne veux pas être désagréable ou pédant, mais là c'est vraiment du très grand n'importe quoi. Un petit apprentissage du positionnement CSS serait bien utile. Parce que là ça ressemble à la scène de l'apprenti sorcier dans le Fantasia de Disney (pour ceux qui connaissent Smiley cligne ).

Nous avons déjà l'enthousiasme et la volonté, il nous manque la méthode et la rigueur. Donc, pour la méthode et la rigueur, on pourra commencer par quelques apprentissages, par exemple avec cette initiation au positionnement CSS sur Openweb:
1. flux et position relative
2. position float
3. position absolue et fixe

Bon apprentissage, bonne reprise à zéro de cette intégration, et bonne continuation. Smiley smile
Modifié par Florent V. (08 Jan 2008 - 23:28)
Tiens je viens de voir que j'ai oublié un truc dans le css que je t'avais donné... mais c'est pas le plus important.

C'est vrai que vu tes questions roucou, on voit bien que tu as à peine les bases.
Ce n'est pas un mal, loin de là, on est tous passé par là.
Comme le dit très justement Florent
a écrit :
Nous avons déjà l'enthousiasme et la volonté, il nous manque la méthode et la rigueur.

Pour ma part et sûrement Florent aussi, je n'ai rien contre le fait de t'aider (et dieu sait si j'ai encore plein de choses à apprendre en css) mais à mon humble avis il te serait plus profitable d'apprendre à fond les bases du css pour toi déjà et puis tu gagnerais beaucoup de temps au lieu d'attendre une réponse ici ou ailleurs.

Et puis, il ne faut pas négliger le plaisir personnel d'un travail fait du début à la fin de ses propres mains Smiley cligne

N'y vois aucune agression mais bien au contraire une forme d'encouragement Smiley smile

~Meow~
Merci beaucoup pour vos réponses. Oui je vais devoir tous recommencer à zéro. D'ailleurs je pense m'acheter le livre CSS2.
Je dois absolument le rendre le plus accessible car ce site va être vu par pas mal de personnes étant donné que c'est un projet de musique.

Mais c'est vrai que j'ai du mal à placer les éléments en css (pour le rendre zoomable avec les em)

Je vais aller analyser tous les liens que vous avez posté.
Merci beaucoup.
roucou a écrit :
Mais c'est vrai que j'ai du mal à placer les éléments en css (pour le rendre zoomable avec les em)

Ne pas chercher à rendre les éléments zoomables.

Dimensionner certains blocs en EM peut être utile, mais mieux vaut maitriser ce que l'on fait exactement. Une utilisation modérée et intelligente est recommandée (par exemple avec non pas des largeurs mais des largeurs maximales en EM, pour garantir des lignes de texte pas trop longues). Dans le doute, on n'utilisera pas du tout l'unité EM pour dimensionner les éléments, et on la réservera à la gestion de la taille du texte (il y a un tutoriel à ce propos sur Alsacréations, d'ailleurs).

Pour revenir sur la question du zoom: le zoom basé sur la taille du texte est un bricolage peu convainquant. Mieux vaut laisser les navigateurs web intégrer leur propre fonctionnalité (bien plus évoluée que les bricolages d'un webmaster à partir de technologies pas faites pour ça!). Les navigateurs suivants proposent une fonctionnalité de zoom homothétique de la page:
- Internet Explorer 7;
- Opera 9;
- Firefox 3 beta.
Sujet clos
Aller à