Salut à tous,
j'ai utilisé http://css.alsacreations.com/modeles/modele15.htm ce modèle[/url] pour mon site, visible ici:
http://microsillon.free.fr/css/pmfa1test.html
Problème: en redimensionnant la taille des caractères, arrive un moment où l'image bascule en-dessous. Est-il possible lorsqu'on redimensionne ces caractères, d'indiquer au navigateur de créer un scroll horizontal en conservant les blocs gauche et droite de part et d'autre de l'image, sans que celle-ci bouge?
Le HTML:
La CSS:
Merci!
j'ai utilisé http://css.alsacreations.com/modeles/modele15.htm ce modèle[/url] pour mon site, visible ici:
http://microsillon.free.fr/css/pmfa1test.html
Problème: en redimensionnant la taille des caractères, arrive un moment où l'image bascule en-dessous. Est-il possible lorsqu'on redimensionne ces caractères, d'indiquer au navigateur de créer un scroll horizontal en conservant les blocs gauche et droite de part et d'autre de l'image, sans que celle-ci bouge?
Le HTML:
<body>
<div class="corps">
<div id="titre">
Les pendules en faience
</div>
<div id="gauche">
<ul>
<li><a href="index.html" class="lien1">Accueil</a> </li>
<li><a href="collection.html" class="lien1">Ma collection</a> </li>
<li><a href="origine.html" class="lien1">Les origines de Jaz</a> </li>
<li><a href="photos.html" class="lien1">Galerie de photos</a></li>
<li> <a href="technique.html" class="lien1">Le côté technique</a> </li>
<li> <a href="publicite.html" class="lien1">La publicité</a> </li>
<li><a href="tirages.html" class="lien1">Les "tirages limités"</a> </li>
<li><a href="divers.html" class="lien1">Divers objets Jaz</a> </li>
<li><a href="recherche.html" class="lien1">Mes recherches</a> </li>
<li><a href="contact.html" class="lien1">Ecrivez-moi!</a> </li>
<li> <a href="liens.html" class="lien1">Liens</a> </li>
</ul>
</div>
<div id="droite">
<p class="titre2"> Bertic </p>
<span style="text-decoration:underline;"> Année de fabrication:</span> 1950
<br />
<span style="text-decoration:underline;"> Années de production:</span> de 19??
à 1952.<br />
<span style="text-decoration:underline;"> Référence:</span> 641-10
<span style="text-decoration:underline;"> Calibre:</span> 5 G.
Diamètre: 31 cm. <br />
Faience ivoire; décor, chiffres et aiguilles bruns. <br />
Non lumineux. <br />
<span style="text-decoration:underline;"> Rareté:</span> assez rare. <br />
</div>
<div id="centre">
<img src="image/pendules/faience/rhonic2.jpg" width="350" height="340" alt="Le Rhonic" />
</div>
</div>
<div class="pied">
Test pied
</div>
</body>La CSS:
/* CSS Document */
*{margin: 0;padding: 0;}
body {background-color: black;
}
#titre {
width: 300px;
font-size: 120%;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 1.5em;
border: solid 1px white;
}
.titre, .corps, .pied {background: transparent;
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%;
color: #ffffcc;
}
#centre {
background-color:transparent;
}
.corps {
width: 750px;
height: 100%;
text-align: center;
border: solid 1px red;
margin:0 auto;
clear: left;
}
#droite, #gauche {
padding: 1em;
font-size: 100%;
border: solid 1px white;
background: transparent;
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%;
color: #ffffcc;
}
#droite {float: right;
width: 10em;
}
.pied {
width: 50%;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 0.5em;
clear: both;
border: solid 1px white;
}
#gauche {
float: left;
width: 9em;
}
#gauche ul, #gauche li{
list-style-type: none;
}
#gauche li a{
color: #fc6;
text-decoration: none;
}
#gauche li a:visited{
color: #999;
}
#gauche li a:hover{
color: #f60;
}
#gauche li a:active{
color: #fc6;
}
.titre2{font-family :"Trebuchet MS", Verdana, Arial, Helvetica, Courier, sans-serif;
font-size: 100%;
font-variant: small-caps;
color: #ffffcc;
}
Merci!