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 :

espacer des div


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut espacer des div
    Bonsoir,

    j'ai 2 div alignées horizontalement (avec float:left), mais je voudrais mettre un espace (par exemple 50px) entre les 2. Comment ?

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    je me permet de te citer
    Citation Envoyé par laurentSc Voir le message
    instructif ; car je ne connaissais ni label ni margin-right ; pour créer un écartement, je fais d'habitude :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <table><tr><td>Premiere partie du texte</td><td width=100px>&nbsp;</td><td>Seconde partie du texte</td></tr></table>
    un peu lourdingue...
    as tu pris le temps de regarder plus avant la notion de margin

  3. #3
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    Oui, je l'ai fait avant de poster, mais ça ne fait rien :
    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
    17
    18
    19
    20
      <style>
    #div_noms {
    float:left;
    }
    #div_imgs {
    margin-right:500px; //pour être sûr de voir si ça marche
    float:left;
     
    }
      </style>
    <div id="div_noms">
    <table>
      ---
    </table>
    </div>
    <div id="div_img">
    <table>
    ---
    </table>
    </div>

  4. #4
    Membre Expert
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Par défaut
    Salut,

    Attention aux fautes d'inattention dans le body ! L'id doit être...div_imgs.

    Après, on utilise
    margin-left pour l'élément de droite.
    ou bien
    margin-right pour l'élément de gauche.

    Code xhtml : 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
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="fr-FR">
    	<head>
    		<meta charset="UTF-8" />
    		<title>Test</title>
     
    		<style type="text/css">
                            #div_noms {
                                    float:left;
                            }
                            #div_imgs {
                                    margin-left:500px;
                                    float:left;
                            }
                    </style>
    	</head>
     
    	<body>
    		<div id="div_noms">Gauche</div>
    		<div id="div_imgs">Droite</div>
    	</body>
    </html>

  5. #5
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    Merci d'avoir remarqué ma faute de frappe.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. IE6 ajoute des espaces sur div float
    Par deejay2221 dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 15/08/2008, 11h25
  2. [XHTML] Pb d'espaces entre Div contenant des images en XHTML Strict
    Par kiouz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 16
    Dernier message: 16/07/2007, 19h19
  3. Espacement entre des <div> générés en PHP
    Par VincentG dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 07/04/2007, 20h30
  4. Creer une mosaique avec des DIV sans espaces
    Par TheWoz dans le forum Mise en page CSS
    Réponses: 12
    Dernier message: 07/12/2006, 11h00
  5. Probleme espace entre DIV du a un FORM
    Par Little_Goldo dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 26/10/2004, 20h50

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