BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto]Chouette, c'est responsive !
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Sujet fermé[Tuto]Chouette, c'est responsive !

 Répondre Répondre Page  <1 34567 35>
Auteur
Message inverser le tri
penspart allez vers le bas
Newbie
Newbie


Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
Lien Direct à ce Post Envoyé : 29 Avr 2016 à 19:48
je me réponds: en fait à priori un gars sur le net  dis qu'il faut mettre la vidéo simplement en largeur  auto:
 
height: auto;
sauf que je ne peux rien rajouter ou modifier dans le code source!

voici un copier/coller de ce qu'il indique de faire :

Si vous utilisez l’élément video issu de HTML5, vous allez être heureux puisque rendre responsive un tel élément est très facile. En effet, si vous souhaitez redimensionner un élément video sans altérer son ratio, la façon de faire est la même que pour une image : on redimensionne la largeur comme on le souhaite avec width, min-width ou max-width (le plus souvent on utilise ce dernier avec une valeur de 100%) et on indique une hauteur automatique afin que le ratio soit adapté automatiquement.

video { max-width: 100%; height: auto;




Edité par penspart - 29 Avr 2016 à 19:50
http://www.laurentphotos85.fr
Haut de la page
penspart allez vers le bas
Newbie
Newbie


Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
Lien Direct à ce Post Envoyé : 29 Avr 2016 à 18:12
Re :)

Comment faire si je veux mettre une video Html5 pour
 qu'elle soit responsive?

Merci
http://www.laurentphotos85.fr
Haut de la page
penspart allez vers le bas
Newbie
Newbie


Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
Lien Direct à ce Post Envoyé : 28 Avr 2016 à 12:13
ah ok....merci Geek
http://www.laurentphotos85.fr
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Lien Direct à ce Post Envoyé : 28 Avr 2016 à 12:10
Message posté par Larsene Larsene a écrit:

Oui, c'est à cause du fonctionnement par défaut de OE : un élément bouton lien est doté d'une bordure, il suffit de la retirer.

Selectionner le bouton, dans le ruban : Zone de Style --> Bordure. Dans la première option, sélectionnez "Invisible"


