28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Dans une des pages de mon site, que je suis en train de refondre totalement, j'introduis des photos sous forme de vignette. http://users.tvcablenet.be/personal/tvcn143735/ voir la page histoire. J'aimerais quand le visiteur promène sa souris (le pointeur) sur une de ces vignettes, qu'elle s'affiche en grand format plutot qu'en vignette. (Voir au milieu du texte "Vignette Isabelle" et "Vignette Zacharie"
J'ai bien cherché dans les tutos et les scripts, mais je n'ai trouvé, sauf erreur, que des moyens pour faire changer une image d'aspect et ce(particulièrement pour les image de fonds des boutons). Alors je rame. Quelqu'un peut-il m'aiguiller sur le bon chemin ?
Mon site est basé sur un "template" trouvé par le biais du site ALSA, ainsi que sur des CCS. La refonte est en ligne, voir plus haut.
Voilà mon soucis à l'heure actuelle Smiley sweatdrop . Cela m'aiderait beaucoup à avancer si quelqu'un pouvait donc m'aiguiller, m'expliquer l'astuce, ou m'indiquer un moyen d'y arriver.
Bonne journée à vous et à bientôt.
Ah oui, je me suis payé le livre de Raphaël Goetter, et le mémento CSS2, mais je n'y ai pas trouvé mon bonheur.
NB Voir mon post suivant même sujet, merci
Modifié par JPVDCG (13 Feb 2007 - 22:42)
Administrateur
Bonjour,

