[]résolu] Problème simple d'alignement d'images dans des div

Nouveau WRInaute
Bonjour,

Je serai vraiment reconnaissant à celui qui pourra m'aider, car je vais bientôt commencer à me manger les mains.

Je souhaite faire quelque chose vraiment très simple, et pourtant, je n'y arrive pas !

Je voudrais que mon petit texte clignotant (image en haut à droite) "Site animé par la team A.A." soit aligné avec la banniere (verticalement). Rien n'y fait, l'image se met plus bas.

Le problème est présent sur toutes les pages du site :
http://www.airsofteur.com/
Voici l'url du css : http://www.airsofteur.com/css/style.css

Contrainte : il est vrai que je pourrais simplement faire un tabeau, mais j'utilise des div afin de faire correspondre les colonnes des bannières/images avec le reste de la page.

Contrainte 2 : j'aimerais par la suite, placer une troisième image en haut à gauche.

Merci pour toute idée.
 
Nouveau WRInaute
Voici le code de la page (pour les paresseux comme moi)

1. Le fichier php
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>
     Guide de l'Airsoft Belgique Fédération: répliques et conseils pour en softair
   </title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta name="author" content="Christophe NOEL" />
   <meta name="copyright" content="© Christophe NOEL" />
   <meta name="keywords" content=
   "airsoft airsofteur softair air soft billes scénarios répliques reviews association belgique france cyma marui classic army fps aeg gbb gnb spring huile achat holster chargeur metal full tir automatique gaz masque grenade pistolet batteries chrony rencontres évènements" />
   <meta name="date" content="2006-08-24" />
   <meta name="description" content="Guide de l'Airsoft : répliques, reviews, scénarios, conseils d'achats" />
   <meta name="robots" content="index, follow" />
   <link rel="stylesheet" href="css/style.css" type="text/css" />
 </head>
 <body>
   <table border="0" width="100%">
     <tr>
       <td>
         <div id="topleft"></div>
         <div id="topcontent">
           <center>
             <a href="http://www.airsofteur.com/"><img height="80" src="http://www.airsofteur.com/img/banner2.jpg" alt="Guide Airsoft en Belgique et en France" border="0" /></a><br />
             <a href="http://www.airsofteur.com/">Accueil Airsoft</a> | <a href="bestarmes.php">Répliques</a> | <a href="http://airsoft-belgique.airsofteur.com">Airsoft Belgique</a> | <a href=
             "partenaires.php">Partenaires</a> | <a href="http://www.airsofteur.com/forum/">Forum</a> | <a href="contact.php">Contact</a>
           </center>
         </div>
         <div id="topright">
           <a href="http://aa.airsofteur.com/"><img alt="Team Airsoft Liège" src="http://www.airsofteur.com/img/byaa.gif" border="0" /></a>
         </div>
       </td>
     </tr>
   </table>
   <div id="left">
     <div class="menu">
       <h3>
         L'Airsoft
       </h3>
       <ul>
         <li>
           <a href="http://www.airsofteur.com/quid.php">Qu'est-ce que l'airsoft ?</a>
         </li>
         <li>
           <a href="http://www.airsofteur.com/debuter.php">Comment débuter ?</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/forum/">Forums</a>
         </li>
       </ul>
     </div>
     <div class="menu">
       <h3>
         Les répliques
       </h3>
       <ul>
         <li>
           <a class="menu" href="http://www.airsofteur.com/repliques.php">Catégories de réplique</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/conseils.php">Conseils d'achat</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/bestrepliques.php">Sélections de répliques</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/shops.php">Meilleures boutiques</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/entretien.php">Entretien et précautions</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/marques.php">Marques réputées</a>
         </li>
       </ul>
     </div>
     <div class="menu">
       <h3>
         Les parties
       </h3>
       <ul>
         <li>
           <a class="menu1" href="http://www.airsofteur.com/objectifs.php">Objectifs de jeu</a>
         </li>
         <li>
           <a class="menu1" href="http://www.airsofteur.com/variantes.php">Variantes de jeu</a>
         </li>
         <li>
           <a class="menu1" href="http://www.airsofteur.com/joueurs.php">Joueurs spéciaux</a>
         </li>
         <li>
           <a class="menu1" href="http://www.airsofteur.com/securite.php">Sécurité</a>
         </li>
         <li>
           <a class="menu1" href="http://www.airsofteur.com/regles.php">Règlement</a>
         </li>
       </ul>
     </div>
     <div class="menu">
       <h3>
         Equipement
       </h3>
       <ul>
         <li>
           <a class="menu" href="http://www.airsofteur.com/equipement.php">Uniforme et équipement</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/billes.php">Billes</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/accessoires.php">Accessoires</a>
         </li>
       </ul>
     </div>
     <div class="menu">
       <h3>
         Communautés
       </h3>
       <ul>
         <li>
           <a href="http://www.airsofteur.com/wiki/">Encyclopédie Wiki</a>
         </li>
         <li>
           <a class="menu" href="http://airsoft-belgique.airsofteur.com">Airsoft Belgique</a>
         </li>
         <li>
           <a class="menu" href="http://www.france-airsoft.fr/">Airsoft France</a>
         </li>
       </ul>
     </div>
   </div>
   <div id="right">
     <div class="rightmenu">
       <h3>
         Shopping
       </h3><a href="http://www.airsofteur.com/forum/viewforum.php?f=9"><b>Bonnes affaires</b> -&gt; Achat répliques Cyma, Jin Gong, Sniper, Well, Dboys avec gearbox metal : à partir de <b>100
       euros</b></a>
     </div>
     <div class="menu">
       <h3>
         Forums
       </h3>
       <ul>
         <li>
           <a class="menu" href="http://www.airsofteur.com/forum/index.php?c=5">Des idées pour vos scénarios</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/forum/index.php?c=2">Vos questions techniques</a>
         </li>
         <li>
           <a class="menu" href="http://www.airsofteur.com/forum/index.php?c=3">Les parties publiques en Belgique</a>
         </li>
       </ul>
     </div>
     <h3>
       Liens commerciaux
     </h3><script type="text/javascript">
