Détecter la largeur d'un div pour l'attribuer à un autre div
Résolu/Fermé
typiac
Messages postés
92
Date d'inscription
lundi 9 mai 2011
Statut
Membre
Dernière intervention
14 janvier 2015
-
26 juin 2013 à 09:23
typiac Messages postés 92 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 14 janvier 2015 - 26 juin 2013 à 16:00
typiac Messages postés 92 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 14 janvier 2015 - 26 juin 2013 à 16:00
A voir également:
- Détecter la largeur d'un div pour l'attribuer à un autre div
- Div c++ - Télécharger - Langages
- Une image subliminale a été incrustée dans la vidéo à télécharger. quelle est la largeur de cette image ? - Forum Formats vidéo
- Div scrollable ✓ - Forum HTML
- Longueur largeur hauteur ✓ - Forum Loisirs / Divertissements
- Moyenne.si.ens #div/0 ✓ - Forum Excel
6 réponses
sebooch
Messages postés
563
Date d'inscription
dimanche 25 avril 2010
Statut
Membre
Dernière intervention
4 janvier 2014
22
26 juin 2013 à 10:48
26 juin 2013 à 10:48
Salut !
Faudrait que tu nous fasse un schéma rapide pour nous indiquer les emplacements, tailles, noms, etc... des divs en question. Ca se trouve pas besoin de js mais de css...
Sinon au niveau du js :
Faudrait que tu nous fasse un schéma rapide pour nous indiquer les emplacements, tailles, noms, etc... des divs en question. Ca se trouve pas besoin de js mais de css...
Sinon au niveau du js :
<script type="text/javascript">
var width_header = document.getElementById('header').style.width;
document.getElementById('legende').style.width = width_header + 'px';
</script>
typiac
Messages postés
92
Date d'inscription
lundi 9 mai 2011
Statut
Membre
Dernière intervention
14 janvier 2015
1
26 juin 2013 à 11:35
26 juin 2013 à 11:35
Merci de ton retour! Voilà un schémas plus complet:
L'idée est de modifié la largeur de la div "legende" au chargement de la page en reprenant la largeur de l'image "current_picture"
Donc, si je reprends ton code:
ps: message rédigé de la main droite avec un bébé dans le bras gauche pour cause de femme partie aux soldes!!!
<div class='container' style="margin:auto;right:0;left:0;">
<!-- l'image s'adapte à la taille de l'écran -->
<img id="current_picture" src="" style="max-width:100%" />
<div id="hover" style='width:100%'></div>
<!-- la div a par défaut une largeur de 100% qui est héritée du container -->
<div class=''legende"></div>
</div>
L'idée est de modifié la largeur de la div "legende" au chargement de la page en reprenant la largeur de l'image "current_picture"
Donc, si je reprends ton code:
var width_header = document.getElementById("current_picture").style.width;
document.getElementById("legende").style.width = width_header + 'px';
ps: message rédigé de la main droite avec un bébé dans le bras gauche pour cause de femme partie aux soldes!!!
sebooch
Messages postés
563
Date d'inscription
dimanche 25 avril 2010
Statut
Membre
Dernière intervention
4 janvier 2014
22
26 juin 2013 à 12:06
26 juin 2013 à 12:06
Si l'image a une largeur de 100% et que ta div 'legende' doit être de la même taille que l'image, ta div 'legende' doit faire 100% non ??
Et je ne sais pas si c'est normal, mais il y a deux single quotes à gauche de 'legende'.
Et je ne sais pas si c'est normal, mais il y a deux single quotes à gauche de 'legende'.
typiac
Messages postés
92
Date d'inscription
lundi 9 mai 2011
Statut
Membre
Dernière intervention
14 janvier 2015
1
26 juin 2013 à 12:25
26 juin 2013 à 12:25
Désolé pour le single quote, j'ai fait l'erreur en recopiant le code.
Oui, si l'image fait 100% de large (image horizontale), par défaut la div "legende" fait 100% ce qui est bon.
Par contre, dans le cas d'une image verticale, elle ne prendra pas 100% de la largeur alors que la légende oui, ce que je veux corriger. :)
Oui, si l'image fait 100% de large (image horizontale), par défaut la div "legende" fait 100% ce qui est bon.
Par contre, dans le cas d'une image verticale, elle ne prendra pas 100% de la largeur alors que la légende oui, ce que je veux corriger. :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
typiac
Messages postés
92
Date d'inscription
lundi 9 mai 2011
Statut
Membre
Dernière intervention
14 janvier 2015
1
26 juin 2013 à 16:00
26 juin 2013 à 16:00
Oui, mais si j'avais pu résoudre le problème avec du css, je te garantis que je l'aurai fait!
Néanmoins, j'ai finalement réussi avec le script suivant:
Néanmoins, j'ai finalement réussi avec le script suivant:
var img = document.getElementById("ID_PHOTO");
var obj = document.getElementById("ID_LEGENDE");
obj.style.width = img.width + "px";
obj.style.margin = "auto";
sebooch
Messages postés
563
Date d'inscription
dimanche 25 avril 2010
Statut
Membre
Dernière intervention
4 janvier 2014
22
26 juin 2013 à 13:33
26 juin 2013 à 13:33
Mais si l'image est plus petite que la hauteur et la largeur du navigateur, il va falloir centrer tout le truc ( img et legende ).
En tout cas, il y a moyen de faire ça proprement en css, avec une bonne réflexion sur papier pour définir les couches et une utilisation efficace des "position: relative" et "position: absolute;".
En tout cas, il y a moyen de faire ça proprement en css, avec une bonne réflexion sur papier pour définir les couches et une utilisation efficace des "position: relative" et "position: absolute;".