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 :

[CSS] probleme avec un div conteneur


Sujet :

CSS

  1. #1
    Membre régulier

    Inscrit en
    Mai 2002
    Messages
    93
    Détails du profil
    Informations forums :
    Inscription : Mai 2002
    Messages : 93
    Points : 85
    Points
    85
    Par défaut [CSS] probleme avec un div conteneur
    Bonjour,
    J'essaie de mettre deux divs dans un seul (conteneur) div :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="conteneur">
    	<div id="divOne">
    	<h2>Gerez vos abonnements internet chez nous.</h2>	
    	</div>
    	<div id="divTwo">
    	<a href="">Fermer</a>
    	</div>
    </div>
    mon probléme c'est que le div conteneur disparait bizarrement et la page s'affiche comme si il n'y avait que les deux divs (divOne et divTwo).
    donc si par exemple je voudrais mettre une couleur de background pour le div (conteneur) cela ne marcherait pas et mes deux divs (divOne et divTwo) s'afficheront sur le background color du body.
    Voila la feuille de style :

    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
    #conteneur {
    	clear: left;
    	background: #101010 url(../img_fr/bgContainer.gif) no-repeat bottom right;
    	border-bottom: 1px solid #505050;
    	}
    #divOne {
    	float: left;
    	width: 550px;
    	padding: 10px;
    	}
    #divTwo {
    	float: right;
    	text-align: right;
    	width: 100px;
    }

  2. #2
    Membre averti Avatar de Trunks
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2004
    Messages
    534
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2004
    Messages : 534
    Points : 412
    Points
    412
    Par défaut
    Tu peux utiliser une astuce pour corriger ça en rajoutant une div avec un clear: both; :

    HTML:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="conteneur">
       <div id="divOne">
       <h2>Gerez vos abonnements internet chez nous.</h2>   
       </div>
       <div id="divTwo">
       <a href="">Fermer</a>
       </div>
       <div class="blank">
       </div>
    </div>
    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
    #conteneur {
       clear: left;
       background: #101010 url(../img_fr/bgContainer.gif) no-repeat bottom right;
       border-bottom: 1px solid #505050;
       }
    #divOne {
       float: left;
       width: 550px;
       padding: 10px;
       }
    #divTwo {
       float: right;
       text-align: right;
       width: 100px;
    }
    .blank {
       clear: both;
    }

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    102
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 102
    Points : 92
    Points
    92
    Par défaut
    en mettant une hauteur fixe au bloc container
    height:200px;

    mais la solution de Trunks est beaucoup mieux !!
    je la garde dans un coin, merci trunks

  4. #4
    Membre émérite Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Points : 2 953
    Points
    2 953
    Par défaut
    Dans ce cas précis (un seul élément contenu dans le div), pourquoi utiliser un div? Supprime les div et mets un id à tes éléments. Je répète, dans ce cas précis (ou même d'autres éventuellement).
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="conteneur">
       <h2 id="divOne">Gerez vos abonnements internet chez nous.</h2>   
       <a id="divTwo" href="">Fermer</a>
    </div>
    Les Cours et tutoriels JavaScript
    Penser à la recherche et au bouton

  5. #5
    Membre averti Avatar de Trunks
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2004
    Messages
    534
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2004
    Messages : 534
    Points : 412
    Points
    412
    Par défaut
    Faut remercier linaa, c'est elle qui a proposé cette solution en première.

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

Discussions similaires

  1. [css] probleme avec un liens ...
    Par discogarden dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 27/03/2006, 16h57
  2. [css] Probleme avec background repeat
    Par meda dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 10/01/2006, 09h38
  3. [CSS] Probleme avec l'affichage de mon site :
    Par vampyrx dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 28/08/2005, 23h23
  4. [CSS] Probleme avec IE6
    Par m312 dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 12/08/2005, 13h20

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