Adapter l'image en fonction de la taille de la page

Question

simon09

8 Jan 2011 à 16:10

bonjour
je n'arrive pas a adapter l'image en fonction de la taille de la page, quand je réduit la page, les images conservent leur taille et sortent du cadre des div class a et class b. j'aimerai que la taille des image reste proportionnelles a la taille de mes div.
voila le code, merci d'avance pour votre aide

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<div xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       
     
       <title>Accueil randonnées accompagnées en montagne</title>
	   <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" /> 
<META NAME="DESCRIPTION" CONTENT="Accompagnement en montagne, randonnées pour tous dans les Pyrénées et dans le Massif Central.Vacances, sport, loisirs et culture en montagne, à la découverte d'une nature préservée (faune, flore, patrimoine...">
<META NAME="KEYWORDS" CONTENT="accompagnateur , montagne, Ariège, Pyrénées,randonnées, nature, Couserans,loisirs, faune, flore, découverte">
<META NAME="SUBJECT" CONTENT="accompagnateur en montagne dans les Pyrénées">
<META NAME="CATEGORY" CONTENT="montagne">
<META NAME="AUTHOR" CONTENT="Simon Cayre">
<META NAME="REPLY-TO" CONTENT="simoncayre@yahoo.fr">
<META NAME="REVISIT-AFTER" CONTENT="7 DAYS">
<META NAME="LANGUAGE" CONTENT="FR">
<META NAME="COPYRIGHT" CONTENT="libre">
<META NAME="ROBOTS" CONTENT="All">
<META HTTP-EQUIV="REFRESH" CONTENT="Non">

       <script type="text/javascript" src="slimbox/js/jquery.js"></script>
       <script type="text/javascript" src="slimbox/js/slimbox2.js"></script>
       <link rel="stylesheet" href="slimbox/css/slimbox2.css" type="text/css" media="screen" />
       <link rel="stylesheet" media="screen" type="text/css" title="vertical" href="menu2.css" />
       <link rel="SHORTCUT ICON" href="logo.ico">
       <link rel="SHORTCUT ICON" href="favicon.ico">      
	   <link rel="stylesheet" type="text/css" href="caroussel1.css" />
	<script type="text/javascript" src="slimbox/js/jquery.js"></script>
	<script type="text/javascript" src="jMyCarousel.js"></script>
	<!-- Optional -->
	<script type="text/javascript">
		$(function() {
		    $(".jMyCarousel").jMyCarousel({
		        visible: '100%',

		    });
		});
	</script>
       <script type="text/javascript" src="slimbox/js/slimbox2.js"></script>

<SCRIPT>
document.write("<FONT face='tahoma, Arial, Helvetica, sans-serif' style='font-size : 11px;'>");
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds
function writeclock() {
i_clock++
if (document.all || document.getElementById || document.layers) {
clockid[i_clock]="clock"+i_clock
document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
}
}
function clockon() {
thistime= new Date()
hours=thistime.getHours()
minutes=thistime.getMinutes()
seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds
if (document.all) {
for (i=0;i<=clockid.length-1;i++) {
var thisclock=eval(clockid[i])
thisclock.innerHTML=thistime
}
}
if (document.getElementById) {
for (i=0;i<=clockid.length-1;i++) {
document.getElementById(clockid[i]).innerHTML=thistime
}
}
var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
</SCRIPT>
<script language="JavaScript" src="picker.js"></script>





   </head>
   <body>
<?php include("menu.php"); ?>





<div id="corps">


<h1></h1><br /><br />
  

   <div class= "a"> 
   <p><img class "imgindex" src="indeximg/grange.jpg" alt="grange" /> <br></p>
   <h1>Bienvenue,</h1><p>Laissez vous tenter par les richesses des Pyrénées, partez à découverte des grands espaces <br />
   A la recherche du bien-être, curieux de nature ou sportifs confirmés, je vous propose des randonnées sur mesure familiales ou plus soutenues, des randonnées thématiques et des formations. Formule journée, demi journée ou bivouac</large><br/><br/><br/><br/><br/>
  </p>
 

   
   
   
  
   </div>

   <div class= "b">
        <table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr><td align="center"><p><img src="calendar1.jpg" alt="img" title="Cap de Bouirex"></p></td></tr><tr>
<td align="center">
<SCRIPT language=JavaScript>
<!--
monthnames = new Array(
"JANVIER",
"FEVRIER",
"MARS",
"AVRIL",
"MAI",
"JUIN",
"JUILLET",
"AOÛT",
"SEPTEMBRE",
"OCTOBRE",
"NOVEMBRE",
"DECEMBRE");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thisday--
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0) 
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<FONT face='trebuchet ms, tahoma'>");
document.write('<table cellspacing="0" border=0 ' );
document.write("style='font-size : 11px; color : #000000;' cellpadding=0 cellspacing=0>");

