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 :

Mise en page compliquée à réaliser


Sujet :

CSS

  1. #1
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut Mise en page compliquée à réaliser
    Bonjour,

    je voudrais réaliser une mise en page qui donne ce rendu :
    Nom : miseenpage.GIF
Affichages : 154
Taille : 50,2 Ko
    aucune idée comment réaliser ça. Auriez-vous une idée ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    et quel sera l'agencement pour tablette et / ou smartphone ?


    Entre nous, tu te compliques beaucoup la vie.
    Pour pas grand chose.
    Dernière modification par Invité ; 27/08/2016 à 21h35.

  3. #3
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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
     
    <div class="conteneur">
     
      <div class="sidebar">
      slidebar
      </div>
     
      <div class="middletop">
        <div class='float left'>
          float top left
        </div>
        <div class='float right'>
          float top right
        </div>
        <div class="largeur">
          toute largeur
        </div>
        <div class='left2'>
        LEFT 2
        </div>
      </div>
      <div class='middlebottom'>
        <div class="sidebarbottom">
          sidebarre bottom
        </div>
        <div class='leftbottom'>
          left Bottom
        </div>
        <div class='right2'>
          Right 2
        </div>
        <div class="right3">
          Right 3
        </div>
      </div>
    </div>
    Code css : 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
     
    div:not(.conteneur):not(.middletop):not(.middlebottom){border:2px solid black;text-align:center}
    .conteneur{position:relative;width:100%;background-color:white}
    .conteneur > *{display:inline-block;}
    .sidebar{width:20px;height:270px;word-wrap:break-word;
    background-color:red}
    .middletop{width:100%}
    .middletop > .float{position:absolute;top:0;width:40%;height:200px;}
    .right{right:0px}
    .left{left:22px}
    .largeur{width:96%;position:absolute;top:210px;left:22px;}
    .left2{position:absolute;top:240px;left:22px;width:75%;}
    .middlebottom{width:100%}
    .middlebottom > *{position:absolute;display:inline-block}
    .sidebarbottom{width:22px;height:150px;word-wrap:break-word;background-color:red}
    .leftbottom{width:75%;left:22px;height:150px;}
    .right2{right:0;top:240px;width:20%;height:130px;}
    .right3{right:0;top:380px;width:20%;height:74px;}

  4. #4
    Invité
    Invité(e)
    Par défaut
    @Toufik83

    A partir du moment où on est obligé d'utiliser des position:absolute; pour la mise en page générale, il faut se poser des questions... tout effacer... et recommencer. SANS position:absolute;.

  5. #5
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Entre nous, tu te compliques beaucoup la vie.
    Pour pas grand chose.
    Le "pas grand chose", c'est le cahier des charges que l'on m'a donné.

    Merci Toufik83. Pour devenir autonome sur ce sujet (le prochain cahier des charges sera certainement similaire mais un peu différent), il faut que je comprenne ton CSS. Et pour commencer, j'ai essayé sans succès de rajouter les 2 barres horizontales qui étaient sur mon cahier des charges et que tu n'as pas mises. Y en a une, OK, mais pas l'autre (la barre supérieure)(la classe CSS hr2).

    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
    <div class="conteneur">
     
      <div class="sidebar">
      sidebar1
      </div>
     
      <div class="middletop">
        <div class='float left'>
          float top left1
        </div>
        <div class='float right'>
          float top right1
        </div>
        <div class="largeur">
          toute largeur
        </div>
        <div class='left2'>
        LEFT 2
        </div>
    	<!--<div class='hr2'>&nbsp;<hr/>&nbsp;</div>-->
      </div>
      <div class='middlebottom'>
        <div class="sidebar2">
          sidebar2
        </div>
        <div class='leftbottom3'>
          left Bottom 3
        </div>
    	<div class='hr3'>&nbsp;<hr/>&nbsp;</div>
        <div class='right2'>
          Right 2
        </div>
        <div class="right3">
          Right 3
        </div>
      </div>
    </div>

    Code css : 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
    div:not(.conteneur):not(.middletop):not(.middlebottom){border:2px solid black;text-align:center}
     
    .conteneur{position:relative;width:100%;background-color:white}
     
    .conteneur > *{display:inline-block;}
     
    .sidebar{width:20px;height:270px;word-wrap:break-word;
    background-color:red}
     
    .middletop{width:100%}
     
    .middletop > .float{position:absolute;top:0;width:40%;height:200px;}
     
    .right{right:0px}
     
    .left{left:22px}
     
    .largeur{width:98%;position:absolute;top:210px;left:22px;}
     
    .left2{position:absolute;top:240px;left:22px;width:75%;}
     
    .hr2{position:absolute;top:235px;left:22px;width:75%;}
     
    .middlebottom{width:100%}
     
    .middlebottom > *{position:absolute;display:inline-block}
     
    .sidebar2{width:22px;height:150px;word-wrap:break-word;background-color:red}
     
    .leftbottom3{width:75%;left:22px;height:150px;}
     
    .hr3{width:75%;left:22px;top:425px;height:0px;}
     
    .right2{right:0;top:240px;width:20%;height:130px;}
     
    .right3{right:0;top:380px;width:20%;height:45px;}

    Jérôme, comme tu préconises de tout recommencer, saurais-tu le faire ? (Je sais que tu saurais le faire, mais auras-tu le temps ?)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    bonsoir,
    @Toufik83

    A partir du moment où on est obligé d'utiliser des position:absolute; pour la mise en page générale, il faut se poser des questions... tout effacer... et recommencer. SANS position:absolute;.
    oui @jreaux62, tu as raison, j'essaie de l'aider un peu c'est tout.
    @laurentSc de rien, le css est un peu bricolé mais je pense qu'il donne le résultat voulu.

    j'ai mis les deux <hr/> dans .middlebottom, le premier est en haut, et la deuxième est en bas.
    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
     
    <div class="conteneur">
     
      <div class="sidebar">
      sidebar1
      </div>
     
      <div class="middletop">
        <div class='float left'>
          float top left1
        </div>
        <div class='float right'>
          float top right1
        </div>
        <div class="largeur">
          toute la largeur
        </div>
        <div class='left2'>
        LEFT 2
        </div>
      </div><!-- fin .middletop !-->
      <div class='middlebottom'>
        <div class='hrtop'>&nbsp;<hr/>&nbsp;
        </div>
        <div class="sidebar2">
          side bar2
        </div>
     
        <div class='leftbottom3'>
          left Bottom 3
        </div>
     
        <div class='right2'>
          Right 2
        </div>
        <div class="right3">
          Right 3
        </div>
        <div class='hrbottom'>&nbsp;<hr/>&nbsp;
        </div>
      </div><!-- fin .middlebottom !-->
    </div><!-- fin .conteneur !-->
    Code css : 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
     
    body,html,.conteneur{height:100%;width:100%;}/* le body et html doivent avoir height de 100% */
    div:not(.conteneur):not(.middletop):not(.middlebottom):not(.hrtop):not(.hrbottom){border:2px solid black;text-align:center;}/* tout les div ont le border:2px solid black et text-align:center sauf les classes exclus dans :not() */
    .middletop > .float,.largeur,.left2,.middlebottom
    ,.middlebottom > *{position:absolute;}/* tout ces classes sont en position absolute, tu peux faire autrement biensur SANS absolute si tu veux... */
     
    .conteneur{position:relative;background-color:blue}/* la position relative est là par ce que ce conteneur contient des elements en position:absolute */
     
    .conteneur > *,.middlebottom > *{display:inline-block;}/* tout les elements qui sont dans .conteneur et .middlebottom sont en display inline-block, pour qu'ils s'alignent horizontallement */
     
    .sidebar{height:100%;width:5%;word-wrap:break-word;
    background-color:red}/* slidebar prends 100% de la hauteur de son parent, et prends 5% de la largeur de son parent, son parent est .conteneur qui a une largeur de 100%*/
     
    .middletop{width:95%;height:50%}/*le width 95% par ce que nous avons déjà mis le width de .slidebar=5%, donc il nous reste 95% de la largeur */
     
    .middletop > .float{top:0;width:40%;height:50%;}/*les classes .float qui sont dans .middletop ont le top=0 pour qu'il s'allignent tout en haut de leur parent (.middletop) */
     
    .right{right:0}/*s'aligner a droite du parent */
     
    .left{left:7%} /*pourquoi 7% ?, pcq slidebar occupe 5% de la largeur, nous ajoutons donc 5%+2% pour avoir un peu d'espace gauche  */
     
    .largeur{width:92.5%;top:55%;left:7%;height:10%}/* 92.5% par ce que slidebar occupe 5% de la largeur, nous ajoutons donc 5%+2.5% pour avoir un peu d'espace gauche , normalement on doit ajouter 93% si y'avait pas de bordure, apparaiment la bordure prends 0.5% */
     
    .left2{top:68%;left:7%;width:75%;height:20%}/*.left2 s'éloigne du top de son parent de 68% par ce que .largeur se positionne a 55% du parent +10% de son height, donc .left2 doit s'éloigner du top de 55%+10%=65%, puis on ajoute 3% pour avoir de l'espace top */
     
    .middlebottom{top:105%;width:100%;height:50%;left:0;background-color:yellow}/*cet element est le 2eme element dans .conteneur, le premier est .middletop qui prends 50% du parent, alors cet element il faut qu'il s'éloigne de 50% de plus,donc 50%+50% (+5% d'espacement top de .conteneur) */
     
    .hrbottom,.hrtop{width:75%;left:7%;height:1px;}/*nous avons pris 75%  de la largeur de .middlebottom (+7%) d'espacement gauche, il nous reste donc 100%-82%=18% qui sera reservé a la largeur de .right2 et .right3*/
    .hrbottom > hr,.hrtop > hr{border:2px solid red}
    .hrtop{top:-35px}
    .hrbottom{bottom:15%}
    .sidebar2{width:5%;height:100%;
    text-align:center;word-wrap:break-word;background-color:red}
     
    .leftbottom3{width:75%;left:7%;height:90%;}
     
    .right2{right:0;top:-75%;width:15%;height:100%;}
     
    .right3{right:0;top:30%;width:15%;height:60%;}

  7. #7
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    et quel sera l'agencement pour tablette et / ou smartphone ?
    1/ Tu n'as pas répondu à ma question.

    2/ il suffirait d'agencer un peu différemment les blocs pour simplifier le code (sans absolute).

    3/ si au moins :
    • tu donnais des noms explicites aux blocs : "menu principal", "menu secondaire", "header", "footer", "publicité", "titre page", "contenu principal",.......
    • tu indiquais les dimensions voulues pour les blocs : les largeurs ( % ? fixe ?) et hauteurs ( adaptative par rapport au contenu ? fixée ?)


    Bref, comme d'habitude, ton "cahier des charges" (celui que tu NOUS donnes) est incomplet et imprécis.
    Tu veux une réponse... mais tu ne poses pas la bonne question...
    Dernière modification par Invité ; 28/08/2016 à 10h03.

  8. #8
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    1/ Tu n'as pas répondu à ma question.
    La cible est un intranet et pas sûr que des utilisateurs soient sur tablette ou smartphone.
    Citation Envoyé par jreaux62 Voir le message

    3/ si au moins :
    • tu donnais des noms explicites aux blocs : "menu principal", "menu secondaire", "header", "footer", "publicité", "titre page", "contenu principal",.......
    • tu indiquais les dimensions voulues pour les blocs : les largeurs ( % ? fixe ?) et hauteurs ( adaptative par rapport au contenu ? fixée ?)

    Donner des noms plus explicites serait difficiles sachant que les différents blocs sont des blocs de texte mais qu'il n'y a rien d'explicite à préciser.
    Les dimensions : je fais ça au pif mais effectivement un % convient plutôt que du fixe que ce soit pour la width ou la height.

    Merci Toufik83 pour ta correction et les commentaires. (je mettrai en résolu quand je serai sûr que ça me convient bien)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  9. #9
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par laurentSc Voir le message
    Donner des noms plus explicites serait difficiles....

    ....Les dimensions : je fais ça au pif...
    Ca, c'est vraiment du foutage de gueule ce n'est pas très sérieux...
    LE MINIMUM est d'avoir des informations PRECISES à donner.

    Destination des blocs : tu n'es même pas capable de nous dire où seront :
    • les menus ?
    • header ?
    • footer ?
    • ... ???


    Que dit ton "cahier des charges" ??

    Tu nous fais perdre notre temps.
    Dernière modification par Invité ; 28/08/2016 à 13h12.

  10. #10
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Je ne pense pas vous faire perdre du temps car le travail de Toufik83 m'a déjà fait bien avancer.

    Dire où sont les menus, header, footer, etc :
    menu, y en a pas.
    header et footer ; y en a pas non plus dans la partie que je vous ai montrée car j'ai ciblé la partie qui me semblait difficile à faire donc le header et le footer étaient absents.
    Par contre, j'ai réussi à les rajouter, mais je ne comprends pas trop pourquoi ça marche ! Peut-on m'expliquer ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div class="banner">banner</div>  
    <div class="conteneur">
     
    ...
     
    </div><!-- fin .conteneur !-->
      <div class="footer">footer</div>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .footer{position:absolute;bottom:-80%;} /*je ne comprends pas pourquoi il faut le mettre en absolu (sinon, on ne le voit pas) et pourquoi à -80% du bottom (sinon mal placé) */
    .banner,.footer {width:100%;height:10%;}

    Le "cahier des charges", c'était en fait une page html qui tourne en local, donc avec des éléments (des images) en local, codée lamentablement (bien pire que ce que je fais) (à mon avis, utilisation d'un générateur de code html qui fonctionne en wysiwyg, mais qui génère du code archi-obsolète (mise en page avec des tables et balises font et center...)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  11. #11
    Invité
    Invité(e)
    Par défaut
    1/ Pourrais-tu ARRETER de mettre des points de suspension dans TOUS TES CODES ????

    => COMMENT veux-tu qu'on puisse TESTER quoi que ce soit ????


    2/ Le footer est mal placé (mets-lui une couleur de background, pour visualiser où il se trouve !), A CAUSE des position:absolute; qui sort les éléments (blocs) du flux.
    C'est une des raisons qui fait qu'on doit l'éviter tant qu'on peut.

    Quant au code CSS de Toufik83, c'est une usine à gaz, qui ne t'apportera que des tracasseries (pour la même raison).


    3/ D'autre part, sais-tu que :
    • il existe en HTML5 des balises <header> et <footer> ?
    • un bloc "unique" a juste besoin d'un id, pas d'une class ?
    Dernière modification par Invité ; 28/08/2016 à 13h57.

  12. #12
    Invité
    Invité(e)
    Par défaut
    Voilà 2 configurations qui permettent de SIMPLIFIER drastiquement le CSS :

    Nom : miseenpage-02.gif
