Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] Petite info

Sew-Oszka

Par Sew-Oszka
dans Programmation

 Partager

Messages recommandés

Sew-Oszka Extrem Member

Sew-Oszka

Posté(e)
  • Auteur
Posté(e)

Aie j'ai un autre problème! Il semblerait que l'image en arrière plan n'apparaisse pas sur IE, je m'en était pas apercu car je navigue sur FF et l'apercu de dreamweaver etait nickel! Comment je peux changer ca?

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Voilà. J'ai épuré sans enlever aucune fonctionnalité. J'ai complètement séparé la présentation du contenu, ce qui est particulièrement flagrant quand on fait une feuille de style externe. Voici ce que devient ta page.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>La maison du daf</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<a href="Construction.html"><div id="Layer1" class="bouton"></div></a>
<a href="Construction.html"><div id="Layer2" class="bouton"></div></a>
<a href="Construction.html"><div id="Layer3" class="bouton"></div></a>
<a href="Construction.html"><div id="Layer4" class="bouton"></div></a>
<a href="Construction.html"><div id="Layer5" class="bouton"></div></a>
<a href="Construction.html"><div id="Layer6" class="bouton"></div></a>
<a href="Construction.html"><div id="Layer7" class="bouton"></div></a>
<a href="Construction.html"><div id="Layer8" class="bouton"></div></a>
<div id="Layer9"></div>
</body>
</html>

Si si, tout y est ! Sauf bien entendu les clauses de style, que tu retrouveras ci-dessous, comme le dit la balise <link>, dans le fichier Style.css

 

Tout d'abord, il n'y a plus d'images, elles sont toutes en image de fond de chaque zone concernée (body, Layer1 à Layer9).

 

Ensuite, en passant de <div><a><img></a></div> à <a><div></div></a>, c'est la totalité du bloc <div> (d'ailleurs tout vide) qui est zone sensible, au lieu de l'image qui y était incluse.

 

Nota : pour les images, je te conseille d'éviter les caractères spéciaux, donc de renommer 3 images, par exemple sous les noms fond_ecran.jpg (évite espace, apostrophe et é), BoutonAccueil.jpg (évite espace), Activites.jpg (évite é).

 

Passons à la feuille de style.

 

html {overflow:auto;
}
body {
background:url(fond_ecran.jpg) fixed top left no-repeat;
margin:0;
}
.bouton {
position:absolute;
left:50px;
width:150px;
height:50px;
}
#Layer1 {top:150px;background-image:url(BoutonAccueil.jpg);}
#Layer2 {top:200px;background-image:url(Enseignement.jpg);}
#Layer3 {top:250px;background-image:url(instruments.jpg);}
#Layer4 {top:300px;background-image:url(Historique.jpg);}
#Layer5 {top:350px;background-image:url(Groupes.jpg);}
#Layer6 {top:400px;background-image:url(Activites.jpg);}
#Layer7 {top:450px;background-image:url(Contacts.jpg);}
#Layer8 {top:500px;background-image:url(Inscription.jpg);
}
#Layer9 {
position:absolute;
left:240px;
top:240px;
width:500px;
height:275px;
overflow:auto;
background-image:url(fond_texte.jpg);
}

html : overflow:auto à ce niveau-là, c'est pour éviter l'ascenseur inutile d'Internet Explorer.

 

body : l'image de fond est en position fixe en haut à gauche, et non répétable. Toutes les marges sont à zéro (je n'ai pas compris tes marges de 800px et 600px). A noter que pour une dimension à zéro, il est inutile de préciser une unité, zéro c'est zéro dans toutes les unités (et il faut savoir être paresseux).

 

classe bouton : elle est destinée à centraliser les attributs de tes 8 boutons de menu, que tu répétais fastidieusement (imagine qu'il faille en changer un : paf, 8 fois), sauf top (qui diffère d'un choix à l'autre), et z-index (inutile, on se positionne de toute façon par-dessus l'image de fond du body).

 

Layer1 à 8 : il ne reste que le top. Ajout de l'image de fond.

 

Layer9 : ajout de l'image de fond. Ajout de l'attribut overflow, qui fera apparaître un ascenseur si et seulement si le texte déborde de la fenêtre.

 

Le fond d'écran : ton image ne fait que 800px de largeur, et elle semble tronquée à droite. Si tu disposes encore de l'original, je te conseille de la pousser à 1024px au moins. Les visiteurs en résolution 800x600 verront la même chose qu'avant, ceux en 1024x768 n'auront plus de bande verticale blanche à droite. Pour les plus grandes résolutions, il y aura une bande blanche à droite et une autre en bas.

 

Publication du site : tu es drôlement pressé, dis donc, tu as déjà mis en ligne ta première page... :P

 

Tes 8 pages

 

Tu prends la page HTML ci-dessus (19 lignes, c'est raisonnable), tu la dupliques 8 fois, sous 8 noms différents. Dans chacune, tu changes le <title> (pas obligatoire, mais plus clair), tu renseignes le contenu du 9ème bloc comme ci-dessous, et ton site est terminé ! :P

 

<div id="Layer9">ici ton contenu</div>

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Je n'ai pas la réponse exacte, mais je connais le principe. Il faut en fait renommer ta page d'accueil d'un nom convenu, mais je ne sais pas exactement lequel. Essaie

  • default.htm
  • default.html
  • index.htm
  • index.html

Je penche pour default.html, et je serais intéressé par la réponse ! :P

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...