Auteur |
Sujet Recherche Options des sujets
|
penspart
Newbie
Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
|
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
|
|
penspart
Newbie
Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
|
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
|
|
penspart
Newbie
Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
|
Envoyé : 28 Avr 2016 à 12:13 |
ah ok....merci
|
http://www.laurentphotos85.fr
|
|
Larsene
Admin Group
Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
|
Envoyé : 28 Avr 2016 à 12:10 |
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....
|
|
|
penspart
Newbie
Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
|
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
|
|
Larsene
Admin Group
Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
|
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"
|
|
|
penspart
Newbie
Depuis le: 18 Dec 2012
Pays: France
Status: Inactif
Points: 34
|
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!
|
http://www.laurentphotos85.fr
|
|
naiikoko
Newbie
Depuis le: 17 Avr 2016
Status: Inactif
Points: 13
|
Envoyé : 20 Avr 2016 à 23:19 |
Excellent, merci, tout fonctionne au poil !
|
|
Larsene
Admin Group
Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
|
Envoyé : 19 Avr 2016 à 08:33 |
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 ...
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.
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 :
|
|
|
naiikoko
Newbie
Depuis le: 17 Avr 2016
Status: Inactif
Points: 13
|
Envoyé : 18 Avr 2016 à 23:06 |
Salut et merci pour vos réponses précieuses.
Je voudrais revenir sur le sujet ci-dessous
Larsene a écrit:
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...)
Larsene a écrit:
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.
Larsene a écrit:
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...
|
|