si c'est ce genre d'effet dont tu parles, c'est ce genre de tuto Faire une zone réactive (image map) en CSS que tu cherches je pense.
Ce que tu décris (faire changer une image d'aspect au survol particulièrement pour les image de fonds des boutons) est appelé "roll-over" et est réalisable en CSS avec la pseudo-classe :hover d'où les nombreux tutos de "rollover CSS" qui existent sur le Net.
Felipe a écrit :
Bonjour,

si c'est ce genre d'effet dont tu parles, c'est ce genre de tuto Faire une zone réactive (image map) en CSS que tu cherches je pense.
Ce que tu décris (faire changer une image d'aspect au survol particulièrement pour les image de fonds des boutons) est appelé "roll-over" et est réalisable en CSS avec la pseudo-classe :hover d'où les nombreux tutos de "rollover CSS" qui existent sur le Net.

Merci pour ta réponse,
Il me semble sauf erreur de ma part que le lien "Genre d'effet" ne fonctionne pas. Quant au tutoriel cité, je l'ai vu, mais ce n'est pas ce que je cherche en fait, voici l'adresse du site http://users.tvcablenet.be/personal/tvcn143735/où tu peux voir, dans la page "histoire l'emplacement des deux "petites" images Zacharie & Isabelle. Je voudrais donc que lorsque le pointeur de la souris passe dessus (thumb) la même image apparaisse à l'écran en grand format.
(Slide)
J'ai trouvé un Tuto sur Alsa qui fonctionne très bien lorsque je crée une nouvelle page vierge et que je ne mets que le code nécessaire
<link rel="StyleSheet" type="text/css" href="Photos-grandes.css">
que je mets dans head, et
<a href=""><img src="../../SITE-CHATEAU/photos/thumbs/Zacharie.jpg" border="0" width="50" height="68" alt=""><span><img src="../../SITE-CHATEAU/photos/slides/Zacharie.jpg" border="0" width="200" height="273" alt="">texte et images peuvent être placés ici</span></a>

Mais cela ne focntionne plus dans ma page "histoire" dont voici le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Chateau de Thoricourt: Histoire</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

  <!-- **** Layout Stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="style/style106_left-noborder.css" />
  <!-- **** Colour Scheme Stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="style/colour2.css" />	
  <!-- **** roll over photo **** -->
  <link rel="StyleSheet" type="text/css" href="Photos-grandes.css">
</head>

<body> 

  <div id="main">
    <div id="links">
      <!-- **** INSERT LINKS HERE **** -->
      <a href="#">another link</a> | <a href="#">another link</a> | <a href="#">another link</a> | <a href="#">another link</a>
    </div>
    <div id="logo"><h1></h1></div>
    <div id="content">
      <div id="menu">
        <ul>
          <li><a href="index.html">ACCUEIL</a></li>
          <li><a id="selected" href="histoirepage1.html">Histoire</a></li>
          <li><a href="page2.html">PAGE 2</a></li>
          <li><a href="page3.html">PAGE 3</a></li>
          <li><a href="page4.html">PAGE 4</a></li>
		  <li><a href="page5.html">PAGE 5</a></li>
		  <li><a href="page6.html">PAGE 6</a></li>
		  <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </div>
      <div id="column1">
        <div class="sidebaritem">
          <h1><br><img src="../../PHOTOS-Toutes/Pour site/Copie de IMG_0008-recadrée.JPG" border="0" width="180" height="561" alt="Rayons de soleil dans le parc"><!-- news --></h1>
          <!-- **** INSERT NEWS ITEMS HERE **** -->
          <h2><!-- 1st January 2006 --></h2>
          <p><!-- The company announces the launch of it's new website. --></p>
          <h2><!-- 1st January 2006 --></h2>
          <p><!-- The company announces the launch of it's new website. --></p>
          <p><!-- NOTES: This area can be used for news or any other info. --></p>
        </div>
        <div class="sidebaritem">
          <h1><img src="../../PHOTOS-Toutes/Pour site/Copie de IMG_0008-recadrée.JPG" border="0" width="180" height="561" alt="Rayons de soleil dans le parc"><!-- additional links --></h1>
          <!-- **** INSERT ADDITIONAL LINKS HERE **** -->
<!--           <a href="#">another link</a>
          <br /><br />
          <a href="#">another link</a>
          <br /><br />
          <a href="#">another link</a>
          <br /><br />
          <a href="#">another link</a>
          <br /><br /> -->
        </div>
        <div class="sidebaritem">
        <!--   <h1>other info</h1> -->
          <!-- **** INSERT OTHER INFORMATION HERE **** -->
          <p>
<!--             This space can be used for additional information such as a contact phone number, address
            or maybe even a graphic. -->
          </p>
        </div>
      </div>
      <div id="column2">
        <h1>Histoire</h1>
        <!-- **** INSERT PAGE CONTENT HERE **** -->
        <p><h2>Le village champêtre de Thoricourt.</h2>
		
		Il semble que le temps y a arrêté sa course inexorable. Les environs ont pu conserver pratiquement intacte l'atmosphère campagnarde douce et tranquille qu'on leur connaît.<br>
Elle met en valeur, au détour d'une allée bordée de platanes, un des nombreux châteaux  du Hainaut, le Château de Thoricourt.<br><br>

<h2>Le château de Thoricourt</h2> ....est un témoin merveilleux de l'architecture hennuyère du XVIIIème siècle et l'exemple d'un château sans "histoires".<br> Construit sur une élévation de terrain, il domine la campagne et les bois qui l'entourent.<br>
Demeure du souvenir et de la nostalgie, il apparaît aujourd'hui comme l'image vivante d'une époque révolue.<br><br>
<h2>Il fut construit en 1768.</h2><br> 
Avant sa date de construction qui remonte à 1768, comme l'attestent les ancres dans le mur côté sud, la Seigneurie de Thoricourt dépendait, semble-t-il, de La Baronnie de Silly.<br>
Le "Domaine de Thoricourt" appartint, durant trois siècles, à la famille "de Brunquet". Il passa par alliance aux "du Fossey" et ensuite par héritage aux "La Marlière". Ces derniers en furent les seigneurs pendant près de 100 ans.<br><br> 
<h2>Charles-François de La Marlière</h2><br>
Le château actuel fut construit en 1768 par  Charles-François de La Marlière, époux de Marie Thérèse de Pascal, sur l'emplacement ou à proximité d'un ancien manoir, alors que le château d'Attre, dans la même région, existait déjà depuis près de 16 ans.<br><br>
         <span class="left"><img src="../SITE-CHATEAU/Isabelle.jpg" border="0" width="75" height="111" alt="Isabelle de la Marlière">
</span>
          <span class="right"><img src="../SITE-CHATEAU/zacharie.jpg" border="0" width="75" height="111" alt="Isabelle de la Marlière">
</span>
Leur fille Isabelle Françoise de la Marlière,dame de Thoricourt, apporta par son mariage avec Zacharie-Vincent Obert de Quévy en 1764, la seigneurie dans la famille Obert.<br>

<br>Étienne, Vicomte Obert de Quévy, né de cette union épousa en 1811 Joséphine Marin de Thieusies.<br><br>
Son beau-père, le Vicomte Obert de Thieusies exigea de lui qu'il prenne l'engagement, pour pouvoir épouser sa fille, de substituer  à son nom de Quévy, celui de Thieusies.<br><br>
C'est ainsi que le château de Thoricourt est connu son le nom de:<br><br>
<div style="text-align: center"><h2>Château Obert De Thieusies</h2></div><br>
Ce n'est qu'en 1988, après être restés dans la même famille ou dans sa descendance pendant plus de deux siècles, que le Château ainsi que le domaine l'entourant furent transmis par la famille Obert de Thieusies à la SA Domaine de Thoricourt.<br><br>  
Le siège social de celle-ci est situé à l'adresse du Château, c'est à dire :<br>
<div style="text-align: center">17 Rue de Silly à 7830 Thoricourt</div><br>
Le "domaine actuel" (Château et parc) a conservé une superficie de 15 hectares<br><br>
Une grande grille en fer forgé barre l'entrée de la grande cour qui est bordée de chaque côté de dépendances, la maison du cocher et les écuries à gauche, la forge et les carrosseries à droite.<br>
Cette cour est séparée de la cour d'honneur qui suit par deux petits murets à arcades. (mettre liens vers photos)<br>
On ne trouve pas ici les immenses pelouses bordées de fleurs qui attirent les foules. Il n'y a pas dans le château d'appartement d'apparat. <br>

Thoricourt a été tout simplement l'accueillante demeure d'une ancienne famille pendant plus de deux siècles.<br> <br>

L'orangerie date de 1830, ainsi que les 4 (?) étangs<br>
Les combles furent revus, réaménagés, et agrémentés de lucarnes de plomb fin du siècle dernier.<br>
La terrasse côté sud a été ajoutée au XX siècle.<br>
Jardin français a été créé par  l'architecte Duchêne de Paris<br><br>
OBERT DE THIEUSIES (Etienne-Eugène-Joseph-Joachim, vicomte)1824-1849<br><br>
<h2>Site classé</h2>La façade et les toitures du château de Thoricourt, des dépendances et de l'orangerie, l'intérieur et l'extérieur de la chapelle, le pilori (Monument), ainsi que l'ensemble formé par le château et le parc qui l'entoure (Site) ont été classés le 07/07/1976.
<p></p>       
<!--         <p>

        </p> -->
      </div>
    </div>
    <div id="footer">
      © 2007 JP Van Damme | <a href="#">jp.van-damme@tvcablenet.be</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.dcarter.co.uk">adapté d'un design de dcarter</a>
    </div>
  </div>
</body>
</html>

Le code à mettre dans le body de cette page devrait l'être au niveau de
         <span class="left"><img src="../SITE-CHATEAU/Isabelle.jpg" border="0" width="75" height="111" alt="Isabelle de la Marlière">
</span>

Voilà, je nage. Il y a probablement incompatibilité entre les deux, mais où ? Smiley bawling
J'ai déjà passé quelques heures sur ce problème Smiley sweatdrop et je pense que j'en deviens Smiley biggol .
NB : Certaines balises ont été désactivées pour le moment, avant d'être effacées lors de la finition de la page. Le design est adapté d'un design trouvé sur le net.

Bonne lecture Smiley cligne
Jean-Pierre