//<![CDATA[
<!--
google_ad_client = "pub-3328799335206397";
688345
google_ad_width = 180;
google_ad_height = 150;
google_ad_format = "180x150_as";
google_ad_type = "text_image";
google_color_border = "688345";
google_color_bg = "688345";
google_color_link = "d6f29e";
google_color_text = "d6f29e";
       
google_ad_channel = "";
//-->
//]]>
</script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script> <script type="text/javascript">
//<![CDATA[
_uacct = "UA-288842-7";
urchinTracker();
//]]>
</script>
     <h3>
       Convertisseur FPS
     </h3>
     <form name="conversion_form" action="http://www.airsofteur.com/conversion.php" method="post">
       <p>
         <input type="text" name="montant" size="4" /> <select name="devise">
           <option value="FJ">
             FPS à Joules
           </option>
           <option value="JF">
             Joules à FPS
           </option>
         </select>
       </p>
       <p>
         <input type="submit" name="ok" value="Convertir" />
       </p>
     </form>
     <h3>
       Utile
     </h3>
     <ul>
       <li>
         <a class="menu" href="http://www.airsofteur.com/wiki/">Notre projet WikiMedia</a>
       </li>
       <li>
         <a class="menu" href="http://www.airsofteur.com/puissance.php">Puissances des répliques</a>
       </li>
       <li>
         <a class="menu" href="http://www.airsofteur.com/bricolage1.php">Bricolage 1</a>
       </li>
       <li>
         <a class="menu" href="http://www.gaia-airsoft.org/gungrenades.htm">Bricolage: grenades</a>
       </li>
       <li>
         <a class="menu" href="http://www.airsofteur.com/wiki/Special:Allpages" target="blank">Dico de l'airsoft</a>
       </li>
     </ul>
   </div>
   <div id="content">
     <div class="editovert">
       <center>
         Bienvenue sur le portail des airsofteurs <b>débutants</b>. Découvrez de manière sobre les règles, les répliques d'armes et des idées de scénarios pour l'airsoft également appelé
         "softair".<br />
         <img height="60" src="img/airsoft1.jpg" alt="" /><img height="60" src="img/airsoft2.jpg" alt="" /><br />
       </center>
     </div><br />
     <div class="editovert">
       <center>
         <h2>
           6 mois d'existence - 150 visiteurs / jour !
         </h2>Fêtons notre nouvel hébergement... plein de bande passante ! Pour l'occasion, nous vous offrons la <b>superbe vidéo</b> à succès qui nous caractérise, nous et notre fameux esprit de
         second degré :<br />
         <object width="425" height="350">
           <param name="movie" value="https://www.youtube.com/v/OZrw2i02Q5M" />
           <param name="wmode" value="transparent" />
           <embed src="https://www.youtube.com/v/OZrw2i02Q5M" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350" />
         </object>
       </center><br />
     </div>
     <div class="edito">
       <br />
       L'airsoft est un <b>jeu</b> ou <b>sport</b> de loisirs issu du Japon : des adultes et mineurs jouent avec une âme d'enfants aux cowboys et aux indiens à l'aide de leurs <b>répliques</b>
       d'armes propulsant des <b>billes</b> de plastique <b>biodégrables</b>. La Belgique, la France, le Luxembourg mais aussi la Suisse et le Canada comptent de <b>nombreux joueurs</b> de cette
       nouvelle discipline.<br />
       <center>
         <b>Les airsofteurs ne sont ni adeptes de violence ni des fanatiques de l'armée.</b>
       </center>
     </div>
     <div class="edito">
       <b>WEBMASTERS :</b> pour un meilleur référencement sur internet, échangeons des liens entre nos sites : <a href="contact.php">contactez-moi</a> !<br />
       <br />
     </div>
     <div class="index">
       <h1 class="article">
         Liste des mises à jour
       </h1>
       <div class="edito">
         <b>14-04-07 :</b> Upgrade de l'hébergement. Amélioration du <i>design</i> et corrections du contenu.<br />
         <b>30-03-07 :</b> Les utilisateurs d'<b>Internet Explorer</b> vont enfin pouvoir naviguer plus facilement dans le forum. Les bugs d'affichage liés à IE ont été corrigé grâce à Tiger qui
         nous a informé de ce problème. L'équipe est en train de tester les nouvelles répliques chinoises de DBoys et Jing Gong.<br />
         <b>23-01-07 :</b> Bonne nouvelle pour les cheapers : les rumeurs prétendent la nouvelle marque chinoise Jing Jong comme meilleure que Tokyo Marui... On parle aussi des fameuses M4 de chez
         DBoyz. Bientôt un compte rendu fiable sur cette nouvelle marque qui s'ajoute aux bonnes marques cheaps telles que Cyma, Well, Both Elephant.<br />
         <b>15-01-07 :</b> Bientôt un vrai look pour le site : enfin un design ! Airsofteur.com est classé meilleur nouveau site dans plusieurs annuaires de Belgique et de France !! Bref, que de
         bonnes nouvelles.<br />
         <b>20-12-06 :</b> Création du portail pour débutant. Notre projet est de pouvoir fournir un portail simple permettant aux débutants de rapidemment et facilement s'introduire aux bases de
         l'airsoft en Belgique, France, Suisse et Canada.
       </div>[ <a href="http://www.airsofteur.com/">retour</a>]
     </div>
     <center>
       © Airsofteur.com 2006-2007 _ version 1.2 _ postmaster@airsofteur.com
     </center>
   </div>
 </body>
