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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par insanecricri, 15 Avril 2007.

  1. insanecricri
    insanecricri Nouveau WRInaute
    Inscrit:
    6 Janvier 2007
    Messages:
    30
    J'aime reçus:
    0
    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.
     
  2. insanecricri
    insanecricri Nouveau WRInaute
    Inscrit:
    6 Janvier 2007
    Messages:
    30
    J'aime reçus:
    0
    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 _ [email protected]
         </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; }
    
     
  3. Koxin-L
    Koxin-L WRInaute passionné
    Inscrit:
    29 Mars 2007
    Messages:
    1 532
    J'aime reçus:
    1
    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:
     
  4. insanecricri
    insanecricri Nouveau WRInaute
    Inscrit:
    6 Janvier 2007
    Messages:
    30
    J'aime reçus:
    0
    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.
     
  5. insanecricri
    insanecricri Nouveau WRInaute
    Inscrit:
    6 Janvier 2007
    Messages:
    30
    J'aime reçus:
    0
    Mise à jour : en encadrant d'un div ca ne marchait pas.

    Maintenant oui :)
     
  6. Koxin-L
    Koxin-L WRInaute passionné
    Inscrit:
    29 Mars 2007
    Messages:
    1 532
    J'aime reçus:
    1
    1 - Non, la résolution n'a rien à voir, si tu met une marge de 10px, elle sera de 10px en 800x600 ou 1280x1024.

    2 - Une seul solution virer tous les TD et te mettre sérieusement aux placement via les div...
    Un exemple ici : http://css.alsacreations.com/Faire-une- ... s-tableaux
     
  7. insanecricri
    insanecricri Nouveau WRInaute
    Inscrit:
    6 Janvier 2007
    Messages:
    30
    J'aime reçus:
    0
    Merci beaucoup.

    Je marque ce topic comme résolu.
     
Chargement...
Similar Threads - []résolu] Problème simple Forum Date
problème avec mon site Demandes d'avis et de conseils sur vos sites Lundi à 15:35
Probleme tag sur Google tag manager Demandes d'avis et de conseils sur vos sites 24 Novembre 2022
Probleme Tag sur Google Tag Manager Google Analytics 18 Novembre 2022
Gros problème sur la profondeur de mes pages Problèmes de référencement spécifiques à vos sites 30 Septembre 2022
Problème de htaccess chez Ionos URL Rewriting et .htaccess 12 Septembre 2022
Problème sur jquery avec fonction asynchrone Développement d'un site Web ou d'une appli mobile 6 Septembre 2022
Problème de crawl et d'indexation Crawl et indexation Google, sitemaps 1 Septembre 2022
WordPress Problème affichage style avec Elementor (titre, bordures, separateur) Administration d'un site Web 8 Août 2022
Problème d'indexation de backlinks Débuter en référencement 24 Juillet 2022
Problème d'indexation de backlinks Problèmes de référencement spécifiques à vos sites 21 Juillet 2022
Probleme de visibilité de ma page Facebook Facebook 5 Juillet 2022
problème avec le développeur Droit du web (juridique, fiscalité...) 22 Juin 2022
Problème désindexation des pages de Google Débuter en référencement 21 Juin 2022
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022
Problème : Google Crawl et Index des pages en No Index et bloqué par le robot.txt Crawl et indexation Google, sitemaps 26 Avril 2022
Problème avec GA4 : nb de visiteurs temps réel et par jour Google Analytics 19 Avril 2022