document.write('<tr><td colspan=7><center><font size=2><b>' 
+ monthnames[thismonth] + " " + thisyear 
+ "</b></font></center></td></tr>");
document.write("<tr>");
document.write('<td align=right valign="bottom"><font size=1>L </font></td>');
document.write('<td align=right valign="bottom"><font size=1>M </font></td>');
document.write('<td align=right valign="bottom"><font size=1>M </font></td>');
document.write('<td align=right valign="bottom"><font size=1>J </font></td>');
document.write('<td align=right valign="bottom"><font size=1>V </font></td>');
document.write('<td align=right><font size=2><b>S </b></font></td>');
document.write('<td align=right><font size=2><b>D </b></font></td>');
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write('<td align="right">-</td>');
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
if (count==thisdate) {
document.write('<td align="right" bgcolor="#FFFFCC">');
}
else {
document.write('<td align="right">');
}
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write('<font color=#ff0000><b>');
}
if (count <= monthdays[thismonth]) {
document.write(" "+count+" ");
}
else {
document.write(" - ");
}
if (count==thisdate) {
document.write("</B></FONT>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</FONT>");
-->
</SCRIPT>
        </td>
    </tr>
    <tr>
        <td align="center">
<div align="center" style="width:70px; border-width:1px; border-style:dotted ; background-color: #FFFFFF; ">
<FONT face='trebuchet ms, tahoma' size=2><b><SCRIPT>writeclock()</SCRIPT></b></font></div>
        </td>
    </tr>
</table>



   </div>
   
   <div class ="c">

   </div>


<div class="jMyCarousel" style="clear: both;">
    <ul>
        <li><a href="caroussel/1.jpg" rel="lightbox-cats" title="vue sur le massif des 3 seigneurs" ><img src="caroussel/1.jpg" width="200" height="150"></a></li>
 	    <li><a href="caroussel/2.jpg" rel="lightbox-cats" title="lis martagon"><img src="caroussel/2.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/3.jpg" rel="lightbox-cats" title="Le Trein"><img src="caroussel/3.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/4.jpg" rel="lightbox-cats" title=""><img src="caroussel/4.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/5.jpg" rel="lightbox-cats" title=""><img src="caroussel/5.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/6.jpg" rel="lightbox-cats" title=""><img src="caroussel/6.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/7.jpg" rel="lightbox-cats" title=""><img src="caroussel/7.jpg" width="200" height="150"></a></li>
		<li><a href="caroussel/8.jpg" rel="lightbox-cats" title=""><img src="caroussel/8.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/9.jpg" rel="lightbox-cats" title=""><img src="caroussel/9.jpg" width="200" height="150"></a></li>
		<li><a href="caroussel/10.jpg" rel="lightbox-cats" title=""><img src="caroussel/10.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/11.jpg" rel="lightbox-cats" title=""><img src="caroussel/11.jpg" width="200" height="150"></a></li>
		<li><a href="caroussel/12.jpg" rel="lightbox-cats" title=""><img src="caroussel/12.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/13.jpg" rel="lightbox-cats" title=""><img src="caroussel/13.jpg" width="200" height="150"></a></li>
		<li><a href="caroussel/14.jpg" rel="lightbox-cats" title=""><img src="caroussel/14.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/15.jpg" rel="lightbox-cats" title=""><img src="caroussel/15.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/16.jpg" rel="lightbox-cats" title=""><img src="caroussel/16.jpg" width="200" height="150"></a></li>
		<li><a href="caroussel/17.jpg" rel="lightbox-cats" title=""><img src="caroussel/17.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/18.jpg" rel="lightbox-cats" title=""><img src="caroussel/18.jpg" width="200" height="150"></a></li>
		<li><a href="caroussel/19.jpg" rel="lightbox-cats" title=""><img src="caroussel/19.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/20.jpg" rel="lightbox-cats" title=""><img src="caroussel/20.jpg" width="200" height="150"></a></li>
		<li><a href="caroussel/21.jpg" rel="lightbox-cats" title=""><img src="caroussel/21.jpg" width="200" height="150"></a></li>
        <li><a href="caroussel/22.jpg" rel="lightbox-cats" title=""><img src="caroussel/22.jpg" width="200" height="150"></a></li>
				
  </ul>
 
 

</div><center><p>Déplacez votre souris sur la dernière image pour actionner le défilement... Et cliquez sur les photos pour les agrandir! </p> 
<br /><br /><?php

 session_start(); // DEMARRE LA SESSION
// SAUVGARDE LA VARIABLE hits DANS LE FICHIER DE SESSION
$_SESSION['hits'] = $hits;


// TRAITEMENT SUR LE FICHIER TEXTE
if(empty($hits)){
  $fp=fopen("compteur.txt","a+"); //OUVRE LE FICHIER compteur.txt
  $num=fgets($fp,4096); // RECUPERE LE CONTENUE DU COMPTEUR
  fclose($fp); // FERME LE FICHIER
  $hits=$num - -1;  // TRAITEMENT
  $fp=fopen("compteur.txt","w");  // OUVRE DE NOUVEAU LE FICHIER
  fputs($fp,$hits); // MET LA NOUVELLE VALEUR
  fclose($fp);  // FERME LE FICHIER
}
// AFICHAGE DU COMPTEUR
echo "<TABLE align=center>";
echo "<TR>";
echo "<TD STYLE='border:1pt Solid navy;' >";
echo "<FONT FACE='Verdana, Arial, Helvetica, sans-serif' SIZE=1>";
echo "Visiteurs : $hits"; // VARIABLE DU COMPTEUR
echo "</FONT>";
echo "</TD>";
echo "</TR>";
echo "</TABLE>";

// IMPORTANT //
// N'OUBLIEZ PAS DE CREER LE FICHIER compteur.txt à la racine
// SI VOTRE LE NOMBRE DE VISITE N'APPARAIT PLUS SUR VOS PAGES
// ALORS VOUS AVEZ DU OUBLIEZ DE DEMARRER LA SESSION
// AJOUTER DONC EN HAUT DE LA PAGE : session_start();

?>
</center>
</div>
<center>  
  <a href="index.php"><img src="hautdepage.jpg" alt="haut de page" title="haut de page" /></a>
</center>

</div>



   </body>
</html>

body 
{   
    margin : 0;
    padding : 0;
    width: 100%;
    background-color:#004954;

}

a {
color: #778899;
}
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:active {text-decoration:none}

a:hover {
color:#483D8B;
text-decoration:underline;
}

#banniere
{
    height: 196px;
    width: 100%; 
}

div #banniere img
{
    height: 196px;
    width: 100%;
    
  }

div #banniere h1
{
    position: absolute;
    top:30px;
    padding-left: 30px;
    font-size:x-large;
    font-style:italic;
    color:#976155;
}

div #banniere p
{
    position: absolute;
    top: 60px;
    padding-left: 100px;
    font-size:x-large;
    font-style:italic;
    color:#976155;
}

p
{text-indent: 30px;
 font-size:large;

}

h1
{color :#002F2F;}

.intro
{color:#046380;
font-style:italic;bold;
font-size: x-large;
font-weight: bold;}



#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 11px; /* hauteur du texte : 12 pixels */
        position: center;

        
        
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #28839C; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 143px; /* largeur */
}

#menu li /* Elements des listes */      
{ 
        float: left;
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
 #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 130px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}



/* IE ne reconnaissant pas le sélecteur ">" ... je me répète  [cligne] */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}




.centre
{
background-color: black;
}






#corps
{  
   width: 90%;
   margin:auto;
   padding: 2%;
   margin:4%;
   border: solid 2px black;
   
   background-color: #5FB6C7;
}
div #corps p
{
    font: bold 16px Arial;
    padding-left: 12px;      
    color:#394F8A;
}



.img
{

width: 100%;
height: 250px;
border-bottom: solid black 4px;
background-position:top;

}

.a
{

   margin:auto;
margin-bottom: 50px;
float:left;
border: solid black 2px;
width:60%;
background-image:indeximg/grange.jpg;
}


.b
{
margin-bottom: 50px;
padding:12px;
float:right;
border: solid black 2px;
width:33%;
}


.cadre1
{
border: 5px solid black;
height: 500px;
width:49%;
float:left;
margin-top:1%;

background-color: #ADD8E6;
}
.cadre2
{
border: 5px solid black;
height: 500px;
width:49%;
float:right;
margin-top:1%;
background-color: #ADD8E6;
}



/*.cadre3
{
border: 6px solid blue;
height: 500px;
width:31%;
float:right;
margin-top:1%;
background-color: #ADD8E6;
}*/

input,textarea 
{
background-color: #9966FF;
color: black;
font-weight:bold;
border:1px solid black;
}




.div1
{
border: 2px solid black;
height: 400px;
width:31%;
float:left;
margin-top:1%;
background-color: #ADD8E6;
text-align: center;
padding:2px;
}
.div2
{
border: 2px solid black;
height: 400px;
width:31%;
float:left;
margin-left:2.5%;
margin-top:1%;
background-color: #ADD8E6;
text-align: center;
padding:2px;
}
.div3
{
border: 2px solid black;
height: 400px;
width:31%;
float:right;
margin-top:1%;
background-color: #ADD8E6;
text-align: center;
padding:2px;
}

[/i][/i]

SBoudrias

8 Jan 2011 à 23:28

Suffit de leur donner une taille variable via CSS. À savoir un taille en %.

Autrement, tu peux aussi jouer avec le overflow afin de gérer le débordement du contenu.

simon09

9 Jan 2011 à 10:27

J'ai essayé ca mais ca ne marche pas, aidez moi svp

[code=html]<div class="div1">
<h3>La montagne de Garrassoula et ses cabanes de pierres sèches</h3>
<p><a href="familiales/garrassoula.php"><img class="vignette" src="pyrenees/montdaulus/garrassoula/entree.jpg" alt="img" title="Cliquez sur l'image pour acceder à une fiche détaillée" /></a><br/>
Le courtal de la montagne de Garrassoula.Petit hameau de cabanes pastorales en pierres sèches avec pour tout habitants quelques isards et coqs de bruyère</p>
</div>

.vignette
{
height: 40%;
width:70%;


}

SBoudrias

9 Jan 2011 à 18:39

J'ai copié-collé ton code et ici ça marche. Essaie sans ta page complète, tu dois avoir une erreur qui fait bugger le reste.

N'oublie pas non plus la spécificité des CSS. Si tu as une taille définie (pour le parent ou pour l'image) dans une série de sélecteur CSS plus spécifique, cette règle sera appliqué prioritairement sur la tienne même si elle se trouve après.

