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 :

Mettre deux div côte a côte?


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Février 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 19
    Par défaut Mettre deux div côte a côte?
    Bonjour,

    J'aimerais créer deux boîte avec un header pour cela j'ai fait comme ceci
    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
    21
    22
    div.header
    {
    width:379px;
    color:#999999;
    background: url("images/cellpic.gif") repeat-x 20px;
    margin-top: 30px;
    margin-left:200px;
    margin-right:auto;
    margin-top:auto;
    }
     
    div.news
    {
    width:377px;
    height:200px;
    color:#FFFFFF;
    border: 1px solid #505F7D;
    background-color:#374663;
    margin-left:200px;
    margin-right:auto;
    margin-top:auto;
    }
    mais quelque chose me dit que c'est pas bien propre tout ca
    mais ce qui me pose vraiment probleme c'est que je ne sais pas comment il faut faire pour mettre deux boîte côte a côte voici une image de ce que j'aimerai avoir
    Merci d'avance pour votre aide.

  2. #2
    Membre chevronné Avatar de Strix
    Inscrit en
    Novembre 2006
    Messages
    632
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 632
    Par défaut
    Salut.

    Rajoute un float:left; dans div.news

  3. #3
    Membre émérite
    Profil pro
    Eleveur de cornichons
    Inscrit en
    Juin 2002
    Messages
    1 074
    Détails du profil
    Informations personnelles :
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Eleveur de cornichons
    Secteur : Finance

    Informations forums :
    Inscription : Juin 2002
    Messages : 1 074
    Par défaut
    float:right selon son exemple

    Nas'

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Février 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 19
    Par défaut
    Salut,

    Merci de votre aide j'ai bouceaup avencer grace a vous

    maintenant je suis bloquer au niveau header. c'est une petite image qui fait 3X25 que je veut mettre en header sur chaque tableau en repeat-x 20px;
    j'espere que l'explication est compréhensible je suis un gros noob encore si vous avez des lien qui peuvent m'aider de ce coté la je suis preneur Merci. [biggrin]

  5. #5
    Membre émérite
    Profil pro
    Eleveur de cornichons
    Inscrit en
    Juin 2002
    Messages
    1 074
    Détails du profil
    Informations personnelles :
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Eleveur de cornichons
    Secteur : Finance

    Informations forums :
    Inscription : Juin 2002
    Messages : 1 074
    Par défaut
    Bah tu l'as déjà défini dans ton style header. Ca ne marche pas ?

    Nas'

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Février 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 19
    Par défaut
    Bonjour,
    enfin j'ai reussi a avoir ce que je voulais je vai mettre la réponse pour les gens qui ont le meme probleme voila j'ai fait comme ceci:

    ->Pour avoir deux div côte a côte
    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
    21
    22
    23
    24
    25
    26
    27
    28
    29
    /* Les deux colonnes */
     
     
    #conteneur
    {
       width:auto;
       margin-top:20px;
       padding-bottom:25px;
       background-image:url(images/fond.jpg);
       padding-top:5px;
    }
     
    #colonne1
    {
       width:300px;
       height:200px;
       background-color:#374663;
       float:left;
       border: 1px solid #505F7D;
    }
     
    #colonne2
    {
       width:300px;
       height:200px;
       background-color:#374663;
       float:right;
       border: 1px solid #505F7D;
    }
    ->le header
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .bordure {background: url("images/cellpic.gif") repeat-x 20px; border: 1px solid #505F7D;}
    ->et dans mon code HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="colonne1">
         <div align=center class=bordure>blablablabla</div>
         blablabla</div>
     
       <div id="colonne2">
         <div align=center class=bordure>blablabla</div>
         blablabla
       </div>

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

Discussions similaires

  1. Mettre deux div sur une seule ligne
    Par bella1 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 13/10/2011, 11h36
  2. Aligner deux div côte à côte
    Par Arnaud F. dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 02/11/2009, 15h43
  3. Réponses: 7
    Dernier message: 09/10/2009, 13h45
  4. Mettre deux pspictures côte à côte
    Par je1509 dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 2
    Dernier message: 22/09/2008, 18h33
  5. [CSS] Problème avec deux div côte-à-côte
    Par Etanne dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 31/07/2006, 13h58

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