redimensionner images de noobSlide en CSS

Questions, astuces à propos des modèles et des feuilles de styles
Avatar de l’utilisateur
luaqMac
Membre
Messages : 11
Inscription : 08 Nov 2010 13:01
Localisation : Romans-sur-Isère, Drôme - France

redimensionner images de noobSlide en CSS

Messagepar luaqMac » 09 Déc 2013 18:30

Salut à tous,

blabla d'intro
Je me mets au responsiv design… Je pratique contao et le trouve vraiment excellent comme cms…
J'attaque à la cool avec des div en % et avec 3 feuilles de styles afin de cibler les supports et avoir un passage fluide entre
c'est m^me plutôt bien fait dans le framework -> éditeur de css avec les types de médias et les Media Query liés aux feuilles css, MERCI au dév de CONTAO


Mon problème est sur des éléments images qu'on doit forcément insérer en pixel et dont je veux modifier les attributs width et height en proportion à ma taille de fenêtre, j'ai trouvé ça et là sur le net des css avec cette logique que le conteneur de mes images doit avoir un width en xx% de ma page et height en auto pour rester proportionnel. Ensuite mes images contenus avec une classe avec width:100% et height auto et mettre mes limites en width-min et width-max

Mais quand j'essaye sur noobSlide il n'y a que le conteneur qui suit le script mes images restent à leur taille d'origine…
De plus quand je regarde le code source je vois la classe des images ".ce_noobSlide_section" mais aussi ".noobSlide_section_inside" qui elle est vide mais présente dans chaque div d'image créée… et là :?:

Y a t-il un truc qui m'a échappé coté css ? ou cela va t-il au delà des css… Ci-dessous les script que j'ai mis en place. Merci pour vos réponses

j'ai déclaré dans mon head de présentation de page :

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"/>


Dans ma feuille css

Code : Tout sélectionner

screen and (min-width:850px)


Les attributs css

Code : Tout sélectionner

#cont_noob {/* id perso*/
width:95%;
height:auto;
min-width:300px;
max-width:800px;
}

.ce_noobSlide_section img {/*classe d'origine*/
width:100%;
height:auto;
min-width:300px;
max-width:800px;
}

FiX'
Membre
Messages : 399
Inscription : 02 Jan 2009 01:04

Re: redimensionner images de noobSlide en CSS

Messagepar FiX' » 10 Déc 2013 10:13

Hello,

Tu peux mettre la page en question en ligne, cela sera plus simple pour t'aider.

A+

Avatar de l’utilisateur
luaqMac
Membre
Messages : 11
Inscription : 08 Nov 2010 13:01
Localisation : Romans-sur-Isère, Drôme - France

Re: redimensionner images de noobSlide en CSS

Messagepar luaqMac » 10 Déc 2013 15:36

Merci FIX'

Oui oui, ce sera plus concret… Par contre je suis dessus - ça change tout l'temps- et ça fait un peu peur pour l'instant :oops:

Depuis hier, j'ai bien compris que mon bloc suit mon css mais pas les img -> je me suis aperçu que la div #cont_noob qui contient mon noobSlide agit un peu comme un masque en se redimensionnant mais pas les images de la classe .ce_noobSlide_section

le lien

http://www.marchandcom.fr/presentation- ... nsivd.html
Dernière édition par luaqMac le 10 Déc 2013 19:45, édité 1 fois.

Avatar de l’utilisateur
luaqMac
Membre
Messages : 11
Inscription : 08 Nov 2010 13:01
Localisation : Romans-sur-Isère, Drôme - France

Re: redimensionner images de noobSlide en CSS

Messagepar luaqMac » 10 Déc 2013 17:01

j'ai mis un fond bleu complètement incongru, juste histoire de bien visualiser le phénomène :wink:

Avatar de l’utilisateur
audrey
Membre
Messages : 282
Inscription : 07 Mars 2011 09:09
Localisation : Perpignan
Contact :

Re: redimensionner images de noobSlide en CSS

Messagepar audrey » 11 Déc 2013 08:18

Salut,
le img{width:100%}, ça risque pas trop de marcher, puisque tes images elles sont gérées via un background-image. Tu n'as pas d'images dans le code html. Donc là, déjà faudrait jouer avec un background-size (+ tous les jolis scripts et fallback qui vont bien).

Avatar de l’utilisateur
luaqMac
Membre
Messages : 11
Inscription : 08 Nov 2010 13:01
Localisation : Romans-sur-Isère, Drôme - France

Re: redimensionner images de noobSlide en CSS

Messagepar luaqMac » 11 Déc 2013 09:32

