Ordre des images...

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ordre des images...

Message par lyvie le Dim 10 Juil 2011 - 17:31

Bonjour ! Voilà, donc sur la page d'accueille de mon forum, j'aimerais que les images suivantes ( visibles en cliquant sur le lien de mon forum qui suit: www.madiltan.forumgratuit.org ) ne soient pas les unes en dessous des autres, mais les une à côté des autres... Or, avec une amie un a beau se casser la tête à essayer de faire ça... rien n'y fait nous n'y arrivons pas ^^ !

Voilà le code:

Code:
<body>
<br><center><table width="700" border="0">
  <tr>
    <td colspan="2" valign="top"><fieldset style="border: 2px solid #2A3E4D; -moz-border-radius: 3px; width: 400px; height:200px;"><legend><span style="font-family: georgia; color: #FFFFFF; text-transform: uppercase; font-size: 15px; text-shadow: 1px 1px 1px black;"> Madiltan Kyoki </span></legend><div style="height: 200px; overflow: auto; font-family: Georgia; font-size: 12px; text-align: justify;">
 <span class="texte">Bienvenue à Madiltan, ville du pays de Kyoki. Ici, tout est permis... Du moins, depuis le moment où le maire de Madiltan a fait un coup d'état. Le président garda sa place, rassurez vous...<br><br><br>Cependant... Des sortes de clans ont été formés. Lequel rejoindrez-vous ? Défendrez-vous votre opinion ou allez-vous vous créer un personnage pour ne pas vous attirer d'ennuis ? <br><br><br><i>La suite, sera écrite de vos plumes... Le destin du pays de Kyoki est entre vos mains...</i></span></fieldset></td>
 
    <td colspan="2" valign="top"><fieldset style="border: 2px solid #2A3E4D; -moz-border-radius: 3px; width: 250px; height:200px;"><legend><span style="font-family: georgia; color: #FFFFFF; text-transform: uppercase; font-size: 15px; text-shadow: 1px 1px 1px black;">Staff </span></legend>
<!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="fr" >
 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
* {
  font-size: 11px;
  font-family:Georgia;
}
a.info {
  position: relative;
  color: black;
  text-decoration: none;
}
a.info span {
  display: none;
}
a.info:hover {
  background: none;
  z-index: 500;
 
  cursor: help;
}
a.info:hover span {
  display: inline;
  position: absolute;
 
  white-space: nowrap;
 
  top: 30px;
  left: 20px;
 
  background: white;
 
  color: black;
  padding: 3px;
 
  border: 2px solid white;
  border-left: 2px solid white;
}
</style>
</head>
 
<body>
<p><a href="#" class="info"><img src="http://img11.hostingpics.net/pics/358896icomads.jpg" alt="Mads"/><span><img src="http://img11.hostingpics.net/pics/340540gicomads.jpg" alt="Administratrice"/></span></a> </p>

</body>
 
</html>
<!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="fr" >
 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
* {
  font-size: 11px;
  font-family:Georgia;
}
a.info {
  position: relative;
  color: black;
  text-decoration: none;
}
a.info span {
  display: none;
}
a.info:hover {
  background: none;
  z-index: 500;
 
  cursor: help;
}
a.info:hover span {
  display: inline;
  position: absolute;
 
  white-space: nowrap;
 
  top: 30px;
  left: 20px;
 
  background: white;
 
  color: green;
  padding: 3px;
 
  border: 1px solid green;
  border-left: 4px solid green;
}
</style>
</head>
 
<body>
<p><a href="#" class="info"><img src="http://img11.hostingpics.net/pics/695373icoila.jpg" alt="Ila"/><span><img src="http://img11.hostingpics.net/pics/653638gicoila.jpg" alt="Administratrice"/></span></a>
</p>
</body>
 
</html>

<!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="fr" >
 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
* {
  font-size: 11px;
  font-family:Georgia;
}
a.info {
  position: relative;
  color: black;
  text-decoration: none;
}
a.info span {
  display: none;
}
a.info:hover {
  background: none;
  z-index: 500;
 
  cursor: help;
}
a.info:hover span {
  display: inline;
  position: right;
 
  white-space: nowrap;
 
  top: 30px;
  left: 20px;
 
  background: white;
 
  color: black;
  padding: 3px;
 
  border: 2px solid white;
  border-left: 2px solid white;
}
</style>
</head>
 <body>
<p><a href="#" class="info"><img src="http://img11.hostingpics.net/pics/726725Copiedeicoila.jpg" alt="Nat"/><span><img src="http://img11.hostingpics.net/pics/713171Copiedegicomads.jpg" alt="Administrateur"/></span></a></p>
</body>

 
</html>
<legend> <div align="right"></tr> </table> </center>

<br><center><table><tr><td colspan="2" valign="top"><fieldset style="border: 2px solid #2A3E4D; -moz-border-radius: 3px; width: 250px; height:200px;"><legend><span style="font-family: georgia; color: #FFFFFF; text-transform: uppercase; font-size: 15px; text-shadow: 1px 1px 1px black;">Liens Utiles</span></legend>
 Voila quoi u__u"
          <legend>
        <div align="center">
   
    </fieldset></td>

