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

I
insanecricri
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.
 
I
insanecricri
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; }
 
K
Koxin-L
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:
 
I
insanecricri
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.
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
1.fr
Discussions similaires
A
[résolu]problème d'une simple redirection .php en .html
Réponses
10
Affichages
5K
YoyoS
Y
L
Problème images en https (forum phpbb) [résolu]
Réponses
4
Affichages
4K
landry
L
H
[Résolu] Problème d'importation de base MySQL en UTF8 chez 1&1
Réponses
5
Affichages
8K
hibou57
H
W
[Résolu] Problème pour gérer 2 campagnes
Réponses
2
Affichages
2K
wishek3
W
O
[Résolu] Problème de remonté de stats de campagne mails via GA
Réponses
2
Affichages
2K
OlivierShop
O
Stellvia
[ Résolu ] Problème ajax innerHTML et submit de formulaire
Réponses
2
Affichages
2K
jcaron
J
OTP
[résolu] Problème sur certains navigateurs ?
Réponses
3
Affichages
1K
OTP
OTP
G
Le code GA à insérer me supprime du code html [Problème résolu]
Réponses
9
Affichages
2K
code2
C
zeb
[résolu] problème de variables chez OVH
Réponses
7
Affichages
1K
ortolojf
O
zeb
[résolu] problème php chez OVH
Réponses
3
Affichages
8K
zeb
zeb
H
[résolu] Problème avec preg_replace (le point)
Réponses
3
Affichages
2K
h2ofranck
H
sim100
[Résolu] Problème de cache ou d'historique
Réponses
2
Affichages
2K
sim100
sim100
C
Wanewsletter a planté . (problème résolu, merci à tous)
Réponses
24
Affichages
3K
cheloniologue
C
U
[Résolu]Problème avec Ajax
Réponses
10
Affichages
3K
informatiquegifs
I
A
[résolu]Problème insoluble avec un ORBER BY
Réponses
7
Affichages
1K
YoyoS
Y
P
Impossible de signaler un problème résolu
Réponses
6
Affichages
2K
OTP
OTP
C
[résolu]problème d'indexation url finissant par /1
Réponses
16
Affichages
2K
Marie-Aude
Marie-Aude
L
[Résolu]Problème de syntaxe pour une RewriteRule
Réponses
2
Affichages
2K
Lomic2
L
B
[Résolu] Rewriting OVH problème avec un slash
Réponses
12
Affichages
5K
chtipepere
C
P
[Résolu] Problème curieux de connexion à la BDD
Réponses
4
Affichages
2K
peremax
P
Haut