Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP Il parait que les tableaux c'est *mal*

Il parait que les tableaux c'est *mal*

56 réponses
Avatar
fra
Bonjour

Il parait que les tableaux c'est *mal* (c) depuis html5.

Quelqu'un pourrait-il me dire par quoi remplacer ce code pour que ça
donne la même chose (une div scrollable à l'horizontal et qui ne déborde
pas de la page) :

-----
<div id="real" align="center" style="overflow:auto;">
<table border="0" cellpadding="2" cellspacing="0" width="223%">
<tbody>
<tr>
<td valign="top"><img src="img_3979-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3980-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
<td valign="top"><img src="photo-0016-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3982-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
<td valign="top"><img src="img_3981-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"> </td>
<td valign="top"><img src="img_3961-2.jpg"
alt="" align="left" hspace="0" vspace="0"
width="100%"></td>
</tr>
</tbody>
</table>
</div>
-----

Si en plus ça pouvait être automatiquement à 100% de la hauteur de la
fenêtre ça serait idéal.

Merci d'avance.
--
Fra
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3 4 5
Avatar
fra
Fra wrote:

Tu me diras c'est normal qu'avec un display:none la div soit invisible
mais avant (avec mon tableau satanique) ça marchait ; le script la
rendait visible. Pourquoi cette différence et comment résoudre ce
dernier pb ?



Je viens d'enlever tout le balisage <p> </p> et ça marche super bien
comme je veux.

Juste un petit détail : l'effet d'ouverture de div de jquery ne se fait
plus sous forme d'une ligne horizontale qui s'ouvre mais s'agrandit à
partir d'une zone à gauche en largeur et en hauteur.
--
Fra
Avatar
fra
Fra wrote:

J'ai réduit ton code au maximum et j'arrive à ça qui marche



Tiens d'ailleurs je pige pas comment le padding de 2px s'est fait tout
seul sans être spécifié (alors que dans les essais infructueux il n'y en
avait pas).
--
Fra
Avatar
fra
Fra wrote:

Juste un petit détail : l'effet d'ouverture de div de jquery ne se fait
plus sous forme d'une ligne horizontale qui s'ouvre mais s'agrandit à
partir d'une zone à gauche en largeur et en hauteur.



Tiens d'ailleurs sur Chrome ça garde l'effet d'avant (ligne horizontale
qui s'élargie)... Bizarre !
--
Fra
Avatar
SAM
Le 22/02/15 11:14, docanski a écrit :
SAM a écrit le 21/02/2015 23:55 :

Non, non, regarde :

<http://stephane.moriaux.pagesperso-orange.fr/truc/pass-horizontal>



Salut Steph,

Au delà de 6 photos, la hauteur de la page double : superposition des
suivantes.




oui, c'est réglé pour 6 vues,
Pour plus (ou moins) de vues sans tracas il vaut mieux utiliser le truc
à Paul

sinon, si on y tiens, pour 8 vues il faut corriger :
#viewer p { width: 800%;}
#viewer img { width: 12.5%; }



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 22/02/15 12:18, Fra a écrit :
SAM wrote:

<http://stephane.moriaux.pagesperso-orange.fr/truc/pass-horizontal>



J'ai réduit ton code au maximum et j'arrive à ça qui marche :
-----
<style>

html, body { height: 100%; }
.photos {
width: 100%;
height: 95%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}

.photos img {
height: 100%;
}

</style>

<div id="real" class="photos">
<p class="photos">
<img src="img_3979-2.jpg" alt="" />
<img src="img_3980-2.jpg" alt="" />
<img src="photo-0016-2.jpg" alt="" />
<img src="img_3982-2.jpg" alt="" />
<img src="img_3981-2.jpg" alt="" />
<img src="img_3961-2.jpg" alt="" />
</p></div>
-----

J'ai eu du mal à trouver que la class devait être appliquée à <div> ET à
<p>.



Ha! Bon ?
J'aurais pensé qu'au div aurait suffit ? !

