image de fond boite div "principal"

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par pidgts, 13 Mars 2011.

  1. pidgts
    pidgts Nouveau WRInaute
    Inscrit:
    13 Mars 2011
    Messages:
    2
    J'aime reçus:
    0
    Bonjour, je me remets depuis peu à la mise en page de sites. J'avais l'habitude de travailler avec des tableaux, mais c'était au temps de Mathusalem. Aujourd'hui j'essaie les CSS.

    Or, sur un bouquin, je lis:
    "La boîte principale
    Cette boîte principale, #pincipal, est faite pour contenir les trois boîtes gauche, centre et droite. C'est cette boîte qui va simuler les hauteurs de colonnes identiques par un remplissage d'une image colorée. Cette boîte contient une image d'arrière-plan de 1 pixel de haut et de 800 pixels de largeur (comme le conteneur). Cette image possède sur les 200 premiers pixels une couleur (pour la colonne de gauche), puis sur les 400 pixels suivant du blanc (pour la colonne du centre) et sur les derniers 200 pixels la même couleur qu'au début (pour la colonne de droite). Cette image va être répétée verticalement dans sa boîte pour simuler des colonnes colorées.
    Ainsi la hauteur cette la boîte va toujours être égale à la hauteur de la boîte contenant le plus de texte et nous aurons bien l'impression d'avoir trois colonnes de hauteur égale, grâce à l'image qui va remplir la boîte #principal."

    Je suppose qu'il faut définir une image de fond, mais je ne vois pas bien quelle syntaxe pourrait bien arriver àau résultat proposé. Le livre est étrangement muet sur ce sujet.
    Un savant pourrait-il éclairer ma lanterne?
     
  2. padadam22
    padadam22 WRInaute accro
    Inscrit:
    23 Octobre 2010
    Messages:
    3 104
    J'aime reçus:
    0
    Je trouve cette technique un peu barbare, sans pour autant être un expert du web... Pourquoi charger une image, même d'1px de haut, alors qu'on peut le faire avec des couleurs de fond et des bordures en css...

    Sinon, le code css pour afficher l'image de fond :
    Code:
    background:url(images/tonimage.png);
    Tu peux aussi ajouter,en fonction de tes besoins, un repeat Y pour que l'image ne se répète qu'en hauteur.
    Code:
    background:url(images/tonimage.png) repeat-y;
     
  3. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 851
    J'aime reçus:
    219
    C'est pourtant la méthode classique pour faire apparaître trois colonnes de taille égales quelque soit la taille du contenu
     
  4. padadam22
    padadam22 WRInaute accro
    Inscrit:
    23 Octobre 2010
    Messages:
    3 104
    J'aime reçus:
    0
    Certes oui, mais j'ai bien dit "je trouve", je n'y connais finalement pas grand chose :)
     
  5. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    797
    J'aime reçus:
    0
    Cette technique présente aussi l'avantage d'un fond d'image beaucoup plus rapide à charger.
     
  6. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 851
    J'aime reçus:
    219
    Eh bien le "pourquoi" est très simple : tu n'as pas moyen en css de fixer la taille en hauteur d'un élement (ou alors c'est une taille fixe), donc tu n'as aucun moyen de forcer des colonnes latérales à être aussi longue que la colonne centrale. En chargeant une image de fond qui "visualise" les colonnes dans le div qui contient les trois colonnes (et qui sera donc aussi haut que la plus haute) tu as visuellement la séparation en trois sur la totalité de la page, alors qu'en réalité les div les plus courts s'arrêtent plus haut.
     
  7. padadam22
    padadam22 WRInaute accro
    Inscrit:
    23 Octobre 2010
    Messages:
    3 104
    J'aime reçus:
    0
    C'est vrai, juste remarque :)
     
  8. pidgts
    pidgts Nouveau WRInaute
    Inscrit:
    13 Mars 2011
    Messages:
    2
    J'aime reçus:
    0
    Voili, voilou,
    la syntaxe proposée par Padadam22 ne marche pas.
    je n'ai jamais trouvé nulle part ailleurs comment faire. Et comme j'ai horreur de rester sur une question non résolue, même par la négative, cela m'énerve. Certes, j'ai d'autre moyens pour faire ce que je veux, mais si cela est possible, j'attends le pro qui me dira comment.
     
  9. padadam22
    padadam22 WRInaute accro
    Inscrit:
    23 Octobre 2010
    Messages:
    3 104
    J'aime reçus:
    0
    C'est pourtant le code classique, que j'utilise d'ailleur sur la plupart de mes sites.
    As-tu bien spécifié l'url de l'image ?
     
  10. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 851
    J'aime reçus:
    219
    La syntaxe est une url relative... donc si le dossier images est positionné différemment, elle ne marche pas.
    Conseil, toujours utiliser des urls absolues par rapport à la racine du site /images/monimage.jpg par exemple
     
  11. padadam22
    padadam22 WRInaute accro
    Inscrit:
    23 Octobre 2010
    Messages:
    3 104
    J'aime reçus:
    0
    Oui évidement, le lien n'était qu'un exemple... il faut remettre celui de son propre site.
     
Chargement...
Similar Threads - image fond boite Forum Date
fond d'image transparent ! Le café de WebRankInfo 18 Avril 2015
mettre image fond d'ecran qui flotte Développement d'un site Web ou d'une appli mobile 26 Février 2015
Image de fond ne s'affiche pas (Dreamweaver CS3) Développement d'un site Web ou d'une appli mobile 18 Décembre 2013
problemme de l'image de fond Administration d'un site Web 9 Août 2011
Bannière en image de fond Débuter en référencement 6 Août 2011
Champ formulaire + image de fond Développement d'un site Web ou d'une appli mobile 9 Avril 2011
defilement d'image en fondu sur un site Demandes d'avis et de conseils sur vos sites 10 Décembre 2010
Image de Fond Facebook Facebook 4 Novembre 2010
Rendre une image en fond d'écran cliquable Développement d'un site Web ou d'une appli mobile 29 Juin 2010
Effondrement trafic google Images Crawl et indexation Google, sitemaps 4 Juin 2010
Recherche un script de news (particulier) avec image de fond Développement d'un site Web ou d'une appli mobile 13 Avril 2009
[RESOLU] image de fond dans une newsletter Développement d'un site Web ou d'une appli mobile 26 Mai 2008
Mettre une image en fond dans blogger ? Demandes d'avis et de conseils sur vos sites 26 Avril 2007
Image et image de fond Débuter en référencement 13 Mars 2007
Centrer une image de fond dans un tableau sans la répétée Développement d'un site Web ou d'une appli mobile 29 Novembre 2006
Image de fond qui se répète : avoir une belle jointure... Développement d'un site Web ou d'une appli mobile 2 Août 2006
Couleurs de fonds et images Débuter en référencement 10 Février 2006
Problème d'affichages d'images (fond) Développement d'un site Web ou d'une appli mobile 31 Janvier 2006
CSS et plusieurs images de fond Développement d'un site Web ou d'une appli mobile 18 Novembre 2005
Insertion d'une image en fond de Tableau Administration d'un site Web 15 Juin 2005