Background sur cellules de table

**kodjoe** · 26/07/2015, 16h55

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 ?

**ABCIWEB** · 26/07/2015, 17h50

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.

**kodjoe** · 26/07/2015, 19h12

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.

**NoSmoking** · 26/07/2015, 21h53

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/>.

**kodjoe** · 27/07/2015, 01h13

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> ... ?

**NoSmoking** · 27/07/2015, 13h30

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.

**kodjoe** · 27/07/2015, 18h56

à 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 ...

**NoSmoking** · 27/07/2015, 19h53

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.

**kodjoe** · 27/07/2015, 20h43

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/

**ABCIWEB** · 28/07/2015, 04h37

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...

**kodjoe** · 28/07/2015, 13h41

@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

**ABCIWEB** · 28/07/2015, 15h22

Envoyé par kodjoe

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.

**kodjoe** · 28/07/2015, 18h57

ouep j'ai compris, je vais voir ça ;D

**NoSmoking** · 28/07/2015, 19h56

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>

**kodjoe** · 29/07/2015, 21h07

@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/