Par contre, ça ça ne veut pas marcher (les photos deviennent invisibles)
-ajout d'un display:none pour faire apparaitre la div seulement au click



L'apparition fait glisser le contenu qui est après les images vers le
bas aussi ?
Qu'est-ce qui déclenche le phénomène ? (apparition/disparition), quel
bouton ? ou lien ? ou autre calque / bloc ?


Paske là, moi, avec les CSS.3 et tout leur arsenal de
transition+mouvement+fadding je me passerai d'une bibli JS !


(dont je me serais ss doute aussi passé avec CSS.2)
(yapa besoin d'embarquer 25 ko de JS quand 2 lignes suffisent)

(script en bas)- :



ben non ... y a pas les déclencheurs ...



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 22/02/15 12:52, Fra a écrit :

Tiens d'ailleurs je pige pas comment le padding de 2px s'est fait tout
seul sans être spécifié (alors que dans les essais infructueux il n'y en
avait pas).



Ce "padding" qui est en fait un "margin" naturel pour les images se
supprime en collant les balises IMG les unes au autres
(et lycée de Versailles comme expliqué précédemment)

Au lieu de réorganiser le code html on peut aussi mettre en css :

.photos img { margin: 0 -2px; }




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
fra
SAM wrote:

Ce "padding" qui est en fait un "margin" naturel pour les images se
supprime en collant les balises IMG les unes au autres
(et lycée de Versailles comme expliqué précédemment)



OK


Au lieu de réorganiser le code html on peut aussi mettre en css :

.photos img { margin: 0 -2px; }



Nope. C'est bien comme ça.
--
Fra
Avatar
fra
SAM wrote:

Paske là, moi, avec les CSS.3 et tout leur arsenal de
transition+mouvement+fadding je me passerai d'une bibli JS !


(dont je me serais ss doute aussi passé avec CSS.2)
(yapa besoin d'embarquer 25 ko de JS quand 2 lignes suffisent)



T'aurais mis quoi ?

D'un autre coté jQuery je l'utilise aussi pour le smooth-scrolling.


> (script en bas)- :

ben non ... y a pas les déclencheurs ...



Ce pb s'est résolu tout seul en virant le balisage <p>
--
Fra
Avatar
SAM
Le 22/02/15 14:39, Fra a écrit :
Fra wrote:

Juste un petit détail : l'effet d'ouverture de div de jquery ne se fait
plus sous forme d'une ligne horizontale qui s'ouvre



Tiens d'ailleurs sur Chrome ça garde l'effet d'avant ... Bizarre !



Tant pis pour les vieux navigateurs
(qui n'auront pas d'effet de transition - clic/clac 0<-->100%)
mais ... les CSS.3 c'est génial !!!


<!DOCTYPE html>
<html lang="fr"><head><meta charset="utf-8" /><title>test</title>
<script>
function anim() {
var p = document.getElementById('photos');
p.style.width = (p.style.width == '100%')? '0%' : '100%';
}
</script>
<style>
html, body { height: 100%; text-align:center; }
#photos {
width: 0%;
height: 95%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
transition-property: width; transition-duration: 2s;
}
#photos img {
height: 100%;
}
</style>
</head><body>
<p id="photos">
<img src="img_3979-2.jpg" alt="" />
<img src="img_3980-2.jpg" alt="" />
<img src="photo-0016-2.jpg" alt="" />
<img src="img_3982-2.jpg" alt="" />
<img src="img_3981-2.jpg" alt="" />
<img src="img_3961-2.jpg" alt="" />
</p><span onclick="anim()" style="background:#eee;cursor:pointer">
[montrer / cacher ]
</span>
</body></html>


--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 22/02/15 15:28, Fra a écrit :

D'un autre coté jQuery je l'utilise aussi pour le smooth-scrolling.



Je sais pas ce que c'est.
Une démo (de chez toi)
que je voiye à voir si c'est pas encore un truc c...t

(sur Mac la molette du mulot scrolle smoothement sans pb)

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
1 2 3 4 5