<td colspan="2" valign="top"><fieldset style="border: 2px solid #2A3E4D; -moz-border-radius: 3px; width: 400px; height:200px;"><legend><span style="font-family: georgia; color: #FFFFFF; text-transform: uppercase; font-size: 15px; text-shadow: 1px 1px 1px black;">Wanted !</span></legend>
 Predefs
          <legend>
        <div align="center">
   
    </fieldset></td>
  </tr>
</table></center><br>
</body>

Si quelqu'un d'entre vous trouve l'erreur je prend ^^ !
Sachant qu'à la place de la troisième images qui est le point d'interrogation il y aura celle-ci:
Et le point d'interrogation de l'image survolée:


Merci d'avance Wink !

Cordialement, !


Dernière édition par lyvie le Dim 10 Juil 2011 - 17:49, édité 1 fois

lyvie
****

Féminin
Messages : 326
Inscrit(e) le : 11/04/2009

http://tenyaku-unmei.forumgratuit.org/
lyvie a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ordre des images...

Message par Ea le Dim 10 Juil 2011 - 17:40

Bonjour,


Voilà en retirant les <p> autour des images en faisant apparaître une autre au survol et en retirant tout les <head> <body> <html> qui ne doivent pas y etre ( ce sont des balises qui ne doivent etre qu'une fois par page, dans le morceau de code elles y étaient au moins 4 fois ) :

Code:
<style type="text/css">
* {
  font-size: 11px;
  font-family:Georgia;
}
a.info {
  position: relative;
  color: black;
  text-decoration: none;
}
a.info span {
  display: none;
}
a.info:hover {
  background: none;
  z-index: 500;
 
  cursor: help;
}
a.info:hover span {
  display: inline;
  position: absolute;
 
  white-space: nowrap;
 
  top: 30px;
  left: 20px;
 
  background: white;
 
  color: black;
  padding: 3px;
 
  border: 2px solid white;
  border-left: 2px solid white;
}
</style>
<br><center><table width="700" border="0">
  <tr>
    <td colspan="2" valign="top"><fieldset style="border: 2px solid #2A3E4D; -moz-border-radius: 3px; width: 400px; height:200px;"><legend><span style="font-family: georgia; color: #FFFFFF; text-transform: uppercase; font-size: 15px; text-shadow: 1px 1px 1px black;"> Madiltan Kyoki </span></legend><div style="height: 200px; overflow: auto; font-family: Georgia; font-size: 12px; text-align: justify;">
 <span class="texte">Bienvenue à Madiltan, ville du pays de Kyoki. Ici, tout est permis... Du moins, depuis le moment où le maire de Madiltan a fait un coup d'état. Le président garda sa place, rassurez vous...<br><br><br>Cependant... Des sortes de clans ont été formés. Lequel rejoindrez-vous ? Défendrez-vous votre opinion ou allez-vous vous créer un personnage pour ne pas vous attirer d'ennuis ? <br><br><br><i>La suite, sera écrite de vos plumes... Le destin du pays de Kyoki est entre vos mains...</i></span></fieldset></td>
 
    <td colspan="2" valign="top"><fieldset style="border: 2px solid #2A3E4D; -moz-border-radius: 3px; width: 250px; height:200px;"><legend><span style="font-family: georgia; color: #FFFFFF; text-transform: uppercase; font-size: 15px; text-shadow: 1px 1px 1px black;">Staff </span></legend>
  <a href="#" class="info"><img src="http://img11.hostingpics.net/pics/358896icomads.jpg" alt="Mads"/><span><img src="http://img11.hostingpics.net/pics/340540gicomads.jpg" alt="Administratrice"/></span></a> <a href="#" class="info"><img src="http://img11.hostingpics.net/pics/695373icoila.jpg" alt="Ila"/><span><img src="http://img11.hostingpics.net/pics/653638gicoila.jpg" alt="Administratrice"/></span></a>
 <a href="#" class="info"><img src="http://img11.hostingpics.net/pics/726725Copiedeicoila.jpg" alt="Nat"/><span><img src="http://img11.hostingpics.net/pics/713171Copiedegicomads.jpg" alt="Administrateur"/></span></a></td></tr> </table> </center>

<br><center><table><tr><td colspan="2" valign="top"><fieldset style="border: 2px solid #2A3E4D; -moz-border-radius: 3px; width: 250px; height:200px;"><legend><span style="font-family: georgia; color: #FFFFFF; text-transform: uppercase; font-size: 15px; text-shadow: 1px 1px 1px black;">Liens Utiles</span></legend>
 Voila quoi u__u"
          <legend>
        <div align="center">
   
    </fieldset></td>

<td colspan="2" valign="top"><fieldset style="border: 2px solid #2A3E4D; -moz-border-radius: 3px; width: 400px; height:200px;"><legend><span style="font-family: georgia; color: #FFFFFF; text-transform: uppercase; font-size: 15px; text-shadow: 1px 1px 1px black;">Wanted !</span></legend>
 Predefs
          <legend>
        <div align="center">
   
    </fieldset></td>
  </tr>
</table></center><br>
Cordialement.

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ordre des images...

Message par lyvie le Dim 10 Juil 2011 - 17:49

Je vous remercie infiniment Wink !

Bonne fin de journée !

lyvie
****

Féminin
Messages : 326
Inscrit(e) le : 11/04/2009

http://tenyaku-unmei.forumgratuit.org/
lyvie a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum