Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1533 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  background en plusieurs parties

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

background en plusieurs parties

n°1259026
Asmodean
Posté le 05-12-2005 à 13:56:46  profilanswer
 

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^^

mood
Publicité
Posté le 05-12-2005 à 13:56:46  profilanswer
 

n°1260206
kalex
Posté le 06-12-2005 à 16:10:49  profilanswer
 

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
n°1260266
Asmodean
Posté le 06-12-2005 à 16:56:30  profilanswer
 

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 ^^

n°1260280
gravastar_​bureau
vive la mise en page en tab...
Posté le 06-12-2005 à 17:06:18  profilanswer
 

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;"

n°1260285
gatsu35
Blablaté par Harko
Posté le 06-12-2005 à 17:08:45  profilanswer
 

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/

n°1260314
Asmodean
Posté le 06-12-2005 à 17:24:52  profilanswer
 

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
n°1260318
kalex
Posté le 06-12-2005 à 17:26:35  profilanswer
 

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.

n°1260359
gatsu35
Blablaté par Harko
Posté le 06-12-2005 à 18:08:36  profilanswer
 

+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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  background en plusieurs parties

 

Sujets relatifs
[html] problème avec background image d'une celluleinserer plusieurs clips avec attachmovie
plusieurs remplacements de chaînes de caractères ds un fic en une seultransaction a plusieurs requetes
Javascript - possibilité d'ouvrir plusieurs pages en includePlusieurs skin
[SQL] Disctinct sur plusieurs champsDonnée répétée à plusieurs reprises en la notant une seule fois
compteur sur plusieurs fichier et plusieurs ongletsBody background
Plus de sujets relatifs à : background en plusieurs parties


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR