Bonsoir,
Je sais que je ne me suis présentée nulle part avant de demander de l'aide, que le sujet a été mille fois traité etc... Mais j'ai déjà essayé mille méthodes depuis des semaines, et je suis forcée d'avouer ce soir que je n'y arriverai pas sans que quelqu'un jette un coup d'oeil sur ce que je fais pour corriger mes erreurs
Je n'ai jamais appris "proprement" le CSS : j'ai commencé par bidouiller un template déjà existant pour me rapprocher de plus en plus de ce que j'avais en tête. C'est pourquoi le CSS de mon site vous paraîtra sûrement au mieux brouillon, au pire complètement bordélique, mais je compte un jour le refaire proprement de zéro, quand j'aurai du temps, du courage et confiance en mes connaissances
Alors mon site est là
Le code CSS ici
Et mes 2 problèmes, les voici :
==> La fixation de mon arrière plan étirable
Mon idée est de mettre une photo en arrière plan qui s'adapte à la taille de la fenêtre et donc à la résolution d'écran. J'ai compris qu'il fallait passer l'image en "div" à 100% de taille et non en background d'un conteneur. J'ai suivi le tutoriel Alsacréation qui fonctionne très bien. Mais du coup, je ne sais plus comment je peux fixer cette image de fond de manière à ce qu'elle ne défile pas avec le texte. Je ne connaissais que la propriété background-attachment, et je n'ai pas assez d'expérience pour penser à une astuce de contournement...
==> Le centrage du site
J'ai essayé d'appliquer la méthode décrite sur le site Alsacréations (celui-là), mais ça n'a aucun effet. Je pense qu'il s'agit d'une histoire de conteneur "global" mal placé, soit dans le CSS soit dans le Html, mais la hiérarchie des éléments est mon point faible...
Le CSS :
Dans le Html, j'ai placé "global" ici :
J'ai mis "global" après "fond" qui est mon image d'arrière plan et qui ne doit pas être centrée mais occuper toute la largeur du body, et avant tout le reste pour l'englober, mais je ne suis pas sûre que ça marche exactement comme ça.
En fait au final, j'aimerais avoir une image de fond étirable sur toute la taille de la fenêtre mais fixée, et le contenu du site d'une largeur de 990px et centré.
Merci pour les conseils que vous pourrez m'apporter
Je sais que je ne me suis présentée nulle part avant de demander de l'aide, que le sujet a été mille fois traité etc... Mais j'ai déjà essayé mille méthodes depuis des semaines, et je suis forcée d'avouer ce soir que je n'y arriverai pas sans que quelqu'un jette un coup d'oeil sur ce que je fais pour corriger mes erreurs
Je n'ai jamais appris "proprement" le CSS : j'ai commencé par bidouiller un template déjà existant pour me rapprocher de plus en plus de ce que j'avais en tête. C'est pourquoi le CSS de mon site vous paraîtra sûrement au mieux brouillon, au pire complètement bordélique, mais je compte un jour le refaire proprement de zéro, quand j'aurai du temps, du courage et confiance en mes connaissances
Alors mon site est là
Le code CSS ici
Et mes 2 problèmes, les voici :
==> La fixation de mon arrière plan étirable
Mon idée est de mettre une photo en arrière plan qui s'adapte à la taille de la fenêtre et donc à la résolution d'écran. J'ai compris qu'il fallait passer l'image en "div" à 100% de taille et non en background d'un conteneur. J'ai suivi le tutoriel Alsacréation qui fonctionne très bien. Mais du coup, je ne sais plus comment je peux fixer cette image de fond de manière à ce qu'elle ne défile pas avec le texte. Je ne connaissais que la propriété background-attachment, et je n'ai pas assez d'expérience pour penser à une astuce de contournement...
==> Le centrage du site
J'ai essayé d'appliquer la méthode décrite sur le site Alsacréations (celui-là), mais ça n'a aucun effet. Je pense qu'il s'agit d'une histoire de conteneur "global" mal placé, soit dans le CSS soit dans le Html, mais la hiérarchie des éléments est mon point faible...
Le CSS :
html {
height: 100%;
width: 100%;
margin:0;
padding:0;
font-size: 100%;
}
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
font-family: Trebuchet MS, Geneva, Sans Serif;
line-height: 120%;
font-size: 75%;
color: #333333;
}
#fond {
width : 100%;
height: 100%;
}
#global {
margin-left: auto;
margin-right: auto;
width:990px; /* largeur obligatoire pour être centré */
}Dans le Html, j'ai placé "global" ici :
<body>
<img id="fond" alt="" src="/templates/rhuk_solarflare_ii/images/fond30.jpg" />
<div id="global">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="808">
<tr>
<td class="outline">
(etc...)
</td>
</tr>
</table>
</div>
</div>
</body>J'ai mis "global" après "fond" qui est mon image d'arrière plan et qui ne doit pas être centrée mais occuper toute la largeur du body, et avant tout le reste pour l'englober, mais je ne suis pas sûre que ça marche exactement comme ça.
En fait au final, j'aimerais avoir une image de fond étirable sur toute la taille de la fenêtre mais fixée, et le contenu du site d'une largeur de 990px et centré.
Merci pour les conseils que vous pourrez m'apporter
