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 :

Agencer des tableaux avec des CSS


Sujet :

Tableau en CSS

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2014
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 17
    Points : 5
    Points
    5
    Par défaut Agencer des tableaux avec des CSS
    Bonjour j'aimerais par rapport à ce programme html mettre le contenu 1 dans une case puis le 2 dans une autre case et enfin le contenu 3 dans une autre case.

    J'arrive pas à savoir ou placer mes css et comment les écrire pour y arriver

    Code html : 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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
    <head>
        <title>Utilisation de CSS pour le positionnement</title>
        <meta http-equiv="Content-Language" content="fr" />    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link title="css1" rel="stylesheet" type="text/css" href="style.css" media="screen" />
        <link title="css2" rel="alternate stylesheet" href="style2.css" type="text/css" media="screen" />
        <link title="css3" rel="alternate stylesheet" href="style3.css" type="text/css" media="screen" />
     
    	<style type="text/css">
                    
            
            </style>
     
     
    </head> 
    <body>
    <script type="text/javascript">
    /* <![CDATA[ */
    function setactivestylesheet(title) {
     var i, a, main;
     currentStyle = title;
     for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
      if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
      }
     }
    }
    /* ]]> */
    </script>
    <a href="#" onclick="setactivestylesheet('css1')">css1</a><br />
    <a href="#" onclick="setactivestylesheet('css2')">css2</a><br />
    <a href="#" onclick="setactivestylesheet('css3')">css3</a><br />
     
    <tr>
    <div class="contenu1"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div></tr> 
     
    <div class="contenu2">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
    </div>
     
    <div class="contenu3">
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    Where does it come from?
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
    Where can I get some?
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
    </div>
    </body> 
     
     
    </html>

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Je ne comprends absolument pas ce que tu veux faire... Et je ne comprends pas non plus ce que font des tr en plein milieu de ton code.

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2014
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 17
    Points : 5
    Points
    5
    Par défaut
    En gros j'ai un exercice à faire. par rapport au code que j'ai marqué (je l'ai eu comme ca dans l'exo je n'y ai pas touché donc la balise tr ce n'est pas moi qui l'ai mise), je dois prendre le texte du contenu 1 puis celui du contenu 2 et celui du contenu 3. Et avec des css je dois les agencer dans des cases. Histoire d'avoir : case1 (contenu 1) a coté case 2 (contenu 2) et en dessous case 3 ( contenu 3) qui fait la longueur de la case 1+2

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Et quel est le rapport avec les tableaux ?

    Sinon, on n'est pas là pour faire tes exercices, mais je peux t'aiguiller sur un tutoriel qui te permet de comprendre comment mettre en page des éléments en CSS :
    http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2014
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 17
    Points : 5
    Points
    5
    Par défaut
    Merci pour le lien. J'avoue mon support de cours sur les css est assez vague donc comme je ne savais pas comment partir sur l'exo je pensais au tableaux

  6. #6
    Membre éclairé
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    Septembre 2012
    Messages
    416
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2012
    Messages : 416
    Points : 747
    Points
    747
    Par défaut
    Citation Envoyé par Aromatic Voir le message
    (je l'ai eu comme ca dans l'exo je n'y ai pas touché donc la balise tr ce n'est pas moi qui l'ai mise)
    Ce code vient d'un formateur/professeur ?

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2014
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 17
    Points : 5
    Points
    5
    Par défaut
    Oui d'ou ma galère sur certains exos depuis le début de l'année :/

    Mais bon en lui renvoyant un mail j'ai compris ce qu'il voulait lol. Créer un fichier Css à part qui une fois fini génerera 3 cases avec dans chacune d'elle un contenu du texte différent. Contenu 1/2/3 . Me reste plus qu'a créer cela en y ajoutant couleur longueur etc etc.

    Mais bon au moins je sais dans quelle direction partir!!

  8. #8
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2014
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 17
    Points : 5
    Points
    5
    Par défaut
    Re bonjour après le lien mis par bisûnûrs j'aurais une dernière question si quelqu'un peut m'aider

    Dans l' article sur le démarrage des Css avec les blocs bandeaux/menu/mise en page.il y a un exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    div#bandeau {
    	width:600px;
    	height:50px;
    	background-color:#00CCFF;
    puis
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="bandeau">Ceci est le bandeau</div>

    Pour que cela s'affiche sur la page Html.

    Mais dans le cas inverse ou j'ai déjà le code Html et que je veux créer une css comment dois je m'y prendre.

    Si par exemple sur un code html j'ai <div class="contenu2"> au lieu de <div id="bandeau">?

    J'ai essayé la méthode (div#) mais sur ma page html quand j'essai de mettre en css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    div#contenu2{
    color:#00CCFF;}
    rien ne se passe.

    Et en fait je pensais qu'en faisant cela tout le texte qui était écris sous ma balise <div class="contenu2"> allait changer de couleur :/

    Je suis dans l'impasse. Je me demande si le fait d'avoir un "div class" au lieu de "div id" change la donne...

  9. #9
    Membre éclairé
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    Septembre 2012
    Messages
    416
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2012
    Messages : 416
    Points : 747
    Points
    747
    Par défaut
    Où id représente un identifiant unique dans ton code HTML (il ne peut y avoir qu'un id="truc" par page).
    En css tu y accèdes avec le # : #truc { } .

    Où class représente une classe CSS qui peut être utilisée plusieurs fois dans ton code HTML (il peut y avoir plusieurs class="truc" par page).
    En css tu y accèdes avec le . : .truc { }.

  10. #10
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Bonjour,
    Je suis dans l'impasse.
    ne pas hésiter à faire confiance à la Liaison avec (X)HTML

  11. #11
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2014
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 17
    Points : 5
    Points
    5
    Par défaut
    Merci beaucoup tout marche maintenant

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

Discussions similaires

  1. répéter des tableaux avec des données
    Par gwendoline-bricout dans le forum Langage
    Réponses: 8
    Dernier message: 22/10/2013, 16h55
  2. Des tableaux avec des bords arrondis ?
    Par whitespirit dans le forum Word
    Réponses: 14
    Dernier message: 16/06/2011, 06h55
  3. Réponses: 2
    Dernier message: 02/09/2010, 10h26
  4. [XL-2003] Instabilité des classeurs avec des Tableaux Croisés Dynamiques
    Par oohcalme dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 04/08/2009, 11h45
  5. [Tableaux] Trier des données avec des tableaux
    Par yobogs dans le forum Langage
    Réponses: 2
    Dernier message: 31/10/2006, 13h39

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