[HTML]Debutant demande aide

Répondre
Partager Rechercher
Voilà je suis en train de me lancer dans l'apprentissage du HTML et il m'arrive 2 ou 3 soucis parce que le seul conseil que je puisse trouver est celui de tutoriels, qui malheureusement ont parfois leur manques.

Dans un premier temps, je me castagne avec la possibilité de mettre une image en background, j'y arrive mais c'est une image assez grande et je ne sais pas comment faire pour qu'elles s'adapte à la résolution de chaque personne. Si je l'adapte pour ma taille d'écran, il y a des risques pour que cela ne fonctionne pas chez d'autres. Comment faire pour que l'image en fond de page s'adapte donc à chaque visiteur au niveau de la taille?

__________________
Ma vie, mon oeuvre. Mon Feedback à l'Hotel des Ventes. Mon blog geekoludique. Joyeux Noël à tous.
Citation :
Provient du message de Thelemys de Sade
En fait si quelqu'un pouvait répondre à ma question initiale, je verrai après pour la taille de l'image dans un premier temps je voudrais qu'elle s'adapte
a mon avis un trableau pour qui tu precises une largeur precise (genre 800*600 personne n aura moins j espere voire 1024*768...)

comme ca tu es sur que le site s affichera de la meme facon chez tout le monde...

ensuite tu places ton image de fond en fond de tableau comme ca elle sera aussi limite dans sa taille...
Quelques principes de base :

- KISS (Keep It Simple, Stupid) : pas la peine de vouloir en mettre plein la vue, privilégier le fond à la forme, des choses simples sont aussi utiles que des usines à gaz qui font coin-coin dans tous les sens.

- Si une page met plus de 10 secondes à s'afficher, le visiteur va passer à autre chose (10 secondes, pour un bon vieux modem 56k, à 5k/seconde, ça fait 50k... théoriquement faut compter aussi sur le bon vouloir de la bande passante de l'hébergeur... )

- Selon la cible visée, gaffe aux problèmes de compatibilité des navigateurs avec le code des pages ( http://www.w3c.org pour les standards, on ne le dira jamais assez )

- Ce qui peut sembler rigolo sur un site quand on passe une fois, peut devenir trèèèès lassant quand on y passe plusieurs fois par jour (je pense en particulier aux musiques en tous genres qui me tapent sur le système )

- Penser à l'ergonomie générale du site, en particulier au système de navigation... quand on galère pour trouver l'info, on a tendance à zapper et à aller voir ailleurs...

Sinon, un site pas trop mal pour le HTML : http://www.w3schools.com
http://www.allhtml.com/css/

Et dans ton fichier CSS :
Code PHP:

body {background-imageurl("url de ton image"); background-repeatno-repeatbackground-positioncenter

Tu prévois une image d'une résolution maximum de 800 * 600 quand même. Ainsi, si la résolution de la personne qui regarde le site est supérieure à 800 * 600, l'image centrée plutôt qu'étirée ce qui évitera de la rendre trop moche.
Il y aura une propriété 'background-size' dans la norme CSS3.
Malheureusement, cette propriété n'existe pas encore dans la norme actuelle (CSS2).

Je vois 2 solutions à ton problème :
  • tu enregistres l'image dans plusieurs tailles, et un javascript sélectionne la bonne
    avantages : peu coûteux en ressources côté serveur
    inconvénients : nécéssite les javascript (que beaucoup de monde désactive) ;
    l'image ne sera pas forcément pile de la taille de la fenêtre
  • tu fournis comme image de fond une image php à laquelle tu passes en argument la taille qu'elle doit avoir
    avantages : l'image aura toujours pile la taille de la fenêtre
    inconvénients : du travail pour le serveur (redimensionnement d'image)
Citation :
Provient du message de Ludmilia
a mon avis un trableau pour qui tu precises une largeur precise (genre 800*600 personne n aura moins j espere voire 1024*768...)
Horreur !
on n'a pas le droit d'avoir une fenetre plus petite que 800x600 ?
de plus les tableaux ne sont pas faits pour la mise en page !!!

(sinon Elric a cité comment faire la même chose sans tableau )
Ca fonctionne pas, je copie donc le code simplifié de la page:
Code:
<HTML>
  <HEAD>
   <IMG SRC="image1.jpg" HEIGHT=100 WIDTH=100 ALIGN="absmiddle"><B> <BASEFONT FACE="georgia" COLOR="yellow" SIZE="10">  titre1 </b> 
  <br><br><br><br><br><br>
  </HEAD>

  <BODY>
  </BODY>
</HTML>

<?PHP
body {background-image: image2.jpg; background-repeat: no-repeat; background-position: center}
?>
Il doit manquer quelque chose non? (oui je sais que je suis vraiment un newbe )
Citation :
Provient du message de Thelemys de Sade
J'ai essayer de le faire en tableau et ça fonctionne mais le résultat n'est pas très joli, je vais essayer vos autres suggestions.

Petit probleme je ne sais pas intruduire du PHP au milieu d'un code HTML, comment je fais ça?
Normal ce que Elric a proposé est un truc a mettre dans une feuille de style css.
Ou alors
Code:
<STYLE="text/css"> Le_truc_de_Elric </STYLE>
dans la balise
Code:
<HEAD> </HEAD>

[edit]

Je rajouterai de plus que ce que tu as mis dans la balise HEAD se met dans le BODY, en effet dans la balise HEAD tu peux mettre un titre
Code:
<TITLE> gsdfgsdf </TITLE>
qui est le titre affiché dans la barre de titre est non sur la page.
Ouh la

La ligne que je t'ai donné est à mettre dans un fichier .css à part.
On peut l'intégrer directement à la page mais ça oblige à tout refaire pour chaque page et si tu changes un truc, il faut le changer sur toute les pages.



Entre les balises <head> et </head> tu rajoutes ça :
Code PHP:

<link rel=stylesheet href='url de ton fichier css' type='text/css'
Dans ton fichier css tu tapes ça :
Code PHP:

body {background-imageurl("url de ton image"); background-repeatno-repeatbackground-positioncenter

Dans ton fichier html tu n'as pas besoin de faire une autre référence à l'image.
Le code montré prédemment n'est pas du PHP (script côté serveur), mais du script côté client.

Pour l'utiliser dans ta page, mets le dans ta balise <head> de la façon suivante :

<head>
...
<style type="text/css">
body {background-image: image2.jpg; background-repeat: no-repeat; background-position: center}
</style>
...
</head>

Ou bien directement dans ta feuille de style CSS (juste la ligne body {background-image: image2.jpg; background-repeat: no-repeat; background-position: center} dans ce cas)
tu mélanges php et CSS, qui n'ont rien à voir...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <TITLE>titre</TITLE>
      <style type="text/css">
body {
   background-image: image2.jpg;
   background-repeat: no-repeat;
   background-position: center
}
      </style>
   </head>
   <body>
   <IMG SRC="image1.jpg" HEIGHT=100 WIDTH=100 ALIGN="absmiddle"><B> <BASEFONT FACE="georgia" COLOR="yellow" SIZE="10">  titre1 </b> 
  </body>
</html>
edit : pfff le temps de corriger son code je me suis fait griller ...
Répondre

Connectés sur ce fil

 
1 connecté (0 membre et 1 invité) Afficher la liste détaillée des connectés