background en plusieurs parties

background en plusieurs parties - HTML/CSS - Programmation

Marsh Posté le 05-12-2005 à 13:56:46    

Bonjour tout le monde,
 
Je me vois confronter aujourd'hui a un problème dont la seule solution pour le moment me parait etre un tableau (même si ce n'est pas bien d'utiliser un tableau pour le design.
 
Voila ce que je veux faire: http://www.fallengalaxy.com/images/fond.png
 
Ce fond est constitué de 3 parties. Une barre en haut (stats_top.gif) une barre en bas (stats_botton.gif) et une barre en backgroud au milieu qui se répète. La capture a été prise sous ff1.5 et ca marche très bien. Mais pas moyen de le faire marcher sous ff1.5, ie et ff1.x en même temps.
 
Pour le moment je vais un div qui contient mon texte avec au debut du div une image et a la fin de l'autre div une autre et je les ai tout les deux mis en position: relative. Ca ne marche helas pas sous ie.
 
J'ai aussi essayer deux fois de mettre une div avant (et apres) dans un cas cette div contenait une balise img et dans  le deuxieme cas je mettait l'image en background...mais rien n'y fait.
 
Voila mon css pour le moment:
.configuration
{
        width: 324px;
        margin: 0px;
        margin-left: 27.5%;
        background-image: url(http://www.fallengalaxy.com/images/stats_body.gif);
        text-align: center;
        color: <? echo $couleur; ?>;
}
 
.cadre_fallen_top
{
        position: relative;
        top: 0px;
        left: 0px;
}
 
.cadre_fallen_bottom
{
        position: relative;
        top: 90%;
        left: 0px;
}
 
configuration etant ma grosse balise div qui contient le texte et les deux autre etant des classes appliquées aux deux images.
 
Voila si qqu a une idée je suis preneur^^

Reply

Marsh Posté le 05-12-2005 à 13:56:46   

Reply

Marsh Posté le 06-12-2005 à 16:10:49    

Salut,
Pourquoi ne pas utiliser une simple bordure CSS à la place des images du haut et du bas ? Me dis pas que c'est pour garder le décalage d'un pixel dans les angles de la bordure rouge ?!!


Message édité par kalex le 06-12-2005 à 16:11:06
Reply

Marsh Posté le 06-12-2005 à 16:56:30    

mmmhh...on peut mettre une image en bordure? Si c'est le cas tu m'apprend quelque chose :p
 
Si je ne l'ai pas fait c'est que je ne connais pas..je vais de ce pas me renseigner ^^

Reply

Marsh Posté le 06-12-2005 à 17:06:18    

Asmodean a écrit :

mmmhh...on peut mettre une image en bordure? Si c'est le cas tu m'apprend quelque chose :p
 
Si je ne l'ai pas fait c'est que je ne connais pas..je vais de ce pas me renseigner ^^


 
Hmm, en fait, il me semble qu'il te proposait une bordure du style : "border:2px groove red;"

Reply

Marsh Posté le 06-12-2005 à 17:08:45    

les images à la place des bordures, ca sera en CSS3 donc tu pourras po l'utiliser avant 2008 à l'allure ou les gens changent de navigateur lol.
 
donc sinon il y a une technique toute simple :  
 
2 divs l'un dans l'autre

Code :
  1. <div class="bloc">
  2. <div>
  3. </div>
  4. </div>


 
et ensuite en CSS, le premier div conteneur, tu lui colle l'image qui contient le haut
 
et pour le second div, tu fais pareil mais il te faut une image qui fasse au moins 500px de haut histoire de gerer
 
aller hop l'explication ici : http://www.alsacreations.com/articles/cadre/

Reply

Marsh Posté le 06-12-2005 à 17:24:52    

Citation :

aller hop l'explication ici : http://www.alsacreations.com/articles/cadre/


 
En effet ca ressemble à ce qu'il me fallait...il va donc falloir que je fasse une réclamation a mon designer ;)


Message édité par Asmodean le 06-12-2005 à 17:25:28
Reply

Marsh Posté le 06-12-2005 à 17:26:35    

Comme l'a dit gravastar, ce que je lui proposais, c'est de mettre

  • Sur le premier div : une bordure grise de 2/3 px, avec un background noir et un padding d'1 px.
  • Sur le second : une bordure rouge, avec l'image principale en background.

Reply

Marsh Posté le 06-12-2005 à 18:08:36    

+1 j'avais po pigé ce que demajndais kalex au début lol
mais la solution de kalex est vraiment la plus simple
 
et si on cherche à rester propre sémantiquement on utilise proprement le HTML

Code :
  1. <form id="infouser">
  2. <fieldset>
  3. Tout le contenu
  4. </fieldset>
  5. </form>


 

Code :
  1. #infouser, #infouser *{
  2.   margin:0;
  3.   padding:0;
  4. }
  5. #infouser{
  6.   border:3px solid silver;
  7. }
  8. #infouser fieldset{
  9.   border:1px solid red;
  10.   margin:1px;
  11. }


 
tu peux remplacer silver par ton code couleur, ainsi que red par ton code couleur

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed