Il parait que les tableaux c'est *mal*

Ca ne marche pas trop mal mais...

.bandeau {
white-space: nowrap;

Je suis surpris que ce soit nécessaire (sinon toutes les images sont les
une en dessous des autres)

width: 100%;
overflow-x: auto;
}

.bandeau img {
height: 100%;
}

Le pricipal problème c'est que les images sont trop hautes sur les
petits écrans (mobiles).
Je dois mettre quoi à la place de 100% pour que ça se limite à la
hauteur de la fenêtre (mes images font 700 px de haut).
--
Fra

Fra <fra@alussinan.org> wrote:

Ca ne marche pas trop mal mais...

> .bandeau {
> white-space: nowrap;

Je suis surpris que ce soit nécessaire (sinon toutes les images sont les
une en dessous des autres)

> width: 100%;
> overflow-x: auto;
> }
>
> .bandeau img {
> height: 100%;
> }

Le pricipal problème c'est que les images sont trop hautes sur les
petits écrans (mobiles).
Je dois mettre quoi à la place de 100% pour que ça se limite à la
hauteur de la fenêtre (mes images font 700 px de haut).

Aussi, où puis-je introduire un padding de 2px entre images ?
--
Fra

Le 21/02/15 17:18, Fra a écrit :

Ca ne marche pas trop mal mais...

