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

HTML Discussion :

Background sur cellules de table


Sujet :

HTML

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut Background sur cellules de table
    Bonjour je rencontre actuellement 3 problèmes uniquement sur Ipad. Si vous avez une idée concernant c'est trois problèmes, ce serait top !!
    Pour mieux comprendre mes problèmes visionner ma page sur Imac, pc, ... puis sur Ipad:

    http://500milligrammes.com/facticema...zine/magazine/




    - Le premier problème concerne les background des différentes balise TD, je ne peux voir que le premier background sur ipad,
    les autres images sont sur fond blanc ?

    - le second problème concerne la newsletter qui se trouve dans le header, lorsque j'essaie d'écrire quelque chose sur ipad, le
    clavier virtuel apparait et nous amène en haut de page automatiquement, il est donc impossible d'écrire quoi que ce soit !!!

    - Pour finir, le troisième problème concerne la lightbox fancybox, sur ipad je me retrouve face à un écran blanc ?

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Y'a pas que sur ipad qu'il y a des problèmes, sur firefox, chrome et ie10 le haut de la page est vide. Et Les images prennent beaucoup trop de temps à charger...
    L'id "fixedbar" en haut de page est à display "none", l'id "navigation" ne contient rien et le tableau avec id "topnav" est avec margin-top 400px...

    Je vois aussi que tu as supprimé le click droit, un enfantillage qui ne sert finalement à rien mais qui empêche d'avoir un fonctionnement normal. Pas bon.

    Commence plutôt par avoir un html correct et ensuite applique tes effets javascripts. Tu verras plus vite d'où vient le problème.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut
    Tout d'abord merci pour tes remarques, En théorie le contenu de ma page ne comprend
    que les carrés de gauche (images + background) et droite (infos), j'espère avoir arrangé
    tous les soucis que tu m'as cité ?



    - j'ai supprimer l'interdiction au clique droit
    - j'ai supprimé le display:none de fixedbar
    - L'histoire des background dans les TD est réglée, il fallait supprimer background-attachment: fixed pour que ça fonctionne sur l'ipad et les pc !!



    Il ne reste plus que :

    - le problème de la newsletter qui se trouve dans le header, lorsque j'essaie d'écrire quelque chose sur ipad, le
    clavier virtuel apparait et nous amène en haut de page automatiquement, il est donc impossible d'écrire quoi que ce soit !!!
    Si je veux pouvoir écrire il faudra que je déplace le champ newsletter hors de l'id fixedbar, et la ça fonctionne ?

    - Pour finir, le problème concernant la lightbox fancybox, lorsque je clique sur preview, je me retrouve face à un écran blanc sur ipad ?
    Je pense que c'est une histoire de z-index.

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    j'ajouterais quand même que la structure que tu utilises, succession de TABLE, est des plus inappropriée ainsi que l'usage abusif de <br/>.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut
    j'suis d'accord avec toi je vais supprimer un max de <br/> voir la totalité
    et pour les tables, penses-tu que je serai arrivé au même résultat avec des <ul><li> ... ?

  6. #6
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Listes pourquoi pas ou encore une série d'articles, difficile de te répondre compte tenu du contenu que l'on peut observer sur le lien que tu as fournis !

    Dans l'instant je te dirais utilisation de DIV simplement, élément neutre par excellence.

  7. #7
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut
    à la base j'étais partie sur des DIV mais je n'ai pas réussi à avoir ce genre de rendu, tu as une idée ?

    - 2 carrées de 50% de width chacun par ligne
    - Lorsque la resolution est inférieur à 1024px, un carrée passe automatiquement au dessus de l'autre.
    - Dans la première ligne c'est le carrée de gauche qui passe au dessus
    - Dans la seconde ligne c'est le carrée de droite qui passe au dessus
    - et ainsi dessuinte ...

  8. #8
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Si tu ne veux pas trop t'éloigner de ton concept regarde du coté de display:table-xxx.

    Remarque : cette façon de recadrer ne risque t-elle pas d'être déroutante pour le visiteur.

  9. #9
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut
    c'est le but, je ne veux pas que le visiteur soit ennuyé par la logique répétitive des blocs on est en 2015("c'est une vane")


    Merci pour le display, tu pensais à un truc du genre ?
    http://jsfiddle.net/kodjoe/vr0jL84s/

  10. #10
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Autre remarque, ne pourrais-tu pas diminuer la taille de tes images qui sont en 734px × 1 024px vu qu'au maximum elles sont affichées en 500px × 697px...

  11. #11
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut
    @ABCIWEB tu penses que cette taille d'image peut combler toutes les resolutions d'écran ?

    ps: as-tu une idèe concernant ce lien http://jsfiddle.net/kodjoe/zmyLyxdv/
    j'aimerai que lorsque l'on resize la page et que les div se superpose, que l'on se retrouve avec 1/2/4/3
    et non 1/2/3/4

  12. #12
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Citation Envoyé par kodjoe Voir le message
    ABCIWEB tu penses que cette taille d'image peut combler toutes les resolutions d'écran ?
    C'est à toi de voir, mais tu dois bien avoir des max-width ou max-height quelque part dans tes blocs conteneurs. Donc en fonction de ça tu dois pouvoir connaître les dimensions maximales des images.

  13. #13
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut
    ouep j'ai compris, je vais voir ça ;D

  14. #14
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Comme tu veux faire un truc exotique on va faire avec une structure et du CSS dès plus simple

    On va juste jouer avec la propriété float et une inversion dans l'ordre des éléments pour y arriver.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div>
      <div>item #1</div>
      <div>item #2</div>
    </div>
    <div>
      <div class="passe_au_dessus">item #4</div>
      <div>item #3</div>
    </div>
    <div>
    On note que dans cette structure la DIV item #4 est avant la DIV item #3, mais on verra cela après.

    Pour commencer on met les éléments item #x en box-sizing:border-box, pour ne pas rencontrer de problème avec les bordures ou autres, et on leur affecte une width:50% associé à un float:left.

    Concernant la DIV item #4, il suffit de la mettre en float: right, géré ici via la class="passe_au_dessus", pour la faire passer à droite, magique non !

    Pour finir lors de la réduction de la page il suffit de rien faire d'autre que de leurs affecter une width:100%.

    Voilà c'est tout !

    Exemple complet
    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>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>[CSS]Changement d'ordre</title>
    <meta name="Author" content="NoSmoking">
    <style>
    html, body{
      margin:0;
      padding:0;
      font-size:100%;
      font: 1em/1.5 Verdana, sans-serif;
    }
    h1{
      color: #006699;
    }
    div {
      box-sizing:border-box;
    }
    div > div {
      border: 1px solid #eee;
      margin-bottom: 0;
      width:50%;
      float:left;
      height:4em;
    }
    .passe_au_dessus{
      float: right;
      background:#EEF;
    }
    @media screen and (max-width:1024px) {
      div > div{
        width: 100%;
        text-align: center;
      }
    }
    </style>
    </head>
    <body>
      <h1>Changement d'ordre</h1>
      <div>
        <div>item #1</div>
        <div>item #2</div>
      </div>
      <div>
        <div class="passe_au_dessus">item #4</div>
        <div>item #3</div>
      </div>
      <div>
        <div>item #5</div>
        <div>item #6</div>
      </div>
      <div>
        <div class="passe_au_dessus">item #8</div>
        <div>item #7</div>
      </div>
    </body>
    </html>

  15. #15
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut
    @NoSmoking j'aime ta comprehension pour mes goûts exotiques et j'aime aussi ton code, la base parait plus logique que ce que j'entreprenais
    encore merci à toi ;D



    ps: quelqu'un saurait pourquoi lorsque sur mon ipad, et seulement sur mon ipad, j'essaie d'écrire dans la section newsletter qui se trouve dans le header
    de ma page, je suis automatiquement redirigé en haut de page, et il m'est impossible d'écrire quoi que ce soit car on ne voit plus le header ??

    voici le lien: http://www.500milligrammes.com/facti...zine/magazine/

  16. #16
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    ps: quelqu'un saurait...
    merci de bien vouloir tenir compte des règles.

    Une discussion = une question
    en conclusion solde cette discussion, bouton résolu, et ouvre en une autre, cela épargnera les mélanges de genres,
    Merci.

  17. #17
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2012
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2012
    Messages : 26
    Points : 12
    Points
    12
    Par défaut
    tu as raison désolé !!

  18. #18
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Dans ce cas il n'y a plus qu'à...

Discussions similaires

  1. Réponses: 1
    Dernier message: 15/07/2013, 17h32
  2. [AC-2003] Problem ole serveur /activeX uniquement sur 1 poste (pologne)
    Par EdmoParker dans le forum Access
    Réponses: 1
    Dernier message: 05/02/2011, 07h24
  3. Probleme install sur RedHat
    Par delph_b dans le forum Installation
    Réponses: 5
    Dernier message: 27/05/2004, 10h09
  4. Réponses: 3
    Dernier message: 17/05/2004, 18h28

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