Affichages : 177
Taille : 117,7 Ko

    Nom : miseenpage-03.gif
Affichages : 129
Taille : 118,6 Ko

    Plus AUCUN absolute n'est nécessaire.
    Dernière modification par Invité ; 28/08/2016 à 15h30.

  13. #13
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Les points de suspension, c'était pour alléger le code que je présente mas effectivement c'est intestable...J'essayais de passer les classes en id avant de montrer le code intégral mais vu qu'il y a un bug que je ne vois pas, je vais pas passer du temps sur un code que je ne vais pas garder car je vais plutôt m'inspirer des configurations que tu proposes...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  14. #14
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    La mise en page que j'ai choisi de faire sera (j'ai ici rajouté le header et le footer) :
    Nom : miseenpage.GIF
Affichages : 216
Taille : 24,8 Ko qui devrait beaucoup me simplifier la vie. Cependant, j'ai commencé à le coder et j'ai déjà un souci.

    Mon code (sans points de suspension !) est (juste la partie à problème) :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="content_top">
    <div id="sidebar1">sidebar1</div>
    </div>
     
    <div id="content_bottom">
    <div id="sidebar2">sidebar2</div>
    </div>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #content_top,#content_bottom{height:50%;}
    #sidebar1,#sidebar2{
    height:50%;width:3%;word-wrap:break-word;background-color:red;border:1px solid}

    donc en gros, 2 divs (chacune encapsulées dans une autre div) avec les textes sidebar1 et sidebar2. Je pensais que la hauteur des 2 divs ferait la hauteur de la page, et pas du tout ; c'est tout petit. Comment augmenter la taille ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  15. #15
    Invité
    Invité(e)
    Par défaut
    Voilà LA solution :


  16. #16
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Pourrais-tu ARRETER de mettre que des points de suspension dans TOUS TES CODES ????
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  17. #17
    Invité
    Invité(e)
    Par défaut
    Laurent,

    1/ Tu n'es pas en mesure de juger/choisir ce qui est important ou pas (du code nous montrer).
    Systématiquement :
    • soit tu mets du code insuffisant ("juste la partie à problème" !!)
    • soit des "..." là on on attend du code à tester
    • soit carrément du code qui n'a rien à voir

    -> Montre-nous LE CODE NECESSSAIRE ET SUFFISANT = (pour toi) TOUT le code dans son ensemble.


    2/ Une dimension en POURCENT (%) se définit PAR RAPPORT à quelque chose.

    Pour les largeurs, c'est simple :la largeur de la fenêtre est une donnée pouvant servir de base

    PAR CONTRE, pour les hauteurs, c'est toujours plus délicat, vu que :
    • il est prévu que les blocs s'adaptent à leur contenus (et que la hauteur d'un site soit variable)
    • TOUS LES PARENTS d'un bloc qu'on veut dimensionner en hauteur DOIVENT EUX AUSSI l'être


    DANS TON CAS :
    • POURQUOI vouloir définir les hauteurs ?
    • et (question à te poser) PAR RAPPORT à quoi ?


    Un indice pour ta mise en page :
    voir du coté de :
    • display:table;
    • display:table-row;
    • display:table-cell;

  18. #18
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Bonjour Jérôme,

    voici le code complet (pour le moment car ce n'est que le début) :

    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
     
    <header id="banner">banner</header>
    <div id="main">
    	<div id="left1">left1</div>
    	<div id="right1">right1</div> 
    	<div id="hr1">&nbsp;<hr/>&nbsp;</div>
     
    	<div id="content_top">
    	<div id="sidebar1">sidebar1</div>
    	</div>
     
    	<div id="content_bottom">
    	<div id="sidebar2">sidebar2</div>
    	</div>
     
     
    </div> <!-- end of div main -->
     
    <footer id="footer">footer</footer>

    Code css : 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
     
    html {height:768px;width:1366px;}
    body,#main {height:100%;width:100%;}
     
    #banner,#footer{
    text-align:center;
    width:100%;}
    #main {
    display:table;width:100%;}
    #left1 {float:left;width:49%;}
     
    #right1 {float:right;width:49%;}
    #banner,#left1,#right1,#footer,#sidebar1,#sidebar2 {border:1px solid}
     
    #hr1{
    clear:both;}
     
    #content_top,#content_bottom{display:table-row;height:45%;width:100%;}
    #sidebar1,#sidebar2{
    height:100%;width:3%;display:table-cell;word-wrap:break-word;background-color:red;border:1px solid;}

    Ton point 2 m'a beaucoup aidé car j'ai vu qu'il fallait dimensionner en hauteur et en largeur html et body (et la div main que j'ai rajoutée)...

    Si je veux dimensionner la hauteur, c'est pour couper la page en 2 parties égales (mais remplissnt la page).

    J'ai tenu compte de ton indice mais le dimensionnement reste nécessaire...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  19. #19
    Invité
    Invité(e)
    Par défaut
    Comment veux-tu écrire le CSS, alors que ton code HTML ne contient pas toutes les "boites" ??

  20. #20
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 724
    Points
    5 724
    Billets dans le blog
    1
    Par défaut
    Le fait d'avoir dimensionner en largeur les divs left2_top et rigt2_top font que le display de la div content_top est correct mais pas celui de content_bottom. Or d'après moi, mon html contient désormais toutes les boîtes...

    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
    <div id="main"> 
    <header id="banner">banner</header>
     
    	<div id="left1"><span style="font-size: 12px;">left1</div>
    	<div id="right1">Septembre 2016</div> 
    	<div id="hr1">&nbsp;<hr/>&nbsp;</div>
     
    	<div id="content_top">
    	<div id="sidebar1" class="floatleft">sidebar1</div>
    	<div id="left2_top"  class="floatleft">left2 top</div>
    	<div id="rigt2_top" class="floatleft">right2 top</div>
    	</div>
     
    	<div id="content_bottom">
    	<div id="sidebar2">sidebar2</div>
    	</div>
     
    <div id="footer">footer</div>	
    </div> <!-- end of div main -->

    Code css : 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
    html {height:768px;width:1366px;}
    body,#main {height:100%;width:100%;}
     
    #banner,#footer{
    text-align:center;
    width:100%;}
    #main {
    display:table;width:100%;}
     
    #banner {width:100%;height:290px;}
     
    #left1 {float:left;width:49%;padding-top:10px;}
    .floatleft  {float:left;}
     
    #right1 {float:right;width:49%;text-align:right;}
    #banner,#left1,#right1,#footer,#sidebar1,#sidebar2 {border:1px solid}
     
     
    #hr1{
    clear:both;}
     
    #content_top,#content_bottom{display:table-row;}
    #sidebar1,#sidebar2{display:table-cell;
    width:3%;word-wrap:break-word;background-color:red;border:1px solid;}
    #left2_top,#right2_top {width:47%;padding-left:5px;}
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Réalisation de mise en page HTML avec du CSS
    Par ForgetTheNorm dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 17/08/2011, 20h59
  2. Réalisation d'une mise en page à partir d'une maquette
    Par ccsuperstar dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 13/02/2007, 03h57
  3. mise en page (Header and Footer) en XML-XSL.
    Par christine dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 01/03/2004, 17h31
  4. [CR] Mise en page
    Par akolyto dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 14/10/2003, 13h22
  5. [mise en page] pour bien indenter son code
    Par bihorece dans le forum C++Builder
    Réponses: 4
    Dernier message: 06/08/2003, 17h14

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