.bandeau {
white-space: nowrap;

Je suis surpris que ce soit nécessaire (sinon toutes les images sont les
une en dessous des autres)

Normalement ... non
il devrait il y en avoir de 1 à 4 avant de passer à la ligne
sauf à ce que les images soient trop larges

.bandeau n'a aucune raison de s'étendre en largeur (hors du view-port
!!), le nowrap va l'y contraindre et sa largeur va s'étendre jusqu'à
contenir toutes les images (sans avoir rien à calculer)

Le principal problème c'est que les images sont trop hautes sur les
petits écrans (mobiles).

Non elles sont trop hautes pour les navigateurs qui, finalement, ne sont
pas adaptés à leurs mobiles ...

Migrer sur Safari ou Opéra, hop !
(Opera arrivait à se débrouiller sur mon vieux Nokia 120/200)

Je dois mettre quoi à la place de 100% pour que ça se limite à la
hauteur de la fenêtre

Ça ne le fait pas ?
Car c'était prévu pour, on dirait. (height: 100%;)

En tous cas dans mon Fx là ça fonctionne, l'image se colle à la hauteur
de fenêtre que j'impose.

(mes images font 700 px de haut).

Va donc falloir aussi prévoir le coup pour les NetBooks de 600px de haut !!





Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

À (at) Sat, 21 Feb 2015 17:18:34 +0100,
fra@alussinan.org (Fra) écrivait (wrote):

Ca ne marche pas trop mal mais...

.bandeau {
white-space: nowrap;

Je suis surpris que ce soit nécessaire (sinon toutes les images sont les
une en dessous des autres)

Une image est considérée comme un mot. Le navigateur peut donc passer à
la ligne entre les images. Avec 'nowrap', il ne peut plus le faire.

width: 100%;
overflow-x: auto;
}

.bandeau img {
height: 100%;
}

Le pricipal problème c'est que les images sont trop hautes sur les
petits écrans (mobiles).
Je dois mettre quoi à la place de 100% pour que ça se limite à la
hauteur de la fenêtre (mes images font 700 px de haut).

A priori, le 100% se rapporte à la hauteur de l'élément englobant si
elle est spécifiée (il faudrait que ce soit le viewport ou un élément
dont la hauteur est déjà 100% du viewport...).


--
Paul Gaborit - <http://perso.mines-albi.fr/~gaborit/>

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

Le 21/02/15 17:18, Fra a écrit :
> Ca ne marche pas trop mal mais...
>
>> .bandeau {
>> white-space: nowrap;
>
> Je suis surpris que ce soit nécessaire (sinon toutes les images sont les
> une en dessous des autres)

Normalement ... non
il devrait il y en avoir de 1 à 4 avant de passer à la ligne
sauf à ce que les images soient trop larges

Elles étaient les une en dessous des autres. Chaque image fait 700x525px
(verticales) et mon navigateur est un poil au dessus de 1024px de large.

.bandeau n'a aucune raison de s'étendre en largeur (hors du view-port
!!), le nowrap va l'y contraindre et sa largeur va s'étendre jusqu'à
contenir toutes les images (sans avoir rien à calculer)

> Le principal problème c'est que les images sont trop hautes sur les
> petits écrans (mobiles).

Non elles sont trop hautes pour les navigateurs qui, finalement, ne sont
pas adaptés à leurs mobiles ...

Migrer sur Safari ou Opéra, hop !
(Opera arrivait à se débrouiller sur mon vieux Nokia 120/200)

Je ne choisis pas le navigateur en face malheureusement.
Je fais mes tests sur un iphone, deux ipads (iOS7 et 8) et un galaxy
samsung.

> Je dois mettre quoi à la place de 100% pour que ça se limite à la
> hauteur de la fenêtre

Ça ne le fait pas ?

Nan

Car c'était prévu pour, on dirait. (height: 100%;)

J'ai l'impression que c'est 100% de l'image.

En tous cas dans mon Fx là ça fonctionne, l'image se colle à la hauteur
de fenêtre que j'impose.

Peux tu me confirmer que cette syntaxe est bonne (j'hésite sur le
".photos > img") :
-----
<style type="text/css">
.photos {
white-space:nowrap;width:100%;overflow:auto;display:block }
.photos > img { height: 100%; }
</style>

<div id="real" align="center" class="photos">
<p><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>
-----

> (mes images font 700 px de haut).

Va donc falloir aussi prévoir le coup pour les NetBooks de 600px de haut !!

Il est bien là mon problème (ainsi que tous les téléphones).
Sur ton netbook les images de 700px de haut ne dépassent pas en hauteur
avec cette syntaxe ?

--
Fra

Paul Gaborit <Paul.Gaborit@invalid.invalid> wrote:

A priori, le 100% se rapporte à la hauteur de l'élément englobant si
elle est spécifiée (il faudrait que ce soit le viewport ou un élément
dont la hauteur est déjà 100% du viewport...).

Euh. Je fais comment ? (Je suis débutant.)
A priori je n'ai aucune hauteur plus globale de spécifiée (ça ne risque
pas d'empêcher le scroll vertical de la page ?).
--
Fra

Le 21/02/15 19:45, Fra a écrit :

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

Le 21/02/15 17:18, Fra a écrit :

Ca ne marche pas trop mal mais...

.bandeau {
white-space: nowrap;

Je suis surpris que ce soit nécessaire (sinon toutes les images sont les
une en dessous des autres)

Normalement ... non
il devrait il y en avoir de 1 à 4 avant de passer à la ligne
sauf à ce que les images soient trop larges

Elles étaient les une en dessous des autres. Chaque image fait 700x525px
(verticales) et mon navigateur est un poil au dessus de 1024px de large.

voilà ! 525 x 2 = 1050 qui est > à 1024
hop! les images s'empilent

.bandeau n'a aucune raison de s'étendre en largeur (hors du view-port
!!), le nowrap va l'y contraindre et sa largeur va s'étendre jusqu'à
contenir toutes les images (sans avoir rien à calculer)

Le principal problème c'est que les images sont trop hautes sur les
petits écrans (mobiles).

Non elles sont trop hautes pour les navigateurs qui, finalement, ne sont
pas adaptés à leurs mobiles ...

Migrer sur Safari ou Opéra, hop !
(Opera arrivait à se débrouiller sur mon vieux Nokia 120/200)

Je ne choisis pas le navigateur en face malheureusement.
Je fais mes tests sur un iphone, deux ipads (iOS7 et 8) et un galaxy
samsung.

Plus sérieusement et après tests sur Firefox, il faut utiliser la
recette usée et que body et html soient à 100% de hauteur

Ça ne le fait pas ?

Nan

Car c'était prévu pour, on dirait. (height: 100%;)

J'ai l'impression que c'est 100% de l'image.

Vi, en effet (et ce phénomène est propre aux images)

En tous cas dans mon Fx là ça fonctionne, l'image se colle à la hauteur
de fenêtre que j'impose.

mais celle-là je l'y avais mise seule

Peux tu me confirmer que cette syntaxe est bonne

J'ai rajouté le truc à Paul sur ma démo en ligne avec le petit
complément css manquant (html et body)
Tu pourras l'essayer sur tes multiples nomades.


(j'hésite sur le

".photos > img") :
-----
<style type="text/css">
.photos {
white-space:nowrap;width:100%;overflow:auto;display:block }

display: block; ne sert à rien (un div est un bloc)

attention c'est
overflow-x et c'est mieux :
overflow-x: scroll;
per sécurité et à cause d'éventuels effets de bord on rajoutera :
overflow-y: hidden;
pour éviter un disgracieux ascenseur vertical à cause d'une histoire de
marge naturelle ou de pixel égaré.

.photos > img { height: 100%; }

Perso, je n'utilise pas le truc-machin >

.photos img { mon style }

</style>

<div id="real" align="center" class="photos">
<p><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>
-----

pour avoir un petit espace entre images il suffit de le mettre dans le
code html entre les balises img
cet espace peut être multiple, le brouteur n'en utilisera qu'un

<img src="img_3979-2.jpg" alt="" />
<img src="img_3980-2.jpg" alt="" />
<img src="photo-0016-2.jpg" alt="" />

(mes images font 700 px de haut).

Va donc falloir aussi prévoir le coup pour les NetBooks de 600px de haut !!

Il est bien là mon problème (ainsi que tous les téléphones).
Sur ton netbook les images de 700px de haut ne dépassent pas en hauteur
avec cette syntaxe ?

Ha! ?
Là il est éteint
et il est sous windows
et il n'est pas automatiquement connecté
ça me fait donc un *gros* travail pour un *petit* essai !

Si ça passe sur une tablette horizontale ça le fera bien sur un NetBook ?!


Ça semble correct ici en modifiant la fenêtre de Firefox.

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

Le 21/02/15 20:10, Fra a écrit :

Paul Gaborit <Paul.Gaborit@invalid.invalid> wrote:

A priori, le 100% se rapporte à la hauteur de l'élément englobant si
elle est spécifiée (il faudrait que ce soit le viewport ou un élément
dont la hauteur est déjà 100% du viewport...).

Euh. Je fais comment ? (Je suis débutant.)
A priori je n'ai aucune hauteur plus globale de spécifiée (ça ne risque
pas d'empêcher le scroll vertical de la page ?).

Non, non, regarde :

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

la démo à Paul est en bas après le scroll de la page elle-même

J'ai mis 90% de haut pour qu'on ait le titre en + des images
(ou les images en + du bouton)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

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.

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/

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

Non, non, regarde :

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

la démo à Paul est en bas après le scroll de la page elle-même

J'ai mis 90% de haut pour qu'on ait le titre en + des images
(ou les images en + du bouton)

J'y suis presque !

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



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
(script en bas)- :

-----
<style type="text/css">
.photos {
width: 100%;
height: 95%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
display:none;
}

.photos img {
height: 100%;
}
</style>

<noscript>
<style type="text/css">
.photos {
width: 100%;
height: 95%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
display:block;
}

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

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

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
function montrer(id) {
$("#"+id).slideDown( "slow" );
}
</script>

<script>
function masquer(id) {
$("#"+id).slideUp( "slow" );
}
</script>
------

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