Merci Audrey, pour cette précision, donc mes images sont en fait des background de chaque section de mon noobSlide mmmmok
je me lance sur la piste du background-size…

FiX'
Membre
Messages : 399
Inscription : 02 Jan 2009 01:04

Re: redimensionner images de noobSlide en CSS

Messagepar FiX' » 11 Déc 2013 10:37

Hello,

J'ai regardé le lien que tu nous as communiqué.

Je pense que tu utilises une extension pour générer ton slide. Malheureusement, le résultat final est un peu douteux.

1/ Comme l'a dit @audrey, tu utilises des sections avec un background en CSS. Il serait plus logique d'utiliser directement la balise img et/ou des li + img.

2/ Dans le cas où tu utiliserais directement la balise img, "il suffirait" de paramétrer le CSS en utilisant un display:block et un max-width:100%. Je te laisse découvrir cela en profondeur via un exemple.

3/ Le fait d'avoir des blocs avec des tailles en %... ce n'est pas vraiment le principe du responsive design. Le fait d'utiliser des valeurs fluides attribuées aux blocs te poseront forcément des problèmes à moment ou à un autre... rien que d'un point de vue ergonomique / accessibilité (ex: un texte dans un bloc fluide de 90% s'adaptera à 90% par rapport à l'écran du visiteur... je te laisse imaginer sur un écran 27' pouces les difficultés pour le visiteur à lire / consulter ton site et surtout la sensation désagréable émanant des blocs trop imposants...). Fais du "vrai responsive" cela sera plus simple, en utilisant les tailles fixes des plus petites (écrans de smartphones) -> aux plus grandes (écrans de grande taille).

4/ Le code généré me semble un peu lourd pour un slide aussi simple.

5/ C'est un détail... mais change le nom de tes fichiers (pas d'espaces, pas de MAJ, pas d'accents, ...) sur certains navigateurs ça risquerait de ne pas passer.

A+

Avatar de l’utilisateur
luaqMac
Membre
Messages : 11
Inscription : 08 Nov 2010 13:01
Localisation : Romans-sur-Isère, Drôme - France

Re: redimensionner images de noobSlide en CSS

Messagepar luaqMac » 11 Déc 2013 12:07

Voilà mes déductions :

le html :

Code : Tout sélectionner

        <div id="cont_noob" class="mod_article block">
            <section id="noob_images" class="ce_noobSlide block" style="width:524px; height:236px; ">
                <div class="ce_noobSlide_container" style="width: 10480px; height: 236px; left: -8384px;"><--! les valeurs des images bout-à-bout et le décalage variable de déroulement de chaque images dans l'ensemble -->
                    <section class="ce_noobSlide_section first block" style="width:524px; height:236px;background-image:url('tl_files/img-wx/selection 20 diapos/Visuel Don du sang Caisse Epargne.jpg');"> … </section>


<section id="noob_images" class="ce_noobSlide block" style="width:524px; height:236px; "><--! les valeurs entrées dans "NOOBSLIDE - SETUP" -->
<div class="ce_noobSlide_container" style="width: 10480px; height: 236px; left: -8384px;"><--! les valeurs des images bout-à-bout et le décalage variable de déroulement de chaque images dans l'ensemble -->

les css concernés :

Code : Tout sélectionner

#cont_noob{
width:100%;
height:auto;
min-width:300px;
max-width:1400px;
}


#noob_images ----------id perso que j'ai rentré dans ma div "NOOBSLIDE - SETUP" et du coup il y une taille a entrer en px et qui va devenir les dimension du masque conteneur du noob et c'est là que je me demande
si il y a une possibilité de pouvoir entre un pourcentage ou une autre valeur relative plutôt que des pixels ???

Code : Tout sélectionner

#noob_images{
width850px… ou autre de toute façon c'est la valeur entrée dans "NOOBSLIDE - SETUP" qui fait foi
margin: 0 auto
padding:0;
}


.ce_noobSlide_container .ce_noobSlide_section --------------- j'ai trouvé ceci à la page https://developer.mozilla.org/fr/docs/C ... round-size grâce à Audrey
et effectivement mes images en bg des .ce_noobSlide_section s'adaptent - bon j'ai bien lu et vu la poss de background-size: cover et background-size:contain mais pour manipuler le truc je suis plus à l'aise avec les%

Code : Tout sélectionner

.ce_noobSlide_container .ce_noobSlide_section{
/*-moz-background-size: 100% 100%;           Gecko 1.9.2 (Firefox 3.6) */
/*-o-background-size: 100% 100%;           Opera 9.5 */
/*-webkit-background-size: 100% 100%;            Safari 3.0 */
 
background-size: 100% 100%;
}


