18041 sujets

Questions générales et questions de débutants

Positionner un élément affiché/masqué

Bonjour à tous,

Je débute dans l'apprentissage du XHTML et du CSS.
Je cherchais à afficher des légendes photo qui apparaissent et disparaissent lorsque la souris survole l'image. J'ai trouvé mon bohneur en consultant le tutoriel "Afficher / Masquer des éléments sans javascript".
Malheureusement, je butte sur le positionnement précis de la légende. En utilisant la méthode décrite dans ce tutoriel, la position varie en fonction de l'affichage et du navigateur. Le décalage entre les résolutions d'écran est supportable mais monstrueux entre IE et Firefox. Je précise que si il n'y a qu'une seule image sur la page, tout va bien. Par contre, si il y en a disons quatre, le décalage s'amplifie.

Il me semble avoir compris une partie du problème en consultant un autre tutoriel : "Comment positionner les éléments en CSS ?" Toutefois, en pratque, je n'arrive toujours pas à mes fins.

Le contenu de ma page se situe dans un cadre à bords arrondis. Ce dernier est constitué de 3 images de fond, à savoir le dessus (un rectangle avec coins sup arrondis), le centre où se trouve tout le contenu de la page et le rectangle à coins arrondis inférieur. Ces 3 images de fond qui constituent le cadre sont dans un tableau 3 lignes, 1 colonne. Le contenu de la page est donc dans la ligne du milieu.

Merci d'avance pour votre aide.
Salut,

Je n'arrive pas a cibler le probleme sans avoir un bout de code sous les yeux. Pourrait-tu nous mettre en ligne ton code histoire de voir un peu ce que sa donne et d'ou sa pourrait provenir.

A++
Voici le type de page avec lequel je travaille actuellement.
Ici, un exemple avec deux photos et donc deux légendes. J'ai laissé la plupart des autres éléments de la page, l'explication se trouvant peut-être à ce niveau?

D'abord un petit récapitulatif :

Il s'agit d'une page noire avec au centre un cadre à bords arrondis qui contient le code.
Le cadre est dans un tableau de 3 lignes.
La première contient juste le dessus du cadre (les bords arrondis)
La seconde contient tout ...le contenu, soit une image (intitulé bandeau),
puis le texte avec les images légendée,
puis un lien vers la suite du sujet (part 1, part 2 etc),
puis un lien vers le plan du site flanqué de part et d'autre d'une image faisant office de "aller à la page précedente/suivante",
et finalement une mention copyright.
Vient enfin la 3è ligne du tableau principal (master_table) qui contient juste le bord inférieur arrondi du cadre.

J'espère que ma façon de présenter le code n'est pas trop confuse.


1. XHTML


<body>
<table class="master_table">
<tr>
<th colspan="3" class="top"></th>
</tr>
<tr>
<td colspan="3" class="middle"><div id="bandeau">
</div>
<p><!-- LE TEXTE ICI -->
</p>
<p>
<a href=""><img src="css/photos/exit_la_guerre_froide/4xsu-17.jpg" class="su" alt="Su-17" /><span>
LEGENDE 1</span></a></p>
<p><!-- LE TEXTE ICI -->
</p>
<p><a class="yak28" href=""><img src="css/photos/exit_la_guerre_froide/yak-28P_crews.jpg" class="yak" alt="Yak-28P" /><span>
LEGENDE 2</span></a></p>
<p><!-- LE TEXTE ICI -->
</p>
<br />
<table>
<tr>
<td class="star_left"><img src="pages_type/red_star.jpg" alt="" /></td>
<td class="part"><a href="1.exit_la_guerre_froide_part1.html">Part 1</a></td>
<td><img src="pages_type/red_star.jpg" alt="" /></td>
<td class="part"><a href="1.exit_la_guerre_froide_part3.html">Part 3</a></td>
</tr>
</table>

<br />
<table>
<tr>
<td class="gauche"><a href="1.exit_la_guerre_froide_part1.html"><img src="pages_type/badge_samolet_gauche.jpg" alt="previous" /></a></td>
<td class="plan"><a href="plan_du_site.html">Plan du site - Sitemap</a></td>
<td class="droit"><a href="1.exit_la_guerre_froide_part3.html"><img src="pages_type/badge_samolet_droit.jpg" alt="next" /></a></td>
</tr>
</table>

<br />
<p class="copyright"><strong>© XXXXXX - 2008</strong></p></td>
</tr>
<tr>
<td colspan="3" class="bottom"></td>
</tr>
</table>

</body>
</html>


2. CSS

