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 :

Répétition d'une même DIV


Sujet :

CSS

  1. #1
    Membre régulier
    Inscrit en
    juin 2009
    Messages
    109
    Détails du profil
    Informations forums :
    Inscription : juin 2009
    Messages : 109
    Points : 76
    Points
    76
    Par défaut Répétition d'une même DIV
    Bonjour a tous,

    Est-ce possible de répéter plusieurs fois une même DIV selon la largeur de notre page ??

    Voici un exemple que j'ai fais auparavant, mais dans un tableau :

    Nom : exemple tableau.PNG
Affichages : 150
Taille : 160,3 Ko

    Mon tableau a 100%, chaque colonne 25%, et chaque colonne est divisé en 3.

    Ce que j’apprécierais c'est que selon la dimension de la largeur et bien au lieu de 4 colonnes, que ca soit 3, et ensuite deux, et peut-être au plus petit une seule.

    Dans mon CSS j'ai déjà le code @MEDIA qui fonctionne bien jusqu’à maintenant avec ce que j'ai réalisé.

    J'ai commencé quelque chose qui ressemble a ceci :

    Nom : entete.PNG
Affichages : 146
Taille : 3,6 Ko

    Le 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
    div#header_table {
    	display: flex;
    	width: 100%;
    	justify-content: flex-start;
    	align-items: center;
    	margin: 5px 2px;
    	padding: 5px 0px;
    	border: 2px solid red;
    }
     
    div#header_table #name {
    	display: flex;
    	width: 17%;
    	justify-content: flex-start;
    	align-items: center;
    }
     
    div#header_table #first {
    	display: flex;
    	width: 4%;
    	justify-content: flex-start;
    	align-items: center;
    }
     
    div#header_table #second {
    	display: flex;
    	width: 4%;
    	justify-content: flex-start;
    	align-items: center;
    }
    Le CODE HTML
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    	<div id="header_table">
    		<div id="name">List Name</div>
    		<div id="first">1st</div>
    		<div id="second">2nd</div>
    	</div>

    Je crois que j'aurais besoin de JAVASCRIPT est-ce possible ?

    Merci pour votre aide

  2. #2
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 312
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 312
    Points : 4 259
    Points
    4 259
    Par défaut
    salut, les media query sont ce qu'il te faut developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    @media (min-width: 300px) { ... }
    ou max-width si tu preferes
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre régulier
    Inscrit en
    juin 2009
    Messages
    109
    Détails du profil
    Informations forums :
    Inscription : juin 2009
    Messages : 109
    Points : 76
    Points
    76
    Par défaut
    J'ai déjà tout ça comme indiqué plus haut dans mon message....

    En fait c'est l’entête du tableau qui doit s'ajuster selon la largeur.

    Je ne sais pas si je suis clair ?

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 340
    Points : 41 987
    Points
    41 987
    Par défaut
    Bonjour,
    Je crois que j'aurais besoin de JAVASCRIPT est-ce possible ?
    pas forcément en utilisant les média queries, comme dit, un modèle de boîte flexible, le fameux display:flex et l'affichage/masquage d'éléments suivant le cas.

    Plutôt qu'un long discours, tout est dit dans cet exemple en ligne :

    Si besoin de plus d'informations n'hésite pas

  5. #5
    Membre régulier
    Inscrit en
    juin 2009
    Messages
    109
    Détails du profil
    Informations forums :
    Inscription : juin 2009
    Messages : 109
    Points : 76
    Points
    76
    Par défaut
    Je vais aller lire cet exemple avec minutie et si besoin je vous reviens avec des questions.

    Mes DISPLAY sont déjà en FLEX dont ça devrait être assez simple a adapter.

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

Discussions similaires

  1. Affichage d'objets dans une même DIV
    Par tony060 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 28/10/2020, 20h47
  2. Insérer plusieurs éléments dans une même <div>
    Par Uncle scrooge dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 27/02/2020, 19h44
  3. Réponses: 4
    Dernier message: 16/10/2008, 19h47
  4. [youtube] multi video sur une même div?
    Par bakonu dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 12/05/2008, 16h42
  5. Comment avoir des div sur une même ligne sans utiliser float ?
    Par Sergejack dans le forum Balisage (X)HTML et validation W3C
    Réponses: 10
    Dernier message: 13/10/2007, 16h31

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