Résultats des courses si je change la taille de ma div #noob_images via "NOOBSLIDE - SETUP" mes images peuvent s'adapter en bg mais si je réduit ma fenêtre, le "masque" de cette fameuse div #noob_images ne change pas de taille… et c'est en fait ce que je voudrais !!

J'ai bien peur que la solution soit dans le php
les jolis scripts et fallback qui vont bien
du module noobSlide et là je serai coincer (j'avoue avec humilité que ça me dépasse)
Suis condamné ? Qui pourra me sauver ?

Avatar de l’utilisateur
luaqMac
Membre
Messages : 11
Inscription : 08 Nov 2010 13:01
Localisation : Romans-sur-Isère, Drôme - France

Re: redimensionner images de noobSlide en CSS

Messagepar luaqMac » 11 Déc 2013 12:53

Salut FIX'

Oui oui j'utilise une extension : [pk_noobSlide] NoobSlide j'aurais dû le préciser du départ mais je pensais que c'était déductible du titre de mon sujet.
Le but d'utiliser ce genre d'extension était de laisser la main au client sur son Slide d'images… Peut-être devrais-je garder cela pour moi et passer sur un slide plus "manuel" comme le lien que tu m'as donné… en 2/
Ce serait plus simple…

Pour le 3/ bon… je démarre en responsiv et oui les tailles en % sont piégeux mais les modèles en grille me paraissent pour ce que j'en ai vu un peu "straight"
pour les blocs sur des grands écrans type 27" (sur lequel je test) j'ai commencer à prévoir une autre feuille sup avec les classes pour des passages en colonnes mais cela devient assez fastidieux.

Pour le "vrai responsive" avec des tailles fixes en fonction des écrans, là je suis perturbé.
Lorsque je regarde sur le net les résolutions des smartphones, tablettes et écrans de stations existants , la possibilité de basculer et de passer ainsi dans l'autre sens de taille écran (phones et tab) et sans parler des écrans des terminaux des générations à venir qui seront potentiellement différents… Je m'étais dit que de miser sur une structure basée sur un % n'était pas si idiot que ça et que le responsive design c'est quand même de s'adapter de manière fluide à toute taille d'écran. Encore une fois je démarre (un peu en retard, certes) j'ai mon mag hors série19 de "web-design "assez bien foutu et le net comme source je et j'applique à CONTAO ce qui me parait intéressant ou plutôt adapter à ce que je fais (tout est intéressant :wink: ).

Alors attention, Je ne veux pas scuder en disant cela mais c'est pour préciser pourquoi j'avance dans ce sens… qui sais dans quelques semaines avec une bonne pratique je revientdrais plus dans ton sens…

pour le 4/ le code est celui du module [pk_noobSlide] NoobSlide il m'avait semblé assez pratique dans l'emploi mais je ne les ai pas tous essayés…

et pour le 5/ merci, je m'évertu pourtant autant faire se peut à ne jamais mettre d'espace (après vérif je n'en ai pas mis), les MAJ j'ignorais que cela posait problème et les caractères accentués,& et autres) sont banis depuis déjà plusieurs années d'ailleurs l'apostrophe dans le nom d'une image uploadée par un client m'avait causée bien des tourments il y a 2 ans… Mais merci du rappel.

Oups et merci du lien http://bxslider.com/examples/image-slideshow-captions

FiX'
Membre
Messages : 399
Inscription : 02 Jan 2009 01:04

Re: redimensionner images de noobSlide en CSS

Messagepar FiX' » 11 Déc 2013 15:10

Re,

luaqMac a écrit :je m'évertu pourtant autant faire se peut à ne jamais mettre d'espace (après vérif je n'en ai pas mis)

Code : Tout sélectionner

<section class="ce_noobSlide_section first block" style="width:750px; height:250px;background-image:url('tl_files/img-wx/selection 20 diapos/Visuel Don du sang Caisse Epargne.jpg');">

Ce code est issu de ta page web, http://www.marchandcom.fr/presentation- ... nsivd.html, ligne n°100. On constate que l'URL contient des espaces + majuscules. Il faut faire attention avec le nom des fichiers pour plusieurs raisons :

- Quand les fichiers sont écrits de la même façon (en respectant une nomenclature de nommage) ils sont plus facile à repérer
- Certains (vieux) navigateurs n'arriveront pas à charger un fichier contenant des espaces... même si c'est de plus en plus rare...

Pour revenir au responsive design, je n'ai pas dit que la solution des éléments fluides en % était stupide (il existe des grid, type grid 960 system fluides en %), mais par habitude et à force de créer des sites... mon avis est qu'il est - selon moi - plus simple de passer par une grid avec des valeurs fixes plutôt que par une grid avec des valeurs fluides. Il est vrai qu'il y a de plus en plus de tailles d'écrans différentes, mais l'avantage avec les grid s'est que le responsive s'applique assez rapidement... il suffit de modifier quelques valeurs (+ éventuellement la position de certains éléments) pour que ça soit bien adapté.

luaqMac a écrit :pour le 4/ le code est celui du module [pk_noobSlide] NoobSlide il m'avait semblé assez pratique dans l'emploi mais je ne les ai pas tous essayés…

Le code utilise les images via un background... perso je préfère via la balise img, directement.

Une solution serait d'adapter le lien que je t'ai donné en plugin pour Contao afin de faciliter son utilisation ultérieure et/ou pour ton client.

A+

Avatar de l’utilisateur
luaqMac
Membre
Messages : 11
Inscription : 08 Nov 2010 13:01
Localisation : Romans-sur-Isère, Drôme - France

Re: redimensionner images de noobSlide en CSS

Messagepar luaqMac » 11 Déc 2013 15:56

re FIX'

luaqMac a écrit:
je m'évertu pourtant autant faire se peut à ne jamais mettre d'espace (après vérif je n'en ai pas mis)

CODE: TOUT SÉLECTIONNER
<section class="ce_noobSlide_section first block" style="width:750px; height:250px;background-image:url('tl_files/img-wx/selection 20 diapos/Visuel Don du sang Caisse Epargne.jpg');">


Ok, all apologies, j'ai le nez dans mon caca… Je suis allé un peu vite avec mes images et aussi dans mon post précédent :oops:

Pour revenir à ce fameux Slide, j'en viens à penser que le mieux pour moi, est d'en construire un sur le modèle du lien que tu m'a donné et de le garder en prestation
- autant je me sens de le faire en module perso avec le js en head de mon modèle de présentation de page… autant je ne me sens pas de faire un plugin contao -> je ne suis pas développeur.

Pour notre échange sur le responsivD et les valeurs fixes ou en %. Je prends bien note de tes conseils et ton expérience et forcé de constater que se soit en % ou en fixe, il y a des ré-ajustements à faire quand on bascule entre des tailles d'écrans incontournables. Ici j'ai bien dû faire une feuille moins de 480px, une feuille moins de 850px, une feuille plus de 850px et une feuille plus de 1400px dans lesquelles je viens replacer des éléments en margin, padding, width, height et même changer des bg de div "structure" comme je l'ai fait pour ma colonne LEFT de page…
Alors oui je découvre…

Je retourne à mon Slide.
A +

Avatar de l’utilisateur
luaqMac
Membre
Messages : 11
Inscription : 08 Nov 2010 13:01
Localisation : Romans-sur-Isère, Drôme - France

Re: redimensionner images de noobSlide en CSS

Messagepar luaqMac » 11 Déc 2013 18:20

Mes amis, j'ai envie de dire hip hip hourra !

Bon, même si mon but premier était de faire mon slide via ce fameux
[pk_noobSlide] NoobSlide
et que…
j'ai fais autre chose au final :?

Malgré tout j'ai obtenu ce que je voulais et je commence par cela à manipuler des fonctions jQueries tout doucement
(ce qui me va assez bien, je verrais par la suite si j'ai envie d'aller plus loin dans le dur ou… pas)

Du coup j'ai bien fait un slide "à la mano" en utilisant dans le head de mon modèle de page :

Code : Tout sélectionner

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

un appel de "responsiveslides.min.js" en interne dans un dossier js à la racine de mon site (voir lien plus loin où le télécharger).
Une div avec l'utilisation d'une liste pour mes images, une feuille de style qui utilise effectivement la balise img pour redimensionner les images, un dernier script d'activation avant la fermeture de body j'ai aussi la possibilités de rajouter des paramètres speed, timeout… etc

Code : Tout sélectionner

<script>$(function(){
$(".rslides").responsiveSlides({
auto:true,
speed:1000,
timeout:4000
});
});
</script>


Pour ceux qui connaissent ou qui veulent faire comme moi c'est très simple et hyper accessible :
https://github.com/viljamis/ResponsiveSlides.js
Le fonctionnement est vraiment le même que sur http://bxslider.com/examples/image-slideshow-captions
mais j'ai tout simplement mieux compris les étapes et le "kit" de scripts est plus "light"…

Merci à Audrey de son intervention et surtout FIX' de m'avoir orienté dans cette direction.
A plus


Revenir vers « Modèles et CSS »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 10 invités