body
{
width: 990px;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: black;
font-size: 110%;
font-family: "Times New Roman", Arial, serif;
text-align: justify;
color: white;
}

#bandeau
{
width: 908px;
height: 108px;
background-image: url("photos/exit_la_guerre_froide/bandeau.jpg");
background-repeat: no-repeat;
border:3px solid white;
margin: auto;
margin-bottom: 10px;
}
img
{
border: 0;
}
.top
{
background-image: url("photos/tabletop.gif");
background-repeat: no-repeat;
border-collapse: collapse;
height: 20px;
width: 990px;
}
.middle
{
background-image: url("photos/middle.gif");
border-collapse: collapse;
background-repeat: repeat;
padding-left: 10px;
padding-right: 10px;
width: 990px;
}
.bottom
{
background-image: url("photos/bottomtable.gif");
background-repeat: no-repeat;
border-collapse: collapse;
height: 22px;
width: 990px;
}
.master_table
{
width: 990px;
border-collapse: collapse;
}
.su
{
float: left;
padding-right: 8px;
}
.yak
{
float: left;
padding-right: 8px;
}
a
{
color: yellow;
text-decoration: none;
}
a:hover
{
background: none;
text-decoration: underline;
}
a span
{
display: none;
}
a:hover span
{
display: inline;
position: absolute;
top: 31%;
left: 31%;
width: 38%;
background: black;
color: white;
border: 2px solid yellow;
font-family: Verdana, Arial, "Times New Roman", serif;
text-align: justify;
color: white;
font-size: 76%;
padding: 5px;
text-decoration: none;
}
.yak28:hover span
{
display: inline;
position: absolute;
top: 950px;
left: 61%;
width: 32%;
background: black;
color: white;
border: 2px solid yellow;
font-family: Verdana, Arial, "Times New Roman", serif;
text-align: justify;
color: white;
font-size: 76%;
padding: 5px;
}
.copyright
{
background-image: url("photos/background_copyright.gif");
background-repeat: no-repeat;
width: 166px;
height: 20px;
margin: auto;
font-family: "Trebuchet MS", "Times New Roman", serif;
font-size: 75%;
text-align: center;
color: black;
}
.part
{
font-size: 95%;
font-family: "Times New Roman", Arial, serif;
color: yellow;
padding-left: 5px;
padding-right: 5px;
}
.gauche
{
float: left;
padding-left: 317px;
}
.star_left
{
float: left;
padding-left: 393px;
}
.droit
{
float: right;
}
.plan
{
font-size: 95%;
font-family: Arial, "Times New Roman", serif;
color: yellow;
padding-left: 5px;
padding-right: 5px;
}
rkka a écrit :
J'espère que ma façon de présenter le code n'est pas trop confuse.

Hé bien elle est relativement claire mais elle pourrait être parfaitement claire si tu utilisais les balises [ code] et [ /code] (sans espace après le crochet ouvrant) comme il est d'usage sur ce forum.

Tu peux corriger ton message ci-dessus en utilisant le bouton «éditer». Smiley smile
Bonsoir, je ne réponds pas véritablement à la question spécifique, mais j'ai remarqué au niveau de ce tutorial que le procédé avec l'apparition d'une image ne fonctionnait pas sous la dernière version d'Internet Explorer, sous Windows Vista. Peut-être quelqu'un peut-il confirmer ou infirmer ?

Concernant le problème de rkka, je n'ai pas bien compris quel est le décalage spécifique évoqué: peut-être y a-t-il des paramètres navigateurs à régler selon le navigateur utilisé, ou si il s'agit de la légende avec les images, alors consulter ce tutorial ?
http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions

edit: je crois avoir mieux saisi le problème (pas du tout sûr), peut-être s'agit-il de l'utilisation des "%" à la place des "px" dans le navigateur, qui crée la différence d'apparence.
Modifié par aub (28 Mar 2008 - 20:54)
En tout cas, cela fonctionne avec IE7 sous XP.
Le problème est résolu en partie. En positionnant les légendes avec "margin-top" et "margin-left" plutôt qu'avec "top" et "left", j'obtiens un positionnement identique avec IE et Firefox(!)
Par contre, les légendes se déplacent (surtout latéralement) en changeant de résolution.

J'ai consulté le tutoriel mentionné par aub. En guise de test, j'ai donné une largeur de 100% au body, mais rien n'y fait. J'ai aussi travaillé la taille du cadre de fond à bords arrondis sans succès.
Enfin, la variation du positionnement en fonction de la résolution est la même que l'on utilise des pixels ou des % pour placer la légende.
Sujet clos
Aller à