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
2 3 4 5 6
Avatar
SAM
Le 22/02/15 22:00, docanski a écrit :
SAM a écrit le 22/02/2015 14:47 :

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



Ah ouiiii ! fallait le voir ...
Je cherchais une variable ...



Ouais, ça a peut-être été du vite fait, au plus simple

que je ne trouvais évidemment pas.



;-)

Alors que je prône la simplicité, je ne l'ai pas été assez et Paul
Gaborit m'a battu à plates coutures !
Son truc fonctionne très bien, avec moins de moyens, pour le nombre de
photos qu'on veut *et* sans rien modifier aux CSS !!!


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

function anim() {
var p = document.getElementById('photos');
p.style.height = (p.style.height == '95%')? '0%' : '95%';
}
</script>
<style>
html, body { height: 100%; text-align:center; }
#photos {
width: 100%;
height: 0%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
transition: all 1s;
}



Oui c'est cet effet là (l'autre j'aime pas ; c'est ce que ça me fait
maintenant). Le script peut s'adapter à n'importe quelle div (plutôt
qu'à "p") passée en paramètre ?



si cette n'importe quelle "div" a les mêmes css et qu'on doive y
appliquer les mêmes effets, oui

function anim( id ) {
var p = document.getElementById( id );
...

<span onclick="anim('photos')">


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
docanski
SAM a écrit le 23/02/2015 00:05 :

Alors que je prône la simplicité, je ne l'ai pas été assez et Paul
Gaborit m'a battu à plates coutures !
Son truc fonctionne très bien, avec moins de moyens, pour le nombre de
photos qu'on veut *et* sans rien modifier aux CSS !!!



Mes essais avec les styles de Paul ne sont pas concluants sous
Iceweasel, l'équivalent de Firefox sous Debian.
J'ai dû corriger comme suit pour avoir un résultat correct :

<style type="text/css">
.bandeau {white-space: nowrap;width: 100%;overflow-x: auto; }
.bandeau img {height: 100%;width:80%;padding-left:10%;padding-right:10%}
</style>

Note que la barre de défilement qui prend toute la largeur de la page,
ce n'est pas du meilleur effet. Ton bouton était plus "classe" ;-)
Mébon, cela prenait aussi un peu de la hauteur dans l'affichage et sur
des écrans de tablette et d'ordiphones, ce n'est pas l'idéal non plus.
L'idéal serait de le placer en superposition dans l'image.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
fra
SAM wrote:

function anim( id ) {
var p = document.getElementById( id );
...

<span onclick="anim('photos')">



Merci. Je vais essayer d'adapter ça afin de tenter de retrouver mon
ancien effet.
--
Fra
Avatar
fra
docanski wrote:

Note que la barre de défilement qui prend toute la largeur de la page,
ce n'est pas du meilleur effet.



On ne la voit pas sur les devices tactiles (ou sur mac). Et ça a
l'avantage d'être standard et scrollable partout.
--
Fra
Avatar
fra
SAM wrote:

p.style.height = (p.style.height == '95%')? '0%' : '95%';



Est-ce que tu peux m'expliquer cette syntaxe.
Le rôle de "(p.style.height == '95%')?" ?
Si on écrit que "p.style.height = '0%' : '95%';" ça marche ? (Mais ça va
animer toujours dans le même sens ?)

J'aimerais m'entrainer à faire un script différent, l'un ouvrant une div
et l'autre la fermant.
--
Fra
Avatar
SAM
Le 23/02/15 19:41, Fra a écrit :
SAM wrote:

p.style.height = (p.style.height == '95%')? '0%' : '95%';



Est-ce que tu peux m'expliquer cette syntaxe.
Le rôle de "(p.style.height == '95%')?" ?



si le style height de 'p' est bien égal à 95% alors ...

'0%' : '95%'

choix 1 sinon choix 2

variable = (condition)? valeur 1 : valeur 2;

ça permet avec peu de code de fabriquer un "toggle", un "interrupteur à
bascule"

Si on écrit que "p.style.height = '0%' : '95%';" ça marche ? (Mais ça va
animer toujours dans le même sens ?)



non, ça ne devrait pas fonctionner,
le ':'
veut dire 'sinon' (remplace "else if")




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

> Est-ce que tu peux m'expliquer cette syntaxe.
> Le rôle de "(p.style.height == '95%')?" ?

si le style height de 'p' est bien égal à 95% alors ...

'0%' : '95%'

choix 1 sinon choix 2

variable = (condition)? valeur 1 : valeur 2;

ça permet avec peu de code de fabriquer un "toggle", un "interrupteur à
bascule"



OK. J'ai réussi. Et ça donne exactement le même effet qu'avec jQuery ! :
en l'occurence un effet de zoom alors qu'on s'attend à un effet
d'agrandissement uniquement en hauteur...


Mon code :
-----
<style>
.photos { width: 100%; height: 0%; overflow-x: auto;
overflow-y: hidden; white-space: nowrap; transition: all 1s; }
.photos img { height: 100%; }
</style>

<noscript>
<style>
.photos { width: 100%; height: 90%; overflow-x: auto;
overflow-y: hidden; white-space: nowrap; display:block; }
.photos img { height: 100%; }
</style>
</noscript>

<div align="center" id="real" 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="" />
</div>

<script>
function montrer(id) {
document.getElementById( id ).style.height = '90%';
}
</script>

<script>
function masquer(id) {
document.getElementById( id ).style.height = '0%';
}
</script>
-----

Trop bizarre !
--
Fra
Avatar
SAM
Le 24/02/15 18:37, Fra a écrit :
SAM wrote:

variable = (condition)? valeur 1 : valeur 2;

ça permet avec peu de code de fabriquer un "toggle", un "interrupteur à
bascule"



OK. J'ai réussi.



Bravo !

Et ça donne exactement le même effet qu'avec jQuery ! :
en l'occurence un effet de zoom alors qu'on s'attend à un effet
d'agrandissement uniquement en hauteur...



Bon ... définitivement ... je ne saurais pas ce que tu recherchais
exactement !
- zoom (d'un point ça s'agrandit de partout)
- dépliement (d'une ligne, agrandissement en hauteur)
J'avais compris que c'était le (2) ...
Alors que tu semble apprécier le (1)

Mon code :
-----
<style>
.photos { width: 100%; height: 0%; overflow-x: auto;
overflow-y: hidden; white-space: nowrap; transition: all 1s; }
.photos img { height: 100%; }
</style>

<noscript>
<style>
.photos { width: 100%; height: 90%; overflow-x: auto;
overflow-y: hidden; white-space: nowrap; display:block; }
.photos img { height: 100%; }
</style>
</noscript>



à mon idée, ici doit suffire le code :

<noscript>
<style>
.photos { height: 90%; }
</style>
</noscript>


<div align="center" id="real" 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="" />
</div>

<script>
function montrer(id) {
document.getElementById( id ).style.height = '90%';
}
</script>

<script>
function masquer(id) {
document.getElementById( id ).style.height = '0%';
}
</script>



si tu veux ... deux groupes de scripts et 2 fonctions (au lieu d'1 seul)

-----

Trop bizarre !



Qu'on obtienne avec ça l'effet (1) ? Pour sûr !

Mais ... si on y réfléchit ... on augmente/diminue la hauteur de
l'image, il n'est pas idiot qu'alors la largeur (de/des image/s) fasse
de même.
La ligne reste de largeur 100% (mais en invisible ... !) tandis que ses
images évoluent.

essayer avec :
<style>
.photos { width: 100%; height: 0%; overflow-x: auto;
overflow-y: hidden; white-space: nowrap; transition: all 1s; }
.photos img { height: 100%; width: 245px !important; }
</style>

voir si des fois pour l'une ou l'autre taille de fenêtre ?



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

> Et ça donne exactement le même effet qu'avec jQuery ! :
> en l'occurence un effet de zoom alors qu'on s'attend à un effet
> d'agrandissement uniquement en hauteur...

Bon ... définitivement ... je ne saurais pas ce que tu recherchais
exactement !
- zoom (d'un point ça s'agrandit de partout)



Non (mais c'est ça que ça fait).

- dépliement (d'une ligne, agrandissement en hauteur)



Oui

J'avais compris que c'était le (2) ...



Oui

Alors que tu semble apprécier le (1)



Non, mais c'est ça qui a lieu bizarrement.


> [...]
> <script>
> function montrer(id) {
> document.getElementById( id ).style.height = '90%';
> }
> </script>
>
> <script>
> function masquer(id) {
> document.getElementById( id ).style.height = '0%';
> }
> </script>

si tu veux ... deux groupes de scripts et 2 fonctions (au lieu d'1 seul)



Oui (c'est nécessaire).

[...
> Trop bizarre !

Qu'on obtienne avec ça l'effet (1) ? Pour sûr !



Bein ouais !


Mais ... si on y réfléchit ... on augmente/diminue la hauteur de
l'image, il n'est pas idiot qu'alors la largeur (de/des image/s) fasse
de même.



Dès que j'enlève ".photos img { height: 100%; }" l'effet visuel
redevient normal (mais la hauteur de l'image est fixe dans la div, soit
tronquée soit trop petite avec blanc).

La ligne reste de largeur 100% (mais en invisible ... !) tandis que ses
images évoluent.

essayer avec :
<style>
.photos { width: 100%; height: 0%; overflow-x: auto;
overflow-y: hidden; white-space: nowrap; transition: all 1s; }
.photos img { height: 100%; width: 245px !important; }
</style>



Ca force la largeur des images et elles sont toutes déformées.


voir si des fois pour l'une ou l'autre taille de fenêtre ?




--
Fra
2 3 4 5 6