28173 sujets

CSS et mise en forme, CSS3

[résolu]Une prise de tête d'une journée , pb de proportion...

Bonjour,

Je souhaites créer un bandeau qui soit tout aussi propostionnel en 1024 qu'en 800px.
le bandeau est constitué de 3 images : image 1 , 2 et 3 , l'image 2 doit être centrée et les 2 autres images doivent s'accoler de part et d'autre a l'image 2.
je veux : que l'image 2 s'adapte a la résolution de l'écran et que les 2 autres images s'ajustent, en sachant que l'image 2 doit toujours être au centre.
là je n'y arrive pas.
h**p://www.credit-et-credits.com/essaiimages.html
Si vous pouvez au moins me mettre dans la bonne direction.

Merci.

Nadinem.
Modifié par Nadinem (13 Nov 2006 - 22:08)
Bonjour,

l'inverse serait plus simple, ton rond rouge en fixe et les 2 bordures en proportionnel ...
Pour un résultat me semble t'il plus logique
Modifié par ghost (11 Nov 2006 - 20:03)
Bonsoir, ghost,
merci d'avoir répondu à mon message..

J'ai simplement illustrée , en fait c'est une image , il ne faut pas se focaliser sur le rond ou l'ésthetique de l'image , en réalité ce serra une photo.
Ce que j'ai mis en ligne c'est plus dans le but d'apprendre.
cela dit je n'ai toujours pas trouvée la réponse à mon problème Smiley sweatdrop .

Merci de bien vouloir m'apporter une petite info.

Nadinem.
Re:

C'est ce type d'effet que tu cherches?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
		
		<title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style type="text/css">
*{padding:0;margin:0;} 

#conteneur_general{
width: 100%;
height: 178px;
position: relative;
background: url(image3.jpg); 
}	

#conteneur_gauche{
width: 50%;
height: 178px;
background: url(image1.jpg);  
}
#image_centre{
position: absolute;
top: 0;
left: 50%;
margin-left: -212px;

}
		</style></head>

	<body>
	
<div id="conteneur_general">
	<div id="conteneur_gauche">
	</div>
		<img src="image2.jpg" id="image_centre" alt="" />
</div>	

	</body></html>
Bonjour,

Merci pour t'es réponses , mais le visuel est identique a ce que j'ai pu avoir :
quand on visualise le résultat sur un écrant 1020*768px l'ensemble parrait petit, mais sur un écran 800*600 l'ensemble parrait plus grand, ex:
la hauteur du bandeau sur un 1024 est d'environ 7cm , mais sur un 800*600 la hauteur est de 12cm , n' y aurait il pas une méthode pour faire en sortes que le visuel reste identique proportionnellement ?

Ghost: est ce correct d'avoir un div vide ? En tout cas merci de prendre la peine de réflechir à ce problème avec moi.

Nadinem.
Bonjour,

Pour avoir l'effet que tu escomptes en css pur, je ne pense pas que cela soit réalisable, il faudrais je pense passer par un JS pour déterminer la résolution d'écran et parametrer dynamiquement la taille de ton image en fonction.
Mais bon, ce n'est pas parole d'Evangile.
Bonsoir ghost,

Un grand merci de me rassurer sur le fait que je ne peux pas faire ce que je souhaite avec les css, avant de poster ma question , j'avais fais au moins une 30 de tests, a me rendre follllllllllle Smiley fache .
merci de t'être penché sur ma question.

Faire la soution en javascript , je n'ai aucune idée du code à chercher et en plus je sais vraiment pas faire.

Merci.

Nadine.
Bonjour,

Juste pour le fun (Puis je n'avais pas trop envie de bosser ce soir je crois), je ne sais si tu pourras l'exploiter. Ca correspond à ton problème, l'image sera toujours proportionnelle à la definition de l'écran (j'espère) en la fixant par rapport à une résolution type.
C'est un peu lourd mais bon !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<style>

</style>
<head>
<title></title>
</head>
<body>
<?php
if (isset($_GET['largeur']) AND isset($_GET['hauteur'])) {
  // Affichage des variables
  $largeur_ecran = $_GET['largeur'];
  $hauteur_ecran = $_GET['hauteur'];
  $largeur_image_initiale = 500; //100% pour 1024px
  $hauteur_image_initiale = 200; //100% pour 768px
  echo 'largeur de l\'écran : '.$largeur_ecran.'<br/> Hauteur de l\'écran : '.$hauteur_ecran.'<br/>' ;
  $largeur_image_affiche = 500*$largeur_ecran /1024;
  $hauteur_image_affiche = 200*$hauteur_ecran/768; 
  echo 'largeur de l\'image affichée : '.$largeur_image_affiche.'px<br/> Hauteur de l\'image affichée : '.$hauteur_image_affiche.'px<br/>' ;
  
?>
		<img src="test_image.jpg" alt="" style="display: block; margin: auto; width:<?php echo $largeur_image_affiche;?>px; height: <?php echo $hauteur_image_affiche;?>px" /> 
<?php 
} else {
  // passage des variables de dimensions du java script au php par $_GET

  echo "<script type=\"text/javascript\">\n";
  echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
            . "&largeur=\" + screen.width + \"&hauteur=\" + screen.height;\n";
  echo "</script>\n";
  exit();
}
?>
<p> Bon c'est plus une figure de style que d'un véritable intêret mais si ça peut servir <br />
On prend comme base une taille d'image à 100% pour une définition choisie, ici 500x200px l'image pour un écran de 1024x768, le reste c'est une régle de 3 et un passage du javascript vers le php qui traite les calculs et l'affichage via un $_GET et un rechargement (JS est langage client et php serveur...) <br />
On doit pouvoir le faire 100% JS mais je ne suis pas suffisamment doué pour ce sport ...
</p>
<p> Ghost </p> 
<p><em> je n'ai pas trop testé, mais cela semble bon (changer de résolution toutes les 5mn ARF!!)</em></p>

</body>
</html>


upload/5854-testimage.jpg

Bon courage.
Sujet clos
Aller à