</html>

2. Le fichier CSS

Code:
br.spacer {
clear: both;
}
body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #35484e; background: #7c9659 }
h1 {margin: 0; color: #51262d; font-variant: small-caps;}
h3 {margin: 0; text-align: center; border-bottom: dashed 1px #51262d; color: #51262d;}
a {color: d6f29e; text-decoration: none;}
a:hover {color: #424339; text-decoration: underline;}


#topleft { float:left; width: 15%; }
#topright {float:right; width: 23%; padding: 5px;}
#topcontent { margin-left: 18%; margin-right: 25%;}

.small {margin-left: 10px; font-size: 50%;}
.menu ul {margin: 0; margin-top: 4px; margin-bottom: 10px; padding: 0; list-style: none;}
.menu a {width: 93%; margin: 1px; padding: 2px;padding-left:5px; display: block; border: solid 1px #35484e; background-color: #d6f29e; color: #35484e;}
.menu a:hover {background-color: #6c8649; color: #ffffff; text-decoration: none;}


.rightmenu ul {margin: 0; margin-top: 8px; margin-bottom: 8px; padding: 0; list-style: none;}
.rightmenu li {margin-top: 5px; marginbottom: 5px;}
.rightmenu a {color: #d6f29e;}
.rightmenu a:hover {color: #324339; text-decoration: underline;}

td {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #35484e; }
img { padding-right:5px ;}

div.edito          { border:solid 1px #9CB4CE; background:#EDFBEC; margin-top:5px; margin-left:5px; margin-right:5px; padding-top:0px; padding-bottom:0px; padding-left:5px; padding-right:5px;  }
div.edito4          { border:solid 1px #9CB4CE; background:#F1FFEF; margin-top:5px; margin-left:5px; margin-right:5px; padding-top:0px; padding-bottom:0px; padding-left:5px; padding-right:5px;  }

div.editovert          { border:solid 1px #7c9659; background:#d6f29e; margin-top:5px; margin-left:5px; margin-right:5px; padding-top:0px; padding-bottom:0px; padding-left:5px; padding-right:5px;  }

.edito a {color: blue; text-decoration: none;}
h1.article           { font-family:Trebuchet MS,arial; font-variant:small-caps; font-size:11pt;
	                   color:#369;
	                   font-weight:bold; 
	                   border-bottom:1px solid #369; }

#header {margin-bottom: 10px; text-align: center;}
#topnav {margin-bottom: 10px; text-align: center;}
#left {float: left; width: 15%; margin-bottom: 25px; padding: 5px; background-color: #688345; border: solid 3px #324339;}
#left h3 {color: #d6f29e; border-bottom: dashed 1px #324339; margin-bottom: 1px; background-image:url(a1.gif);}
#right {float: right; color:#000000; width: 23%; padding: 5px;background-color: #688345; border: solid 3px #324339;}
#right h3 {color: #d6f29e; border-bottom: dashed 1px #324339;margin-bottom: 1px;  background-image:url(a1.gif);}
#content {margin-left: 18%; margin-right: 25%; padding: 5px; padding-left: 8px; padding-right: 8px; background-color: #b5d18f; border: solid 3px #51262d;}
#content p {text-align: left;}
#content a:hover {color: #f03732;}

#footer {clear: both; margin-top: 25px; text-align: center;}

div.banniere      { width:100%;  color:#c60; background-color:#ffecce; border:1px solid #c60; }
div.titredusite   { width:100%;  background:#EEEEEE; border:solid 1px #CCCCCC; font-family:Trebuchet MS	,arial; font-size:9pt; text-align:left; }
td.banniere        { width:100%;  color:#c60; background-color:#FFFFAA; border:1px solid #c60; padding:0px; }
 
WRInaute passionné
Code:
#topright
{
float:right;
width: 23%;
padding: 5px;
margin-top: -xxpx
}

Mais bon, quel intérêt de mettre des div dans un td...
Met des div partout :roll:
 
Nouveau WRInaute
Merci beaucoup pour ton aide mais...

(1) "margin-top: -xxpx " -> cela fonctionne mais je crains que pour certaines résolutions, l'image ne remonte trop haut. Ton avis ?

(2) Pour le td -> sans le tableau qui encadre mes <div> l'affichage de ma page foire totalement. Si vous avez une idée je prends aussi :)
(et en encadrant d'un div ca ne marche po :s)

Merci bcp en tout cas.
 
Discussions similaires
Haut