Rechercher : dans
Par :

Redimensionner fond selon résolution

Dernière réponse le 15 fév 2008 à 13:31:15 makao, le 13 fév 2008 à 14:14:46 
 Signaler ce message aux modérateurs

Bonjour,

déjà, je dois préciser que je suis vraiment mais alors vraiment novice en HTML CSS etc etc... pour moi, c'est très très compliquée, d'autant que ca fait just 2 jours que j'ai mis le nez dedans, alors j'espère que vous serez indulgents!!!

Je viens de créer un page myspace, pour faire un peu de promo, j'ai récupéré à droite à gauche quelques lignes codes pour faire mon fond, et j'ai juste changé l'adresse pour le background.

J'ai réalisé mon fond selon mon écran principal (1680*1050), donc forcément sur mon écran à moi c'est niquel, mais (re)reforcément, sur une autre résolution ca merdouille!

j'ai fouillé sur le ent avant de venir poster mais impossible de trouver ma solution, j'ai pourtant essayer avec wigth:100%, mais rien n'y fait.
Est-ce que c'est à cause de la plateforme myspace?
De plus je me demande si le fait d'avoir une image uploader sur site (imageshack) au lieu du FTP classique de site, ca ne jouerais pas...

voilà mon code, HELP!

<style type="text/css">
body {background-color:; background-image:url(http://imageshack-france.com/out.php/i10315_fond2.jpg); background-position:Top Center; background-attachment:fixed; background-repeat:repeat-y;
width:100%;}

table table table td.text table table div img {visibility:visible;}
table table table td.text table table div { background-image:none;}
div table tbody tr td a, div table tbody tr td input, div table tbody tr td font {visibility: hidden}

div table tbody, div table tbody td {background-color: !important;}

div div table table tr td {background-color:transparent !important;}

div div table {postion: absolute; top: 1px; text-align: center;}

div table tbody tr td a.navbar, div table tbody tr td form input,
div table tbody tr td a img, div table tbody tr td div a {visibility: visible !important; display: inline !important;}

table tbody td table tbody tr td.text table table, table tbody td table tbody tr td.text table
table tbody td.text {visibility: visible;}
table, td {padding: none !important;}
body {background-color:transparent}
body table {background-color:transparent}
body table td {background-color: transparent;}
body table table {background-color: !imporant}
table tbody table tbody td, table tbody table tbody table {border: none;}
table tbody table tbody table table {background-color: !important; border: none; padding: none;}
table tbody table tbody table table td {background-color:; padding: 2px;}
table tbody table tbody table table td.text {background-color: transparent !important;}
table tbody td table tbody tr td.text table td.text table {border: none;}
table tbody td table tbody tr td.text table td.text {background-color: !important; border: none;}
table tbody td table tbody tr td.text table table {border: none;}
table table table table table {background-color: transparent;}
body {text-align: center !important;} .blacktext12 {visibility: hidden}

.orangetext15, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{color:748471;font-size:16px;font-weight:bold;text-decoration:none;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}
.redbtext.shadowed { filter: shadow( color=blue, direction=135 ); }
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{color:9DA793;font-size:8pt;font-weight:normal;text-decoration:none;font-weight:normal;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}
a, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited{color:748471;font-size:8pt;font-weight:bold;text-decoration:none;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}
a:hover, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.searchlinkSmall:hover, a.searchlinkSmall:active{color:9DA793;font-size:8pt;font-weight:bold;text-decoration:underline ;font-style:normal;font-family:trebuchet ms,Verdana,arial,verdana,sans-serif;}

td.text td.text table table td img {width:260px; max-width:260px; width:auto;}
td.text td.text table table td a img {width:90px; max-width:260px; width:auto;}
td.text td.text table table td div img {width:80px;}
html td.text td.text table table td img {width:260px;}
html td.text td.text table table td a img {width:90px;}
html td.text td.text table table td div img {width:80px;}

table table table td {vertical-align:top ! important;}
span.blacktext12 {
visibility:visible !important;
background-color:transparent;
background-image:url("");
background-repeat:no-repeat;
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:435px; height:75px; display:block !important;
border:1px;
border-color:ffffff; }
span.blacktext12 img {display:none;
border-width:1;
border-color:ffffff;
}
.img {
border-width:1;
border-color:ffffff;
}
</style>

Merci beaucoup beaucoup beaucoup d'avance!

Configuration: Windows XP
Firefox 2.0.0.9

Meilleures réponses pour « redimensionner fond selon résolution » dans :
Fond d'écran "aquarium " gratuit VoirChoisir la bonne résolution pour le fond d'écran Télécharger un fond d'écran d'aquarium à partir de Google images Télécharger un fond d'écran d'aquarium sur un site d'images De nombreux sites permettent de télécharger gratuitement des...
[Webmaster] Adapter un site à toutes les résolutions, le centrer VoirUne question récurrente sur ce forum est "Comment adapter mon site à la résolution du visiteur ? Quelle résolution choisir ?" Pas besoin de se compliquer la vie pour ça ! Comment faire Il suffit d'appliquer une largeur relative (=qui change selon...
[Windows] Redimensionner une partition NTFS VoirContrairement à une idée reçue, il est possible de redimensionner une partition NTFS sans perte de données sans logiciels payants tels que Partition Magic. Knoppix est un CD bootable Linux contenant différents outils permettant de redimensionner des...

1

Enax, le 13 fév 2008 à 14:22:48

Bonjour,

Tout ça est très bien, mais tu ne nous dis pas où est le problème. :p

Répondre à Enax

2

makao, le 13 fév 2008 à 16:06:34

Oups...
Ben je voudrais que mon image du fond s'adapte selon les diverses résolutions d'écran (qu'elle ne soit ni tronquée pou une résolution plus basse, ni en mosaïque pour une réolution plus forte)

Répondre à makao

3

Enax, le 13 fév 2008 à 17:35:37

Il n'existe pas de propriété CSS permettant de la faire directement à ma connaissance. Mais en magouillant un peu, cela reste possible.

A noter que l'image sera adaptée à la résolution, et par conséquent déformée. Il faut donc garder un format d'image proche de celui d'un écran.

<!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">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			html, html *
			{
				position:relative;
			}
			
			.img_fond
			{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	
	<body style="margin: 0;">
		<div class="img_fond"><img class="img_fond" src="test.jpg" alt="background"/></div>
		<div>
			<!-- Mette la page ici //-->
		</div>
	</body>
</html>

Répondre à Enax

4

makao, le 14 fév 2008 à 11:30:09

Donc ca je le colle ou? avant tout le reste?

Répondre à makao

5

Enax, le 14 fév 2008 à 13:22:08

En temps normal, tu pourrais mettre ton CSS dans une feuille de style à part ou entre les balises <style type="text/css"></style> et le code html de ta page dans le deuxième div.

Je ne sais pas comment ça se passe avec myspace. Là, c'est à toi de voir.

Répondre à Enax

6

makao, le 14 fév 2008 à 15:18:38

Très sincèrement je nage... c'est à dire qu'en dessous de <style type="text/css">
je colle l'intégralité du code que tu m'as fourni?
je laisse tout le reste identique (ma ligne de code déjà existant concernant mon fond par exemple)
qu'est-ce que je met à la place de "mettre la page ici"?
(j'ai hont...désolée d'être si nulle...)

Répondre à makao

7

Enax, le 14 fév 2008 à 15:35:23

Tu n'arriveras à rien si tu ne connais pas un minimum le sujet. C'est comme si tu essayais d'expliquer la résolution de "x + 3 = 0" à un gamin qui n'a encore jamais vu les additions.

Je te conseille de lire des tutos sur HTML / CSS. Celui là est très bon : http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html
Je te rassure, les bases du HTML et du CSS sont très simples et rapides à acquérir.

Répondre à Enax

8

makao, le 14 fév 2008 à 16:12:03

Dès que je peux m'y mettre je le fais, je te promet (vraiment)
je ne voudrais vraiment vraiment pas abuser de ta gentillesse, mais est-ce qu'éventuellement tu ne pourrais pas me mettre les lignes de codes à renter telles quelles (j'essaye et si ca marche pas, je te fais plus chier)?
parce que myspace et autres blog, c'est pour ma promo, moi, mon domaine c'est le dessin et la peinture (assez éloigné, la mine de plomb je maitrise, mais le langage HTML, c'est limite si ca me donne pas de l'urticaire)
le but c'était de me faire une plateforme, jolie, parce que forcément quand on essaye de promouvoir un travail artistique, on se doit de présenter quelque chose d'attrayant, je vend pas des WC quoi, mais sans me prendre trop la tête, en attendant de trouver quelqu'un qui veuille bien me faire un site (contre une bonne bouf), vu que je suis étudiante, pas beaucoup les moyens d'investir la dedans et surtout du temps relativement compté, puisque cette année je navigue entre 3 job, une prépa concours et mon mémoire, c'est pour te dire!
bref, j'essaye pas de t'apitoyer, sinon j'aurais balancé ça dès le début, juste que tu comprenne un peu mieux pourquoi je rame autant et pourquoi je cherche un peu des solutions faciles...
(s'il te plait, snif snif snif)
en tout cas, si c'est pas possible, merc quand même pour tes autres message, et de m'avoir accordé un peu de ton temps!

Répondre à makao

9

 Enax, le 15 fév 2008 à 13:31:15

Le problème, c'est qu'il n'existe pas de solution ultime. Il a des "principes" qu'il faut ensuite adapter à son propre site. Comme j'ai dit, je ne sais pas comment fonctionne myspace, mais je suppose qu'on n'est pas entièrement libre et qu'on ne peut pas moduler à sa convenance (mais peut-être que je me trompe).
Enfin, je vais quand même tâcher de t'expliquer succinctement comment utiliser le code que j'ai donné plus haut.

Le HTML est un langage de structuration, c'est-à-dire qu'il sert uniquement à organiser le contenu d'une page web. C'est le CSS qui s'occupe de toute la partie présentation. Le code que tu as mis dans ton premier message est du CSS. Pour savoir où le mettre, lis simplement la partie "Où mettre du CSS ?" de cette page :
http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html#ss_part_1
(A priori, toi tu auras à l'écrire dans le header.)

Le contenu de ta page mettre (du code HTML, donc) est à mettre à la place de <!-- Mette la page ici //--> dans le code ci-dessus.

Voilà, j'espère que ça ira. Sinon, bah mets tout simplement en background un motif qui peut se répéter. :p

Répondre à Enax