Problème de largeur totale

Hello,

Suite à ce topic : http://forum.alsacreations.com/topic-4-21569-1-Probleme-etrange-de-largeur-totale.html
... je me permets de venir poster ici.

Mon problème est le suivant : lorsque la largeur de la photo centrale est supérieure à celle du browser (ici le panorama fait 1431px de large, en 1024x768 ce sera forcément le cas), les divers éléments qui composent le site (les barres supérieures et inférieures) ne s'étendent pas convenablement. Comme vous pouvez le voir dans le topic du forum css, nous avons essayé plusieurs solutions mais rien ne semble fonctionner. Le problème majeur est que je ne dispose pas de la largeur de l'image chargée (cette donnée doit être accessible quelque part, mais j'avoue que je ne m'y connais pas assez en php pour la retrouver. Il s'agit d'un blog "pixelpost", que j'avais choisi pour sa relative simplicité...)

Quelqu'un connaitrait-il un moyen de faire fonctionner tout ça ?

Merci beaucoup !
Modifié par parappa (08 Mar 2009 - 20:23)

Je comprend pas trop ce que tu cherches mais si c'est un moyen de récupérer la dimension des images que tu cherches, tu as la fonction php getimagesize() un petit exemple vaut mieux que de longue phrases compliquées:

$infos_img = getimagesize("monfichier.jpg");
$width=$infos_img[0];
$height=$infos_img[1];

En espérant t'avoir aidé

Juste une question, vous avez essayé de mettre un div conteneur pour toute la page ou vous avez supposé que cela ne marchait pas non plus ?

Edit : Non rien j'ai essayé et çà marche pas non plus.
Modifié par CNeo (13 Jan 2007 - 21:45)

Vous voulez savoir la meilleure ?

Il n'y a que IE 6 qui agrandie le body.
Modifié par CNeo (13 Jan 2007 - 21:51)

Bonjour, jolies photos...
Je ne sais pas si c'est ce que tu cherche, mais comme tu es dans un salon js je te donne une solution en js:

pageWidth = 0;pageHeight = 0;
function getWindow() {
  pageWidth =  window.innerWidth;
  pageWidth = (pageWidth)? pageWidth :document.documentElement.clientWidth;
  pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;
}

function resizePage() {
  var Imgs = document.getElementsByTagName('img'), I = 0, iCount = Imgs.length;
  for (I; I<iCount; I++) {
    if (Imgs[I].offsetWidth > pageWidth){
    document.getElementById('content').style.width = Imgs[I].offsetWidth;
    }
  }
}
window.onload = resizePage; 

Il faut pour que ça marche que tu rajoute un div avec un id="content" qui englobe toute ta page.
Modifié par matmat (14 Jan 2007 - 06:11)

Je pense que ce sujet est résolu maintenant que tu as plusieurs solutions c'est à toi de choisir.

Merci à matmat pour la solution proposée. Je pense, au vu de la mise en page réalisée (cf. le sujet cité), qu'il est possible de simplifier la fonction.

Disons que l'on donne un identifiant précis à l'image elle-même (il n'y aura normalement qu'une seule grande image par page) :

<img id="grande-image" src="..." alt="..." />

Quelqu'un pour faire cette modification ?

pageWidth = 0;pageHeight = 0;
function getWindow() {
  pageWidth =  window.innerWidth;
  pageWidth = (pageWidth)? pageWidth :document.documentElement.clientWidth;
  pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;
}

function resizePage() {
  var Img = document.getElementsById('image');
    if (Img.offsetWidth > pageWidth){
     document.getElementById('content').style.width = Img.offsetWidth;
    }
  }
}
window.onload = resizePage; 

Tu veux dire comme çà ?

Par contre avec cette solution il ne faut pas oublier de mettre un div conteneur ...
Modifié par CNeo (14 Jan 2007 - 11:02)

Ou:

function resizePage() {
  pageWidth =  window.innerWidth;
  pageWidth = (pageWidth)? pageWidth : document.documentElement.clientWidth;
  pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;
  Img = document.getElementById('image');
  document.getElementById('content').style.width = (Img.offsetWidth > pageWidth)?Img.offsetWidth:"100%";
}
window.onload = resizePage; 

Bon là au moins tu as le choix...
Modifié par matmat (14 Jan 2007 - 18:41)

matmat a écrit :
Bonjour, jolies photos...
Je ne sais pas si c'est ce que tu cherche, mais comme tu es dans un salon js je te donne une solution en js:

pageWidth = 0;pageHeight = 0;
function getWindow() {
  pageWidth =  window.innerWidth;
  pageWidth = (pageWidth)? pageWidth :document.documentElement.clientWidth;
  pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;
}

function resizePage() {
  var Imgs = document.getElementsByTagName('img'), I = 0, iCount = Imgs.length;
  for (I; I<iCount; I++) {
    if (Imgs[I].offsetWidth > pageWidth){
    document.getElementById('content').style.width = Imgs[I].offsetWidth;
    }
  }
}
window.onload = resizePage; 

Il faut pour que ça marche que tu rajoute un div avec un id="content" qui englobe toute ta page.

CNeo a écrit :

pageWidth = 0;pageHeight = 0;
function getWindow() {
  pageWidth =  window.innerWidth;
  pageWidth = (pageWidth)? pageWidth :document.documentElement.clientWidth;
  pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;
}

function resizePage() {
  var Img = document.getElementsById('image');
    if (Img.offsetWidth > pageWidth){
     document.getElementById('content').style.width = Img.offsetWidth;
    }
  }
}
window.onload = resizePage; 

Tu veux dire comme çà ?

Par contre avec cette solution il ne faut pas oublier de mettre un div conteneur ...

matmat a écrit :
Ou:

function resizePage() {
  pageWidth =  window.innerWidth;
  pageWidth = (pageWidth)? pageWidth : document.documentElement.clientWidth;
  pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;
  Img = document.getElementById('image');
  document.getElementById('content').style.width = (Img.offsetWidth > pageWidth)?Img.offsetWidth:"100%";
}
window.onload = resizePage; 

Bon là au moins tu as le choix...

Alors merci beaucoup tout le monde, je ne m'attendais pas à tant de solutions !
(Et merci matmat pour les photos !)
Malheureusement je dois mal m'y prendre, mais aucune ne fonctionne. Quand vous parlez d'ajouter un conteneur, il s'agit bien de ceci :

<body>
<div id="content">

<!--code de la page -->

</div>
</body>

...?
C'est ce que j'ai fait, mais rien ne change.
Modifié par parappa (15 Jan 2007 - 20:02)

Je ne pense pas que les deux premières méthodes fonctionne car je ne vois pas quand est-ce que getWindow() est appelée. Cependant il faudrait demander à matmat car il y a peut-être une subtilité que je ne vois pas.

Pour la troisième méthode je n'ai jamais compris le truc avec les points d'interrogation ( d'ailleurs faudrait que je cherche ) donc je ne peux pas t'aider non plus.
Modifié par CNeo (15 Jan 2007 - 20:25)

Je me suis finalement débrouillé avec une <table> : j'aurais aimé m'en passer, mais c'est finalement la solution la plus simple (même si pas forcément la plus élégante.) Merci en tout cas.

Oups pardon, je suis vraimen désolé de t'avoir fait galérer pour rien , effectivement Cneo il faut également appeler la fonction getWindow
Comme ça (pour les premiéres):

window.onload = function(){
getWindow();
resizePage();
}

à la place de:

window.onload = resizePage;

Sinon la troisiéme marche je confirme aprés test, peut-être que ça ne marche pas parceque ton image n'a pas de id="image".
Désolé encore une fois à ma décharge j'appelais la fonction à un autre endroit donc j'ai pas vu quand j'ai testé...
Modifié par matmat (16 Jan 2007 - 00:04)

Ah mais ce n'est pas grave, c'est déjà très sympa d'avoir essayé de m'aider.