Le ruban, c'est le menu haut, pas le panneau de droite....
Haut de la page
penspart allez vers le bas
Newbie
Newbie


Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
Lien Direct à ce Post Envoyé : 28 Avr 2016 à 11:42
ça marche pas :( j'ai sélectionné le bouton, après dans la colonne de droite dans  la rubrique "bordures " et sous menu " style", j'ai sélectionné invisible mais toujours pareil!


Edité par penspart - 28 Avr 2016 à 11:50
http://www.laurentphotos85.fr
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Lien Direct à ce Post Envoyé : 28 Avr 2016 à 08:33
Oui, c'est à cause du fonctionnement par défaut de OE : un élément bouton lien est doté d'une bordure, il suffit de la retirer.

Selectionner le bouton, dans le ruban : Zone de Style --> Bordure. Dans la première option, sélectionnez "Invisible"
Haut de la page
penspart allez vers le bas
Newbie
Newbie


Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
Lien Direct à ce Post Envoyé : 27 Avr 2016 à 22:19
Bonsoir,

Tout d'abord merci à toi Larsene pour ton tuto !

Cependant j'ai un petit soucis, j'ai suivi pas à pas ton tuto, cependant (rien de bien méchant) lorsque je mets mes boutons liens dans le menu ils apparaissent encadrés! Confused






http://www.laurentphotos85.fr
Haut de la page
naiikoko allez vers le bas
Newbie
Newbie


Depuis le: 17 Avr 2016
Status: Inactif
Points: 13
Lien Direct à ce Post Envoyé : 20 Avr 2016 à 23:19
Excellent, merci, tout fonctionne au poil !
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Lien Direct à ce Post Envoyé : 19 Avr 2016 à 08:33
Message posté par naiikoko naiikoko a écrit:

Depuis ma modif, je n'ai pas de problème d'affichage sur chrome sur mobile Samsung, problème que j'avais avant la modif de bornes. La gestion médiocre des bornes n'est donc pas uniquement limitée à IE... (qui d'ailleurs posait problème aussi soit dit en passant). Je n'ai pas essayé sur d'autres mobiles à résolution 640. Il est possible que cela soit mieux géré.


Très bizarre, ce sont les recommandations en la matière que j'applique ... LOL

Message posté par naiikoko naiikoko a écrit:

J'ai simplement supprimé et refait, et cela a fonctionné. Bizarre, lorsque j'affecté un autre comportement que height (font-shadow) qui réagissait à la commande, mais pas font-height. Bizarre... Néanmoins résolu.


Bon, une erreur dans votre code sans doute ! cela ne pose pas de pb. Essayez également la taille Viewport, cela donne de bons résultats également.

Message posté par naiikoko naiikoko a écrit:

Le height:auto !important; n'a pas d'effet positif sur le problème. Je n'ai pas trouvé de propriété permettant de conserver un aspect ratio. Dans l'immédiat, je n'ai pas d'autre solution que de figer un alignement du background image me permettant de conserver un focus sur l'élément le plus important de l'image, au risque d'en perdre une partie.
N'y a-t-il pas de solution dynamique de dimensionnement H en fonction de W ? Cela me dit quelque chose, mais mon dernier code datant de 2006, c'est loin tout ca ... et je n'arrive plus à mettre la main sur mon chm css de l'époque...


Si, cela fonctionne sur une image, bien sûr pas sur un panneau d'élément.

Pour ces derniers, les options de rapport hauteurs largeurs sont dans l'onglet propriétés :




Haut de la page
naiikoko allez vers le bas
Newbie
Newbie


Depuis le: 17 Avr 2016
Status: Inactif
Points: 13
Lien Direct à ce Post Envoyé : 18 Avr 2016 à 23:06
Salut et merci pour vos réponses précieuses.

Je voudrais revenir sur le sujet ci-dessous

Message posté par Larsene Larsene a écrit:

Message posté par naiikoko naiikoko a écrit:

Bonjour et super boulot.

J'ai un commentaire sur le comportement, afin d'éviter les problèmes sur les affichages exactement aux limites définies (ex: 640px). Le max de petit écran doit être strictement inférieur au min du moyen, etc.


Non, les navigateurs interprètent de façon stricte les bornes (sauf peut être IE, mais avec ce dernier ... :-/) ainsi la borne max-width l'emporte toujours sur la min-width. Par ailleurs, si vous souhaitez modifier, il serait plus judicieux d'augmenter d'un px la borne inférieure que de réduire celle supérieure.... Autre pratique, ne pas définir de borne minimale (les queries se recouvrant les unes les autres).

Depuis ma modif, je n'ai pas de problème d'affichage sur chrome sur mobile Samsung, problème que j'avais avant la modif de bornes. La gestion médiocre des bornes n'est donc pas uniquement limitée à IE... (qui d'ailleurs posait problème aussi soit dit en passant). Je n'ai pas essayé sur d'autres mobiles à résolution 640. Il est possible que cela soit mieux géré. Dans le doute, je pense conserver ces bornes. Je testerai à l'occasion sur d'autres mobiles, y cis BB10 (quand on a gouté aux blackberrys, on a du mal y s'en décrocher... ;) ... 10 ans de bons et loyaux services...)

Message posté par Larsene Larsene a écrit:


Message posté par naiikoko naiikoko a écrit:

- sur la div de titrepage, la police ne change pas de taille, et reste bloquée sur la taille définie par défaut. J'ai essayé d'affecter un ID à cette div, sans succès.


il faut lui affecter une classe personnalisée (titrepage). Le code donné fait bien varier la taille selon les queries :
  .titrepage{
  font-size:32px !important;
  }
 
   .titrepage{
  font-size:48px !important;
  }

Une autre façon de faire est d'utiliser les Viewport (unités vw ou vh)

J'ai simplement supprimé et refait, et cela a fonctionné. Bizarre, lorsque j'affecté un autre comportement que height (font-shadow) qui réagissait à la commande, mais pas font-height. Bizarre... Néanmoins résolu.

Message posté par Larsene Larsene a écrit:

Message posté par naiikoko naiikoko a écrit:

- comment s'assurer de conserver l'aspect ratio des éléments? les divs contenant photos en background , section droite appelée dans ce tuto "news" conservent leur hauteur quelque soit la largeur (qui elle change). A l'époque j'utilisais le padding-bottom pour cela (75% pour conserver un ratio 4/3), mais là cela ne le fait pas ...


Oui, cela est souhaité ici, sinon les images seraient parfois trop petites en hauteur pour les mobiles. Il est souhaitable de conserver une taille reservée à l'illustration, quitte à la recadrer un peut. La hauteur des blocs illustratifs varie également suivant les MQ, mais de façon arbitraire.

Sinon, il faut utiliser

height:auto !important;

Le height:auto !important; n'a pas d'effet positif sur le problème. Je n'ai pas trouvé de propriété permettant de conserver un aspect ratio. Dans l'immédiat, je n'ai pas d'autre solution que de figer un alignement du background image me permettant de conserver un focus sur l'élément le plus important de l'image, au risque d'en perdre une partie.
N'y a-t-il pas de solution dynamique de dimensionnement H en fonction de W ? Cela me dit quelque chose, mais mon dernier code datant de 2006, c'est loin tout ca ... et je n'arrive plus à mettre la main sur mon chm css de l'époque...
Haut de la page
 Répondre Répondre Page  <1 34567 35>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.