De mémoire:
balise = 1 point
class = 10 points
id = 100 points

Alors les sélecteur suivant par exemple:


#monid .maclass a{
  /* vaut 111 points */
}

#id2 a{
  /* vaut 101 points */
}

Et donc, la première règle sera appliqué malgré la deuxième sur les éléments où ces deux sélecteurs pourraient s'appliquer.
Modifié par Vaxilart (09 Jan 2011 - 18:39)

simon09

9 Jan 2011 à 22:20

bonjour
Pour tout te dire, j'ai pas tout compris a ton histoire de points, je crois que j'ai pas les connaissances requises en css.... je bricole beaucoup Smiley confus

j'ai finalement trouvé cette solution je règle directement les proportions de l'image dans le fichier html et ça marche Smiley biggrin

Est ce une solution acceptable ou bien est ce un code tout pourri????

<img src="pyrenees/hautsalat/mirabat1/1.jpg" height=35% width=55% alt="château de Mirabat" title="château de Mirabat" /><br />

SBoudrias

10 Jan 2011 à 08:17

En tout cas, ce n'est plus un code valide avec ton doctype. Et pour reprendre tes mots, c'est plutôt tout pourri. Smiley langue

La même chose marche très bien en CSS. Essaie le sans le reste de ta page, le code que tu as posté précédemment marche sans problème. Maintenant, tu dois seulement trouver pourquoi la règle CSS que tu as déclarée ne s'applique pas lorsque tu es dans le contexte de ta page complète.

Un petit coup d'oeil avec Firebug et tu verras pourquoi.

simon09

10 Jan 2011 à 10:43

j'ai trouvé j'avais pas défini la div ou se trouve l'image dans le css donc ça marchait pas .... logique.
A c'est dur d'etre débutant et de passer des plombe sur un truc tout con
merci à tous....

Sujet clos

CSS et mise en forme, CSS3

Adapter l'image en fonction de la taille de la page