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 :

Faire un display horizontal avec un overflow horizontal


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    277
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 277
    Par défaut Faire un display horizontal avec un overflow horizontal
    Bonjour,

    Je débute en développement web, d'où ma question assez simple:
    Mon objectif est de faire des boutons ayant des dimensions hauteur-largueur définies. Ces boutons doivent être affichés dans une barre. Si la barre est trop petite notamment en largueur, je veux un ascenseur uniquement horizontal.
    Quelque soit les propriétés de display que j'utilise, je n'y arrive pas:

    Voici mon code html:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    		<div id="bar_zone_button">
    			<a id ="lights" nb="1">LIGHTS</a>
    			<a id ="audio" nb="2">AUDIO</a>
    			<a id ="value" nb="3">VALUE</a>
    			<a id ="option" nb="4">OPTION</a>
    			<a id ="alert" nb="5">ALERT</a>
    			<a id ="other" nb="6">OTHER</a>
    		</div>

    Voici mon code css:
    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
    30
    31
    32
    33
    34
    35
    36
    #bar_zone_button
    {
    /*	display: inline-block;*/
    	width: 70%;
    	height: 70px;
     
    	border: 3px grey solid;
     
    	overflow-x: scroll;
    /*	overflow-y: hidden;*/ 
     
    }
     
     
     
    #bar_zone_button a
    {
    /* 
    	block : les uns au dessus des autres, 
    	inline-block : une ligne de 4 et une ligne de 2
    	inline : une ligne avec tous les éléments, mais ils n'ont plus les dimensions voulus
    	list-item : les uns au dessus des autres avec une pastille en plus
    */
    	display: inline-block; 
    	width: 150px;
    	height: 50px;
     
    	background-color: white;
     
    	margin: 10px;
    	border: 3px grey solid;
    	border-radius: 10px;
     
    	position: relative;
    	vertical-align: bottom;
    }
    Auriez-vous une piste ?

    Merci,

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    277
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 277
    Par défaut
    et voila la solution:
    white-space:nowrap;

    ==> RESOLU

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

Discussions similaires

  1. Faire un menu horizontal avec images inclinées et cliquables
    Par Romanodi13 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 25/07/2011, 21h53
  2. Menu Horizontal avec sous menu horizontal
    Par yamatoshi dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 28/04/2009, 15h09
  3. Probleme avec le defilement horizontal dans un JtextPane
    Par ingenieur2008 dans le forum AWT/Swing
    Réponses: 2
    Dernier message: 10/03/2006, 11h55
  4. [CSS] overflow horizontal seulement !
    Par pekka77 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 18/11/2005, 15h08

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