Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
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
fra
SAM wrote:

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)



C'est le scroll vers une ancre sans que ce soit brutal.

--
Fra
Avatar
SAM
Le 22/02/15 16:14, Fra a écrit :
SAM wrote:

Le 22/02/15 15:28, Fra a écrit :

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



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



C'est le scroll vers une ancre sans que ce soit brutal.



;-)

à voir !
pas sûr que ça m'énerve pas ?!



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

à voir !
pas sûr que ça m'énerve pas ?!



Ca met à tout casser une seconde. Et ça permet que les gens se situent
dans la page car ils la voient défiler.
--
Fra
Avatar
fra
SAM wrote:

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



Bof.
La place prise est préréservée. Moi c'est dans l'autre sens que la div
"s'ouvre" (la page s'écarte au dessus et en dessous). J'ai essayé en
remplaçant les "width" par des "height" dans les animations : ça ne
marche plus.
--
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.



Ca fait un effet de zoom à partir du centre au lieu d'un déroulement à
partir de la première ligne de pixels.


Tiens d'ailleurs sur Chrome ça garde l'effet d'avant (ligne horizontale
qui s'élargie)... Bizarre !



En fait sur Chrome aussi il est un peu différent : au lieu d'un
déroulement à partir de la première ligne de pixels, on a un
agrandissement de la div à partir de sa ligne centrale.

Pour test, dès que j'enlève ".photos img { height: 100%; }" je retrouve
l'effet d'origine.

Trop bizarre. Et je n'aime pas le nouvel effet.
--
Fra
Avatar
SAM
Le 22/02/15 18:28, Fra a écrit :
SAM wrote:

<!DOCTYPE html>




(snip)
</body></html>



Bof.
La place prise est préréservée. Moi c'est dans l'autre sens que la div
"s'ouvre" (la page s'écarte au dessus et en dessous).



c'est le genre de chose que je n'imagine même pas !
s'il y a un truc qui m'énerve c'est bien ça : le yoyo

J'ai essayé en
remplaçant les "width" par des "height" dans les animations : ça ne
marche plus.



Oui, et alors ? et les CSS ?

Voici le code de remplacement qui fonctionne :

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;
}


Selon ce qu'il y a au-dessus du rang d'images, au zoom+ elles sont
coupées sur leur hauteur (pendant qu'on voit le bouton d'activation
disparaitre dans les profondeurs ...)


On peut aussi tenter en plus joli :


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



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 22/02/15 20:05, 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 mais s'agrandit à
partir d'une zone à gauche en largeur et en hauteur.





Ca fait un effet de zoom à partir du centre au lieu d'un déroulement à
partir de la première ligne de pixels.



Mais ... y a pas moyen de voir ?
Là ça ne m'est pas trop clair.
J'ai comme l'impression que ce que tu dis du zoom central est l'effet
(2) de ma dernière proposition (css + js de base)
et du zoom depuis ligne = +/- effet (1)

Tiens d'ailleurs sur Chrome ça garde l'effet d'avant (ligne horizontale
qui s'élargie)... Bizarre !



En fait sur Chrome aussi il est un peu différent : au lieu d'un
déroulement à partir de la première ligne de pixels, on a un
agrandissement de la div à partir de sa ligne centrale.



ouais ... bon ... tout ça c'est un peu pareil, et puis l'effet de zoom,
normalement, reste assez fugace, non ?

Pour test, dès que j'enlève ".photos img { height: 100%; }" je retrouve
l'effet d'origine.

Trop bizarre. Et je n'aime pas le nouvel effet.



Heu ... lequel de "nouvel" effet ?


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
fra
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 t'as aussi qquechose pour le smoothscroll, je vais peut être virer
jquery. (Sinon pert pas ton temps.)
--
Fra
Avatar
fra
SAM wrote:

J'ai comme l'impression que ce que tu dis du zoom central est l'effet
(2) de ma dernière proposition (css + js de base)
et du zoom depuis ligne = +/- effet (1)



C'est exactement ça.

ouais ... bon ... tout ça c'est un peu pareil, et puis l'effet de zoom,
normalement, reste assez fugace, non ?



Ouaip mais je trouve qu'on s'y retrouve bien dans l'ordre des élements
avec l'effet (1) (simple écartement à partir d'un ligne horizontal)
alors que l'effet (2) donne un effet d'élargissement global que n'ont
pas les autres élements qui ne suivent pas ce mouvement (simple
montée/descente).
--
Fra
Avatar
docanski
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 ... que je ne trouvais évidemment pas.

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/
2 3 4 5 6