IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

cadre extensible avec image


Sujet :

CSS

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    616
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2002
    Messages : 616
    Par défaut cadre extensible avec image
    Bonjour

    Mon probleme est que les coté gauche et droit ne veulent pas "s'allonger"
    le "background-repeat:repeat-y" ne fait rien
    Voici le code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    <div>
    	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_01.png); background-repeat:no-repeat; width:13px; height:13px"></div>
    	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_02.png);background-repeat:no-repeat; width:722px "></div>
        <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_03.png); background-repeat:no-repeat; width:13px; height:13px"></div>
    </div>
    <div>
    	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blancg.png); background-repeat:repeat-y"></div>
    	<div style="width:722px"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blancd.png); background-repeat:repeat-y"></div>
    </div>
    <div>
    	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_07.png); background-repeat:no-repeat; width:13px; height:13px"></div>
    	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_08.png);background-repeat:no-repeat; width:722px "></div>
    	<div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_09.png); background-repeat:no-repeat; width:13px; height:13px"></div>
    </div>
    Merci de votre aide

  2. #2
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Bonjour,

    Un élément flottant s'adapte à la taille de son contenu.
    Étant donné que les tiens sont vides, ils se retrouvent à height:0; et width:0;.
    Il faudrait donc renseigner les valeurs de ces deux propriétés.

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    616
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2002
    Messages : 616
    Par défaut
    voila le code avec les dimensions
    mais le cadre est toujours bancale

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
        <div style="width:748px">
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_01.png); background-repeat:no-repeat; width:13px; height:13px"></div>
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_02.png);background-repeat:no-repeat; width:722px; height:13px "></div>
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_03.png); background-repeat:no-repeat; width:13px; height:13px"></div>
        </div>
        <div style="width:748px">
            <div style=" float:left; min-height:200px;width:13px;background-image:url(../Images/fond_blanc/fond-blancg.png); background-repeat:repeat-y"></div>
            <div style=" float:left; min-height:200px; width:722px; background-color:#FFF"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
            <div style=" float:left; min-height:200px;width:13px;background-image:url(../Images/fond_blanc/fond-blancd.png); background-repeat:repeat-y"></div>
        </div>
        <div style="width:748px">
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_07.png); background-repeat:no-repeat; width:13px; height:13px"></div>
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_08.png);background-repeat:no-repeat; width:722px; height:13px"></div>
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_09.png); background-repeat:no-repeat; width:13px; height:13px"></div>
        </div>
    d'ou proviens l'erreur ?
    merci de votre aide

  4. #4
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Bonsoir,

    Si l'erreur vient du fait que les bords gauche & droit ne s'entendent pas plus que 200px (alors que les <br /> donnent + que 200px), c'est le comportement normal.

    Le mieu serait pour cette partie :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div style="width:748px">
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_07.png); background-repeat:no-repeat; width:13px; height:13px"></div>
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_08.png);background-repeat:no-repeat; width:722px; height:13px"></div>
            <div style=" float:left;background-image:url(../Images/fond_blanc/fond-blanc_09.png); background-repeat:no-repeat; width:13px; height:13px"></div>
    </div>
    De ne mettre qu'une image en repeat-y qui comprend les bords (donc 1 seul div). Le contenu étant dedans, la répétition (avec les bords) se fera alors normalement...
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

Discussions similaires

  1. cadre extensible avec image
    Par nicerico dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 19/02/2009, 10h13
  2. Réponses: 1
    Dernier message: 27/08/2007, 14h07
  3. [XI] Cadre avec images
    Par poweremu dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 13/03/2007, 00h23
  4. [CSS] Problème avec cadre sur une image lien
    Par Strix dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 24/12/2006, 10h09
  5. Cadres avec image comme encadrement
    Par Nibor dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 11/12/2006, 19h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo