Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème avec mes images

A cause d'un texte qui float

Captain MDS
    2 janvier 2006 à 11:27:15

    Salut à tous
    J'ai un problème avec ma page. Il y a 6 images avec une légende dessous. Pour positionner le texte la ou il doit être, j'ai utilisé float: right mais ça fout le boxon dans la position des images, elles se mettent l'une dessous autre (au lieu d'être cote à cote). Le texte est bien placé mais pas les images, vous pourriez m'aider ?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Portail Bicoque - Site officiel</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
               <link rel="stylesheet" media="screen" type="text/css" title="Design" href="baow.css" />
       </head>
       <body>
                    <div id="banniere">
                            <a href="index.html"><img src="images/site/banniere.jpg" alt="Bannière Bicoque" title="Accueil" /></a>
                    </div>
                    <div id="font_baow"><div id="baow"></div></div>
            <div id="noel">
                  <h1>Noël 2005</h1>
                 <img src="images/baow/Noël 2005/episode I.jpg" alt="Episode 1" title="Episode 1" /> <img src="images/baow/Noël 2005/episode II.jpg" alt="Episode 2" title="Episode 2" />
                 <p class="premier_nom">Melatterror - <a href="http://www.aix-en-provence.com">Aix en Provence</a></p> <p class="deuxieme_nom">Ramzett' - <a href="http://www.chatelaillon-plage.fr">Châtelaillon-Plage</a></p>
                 <img src="images/baow/Noël 2005/episode III.jpg" alt="Episode 3" title="Episode 3" /> <img src="images/baow/Noël 2005/episode VI.jpg" alt="Episode 6" title="Episode 6" />
                 <p class=" premier_nom">Aurélie - <a href="http://www.langeac.com">Langeac</a></p> <p class="deuxieme_nom">Georgeou & Barbier - <a href="http://www.insa-lyon.fr">INSA Lyon</a></p>
                 <img src="images/baow/Noël 2005/episode IV.jpg" alt="Episode 4" title="Episode 4" /> <img src="images/baow/Noël 2005/episode V.jpg" alt="Episode 5" title="Episode 5" />
                 <p class="premier_nom">Batou - <a href="http://www.annecy.fr">Annecy</a></p> <p class="deuxieme_nom">Etiti - <a href="http://www.besancon.fr">Besançon</a></p>
                    </div>
                    <a href="index.html">Retour à l'accueil</a>
            <div id="copyright">
                    <p>Webmaster : <a href="mailto:webmaster@insa-bicoque.com">Damien F</a>. Tous droits réservés. Site lancé le 14/01/2006.<br /><a href="http://www.firefox.fr">Téléchargez</a> Mozilla Firefox pour un affichage correct du site.<br />Portail Bicoque est un site uniquement dédié à la famille Bicoque de L'INSA de Lyon et ne cautionne aucune activité illégale.<br />Inutile de nous contacter pour toute histoire de "turne" ou de "coturne"</p>   </div>
         </body>
    </html>


    body
    {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 760px;
    margin: auto;
    background-image: url("images/site/bg.jpg");
    }

    #noel
    {
    background-image: url("images/site/bgbaownowel.jpg");
    margin-bottom: 20px;
    }

    img
    {
    width: 350px;
    margin-left: 20px;
    }

    #banniere img
    {
    width: 760px;
    height: 100px;
    margin-bottom: 10px;
    margin-left: 0px;
    }

    a img
    {
    border: none;
    }

    a
    {
    text-decoration: none;
    color: blue;
    font-weight: bold;
    font-size: 20px;
    }

    a:hover
    {
    color:red;
    text-decoration: underline;
    }

    a:active
    {
    color: red;
    }

    a:focus
    {
    color: red;
    }

    h1
    {
    font-family: "Kristen ITC", serif;
    text-align: center;
    color: red;
    text-decoration: underline;
    font-weight: bold;
    }

    .premier_nom
    {
    font-family: "Comic sans MS", serif;
    position: relative;
    left: 20px;
    bottom: 20px;
    }

    .deuxieme_nom
    {
    font-family: "Comic sans MS", serif;
    float: right;
    margin-right: 20px;
    position: relative;
    bottom: 75px;
    }

    p a
    {
    font-size: 15px;
    }

    #baow
    {
    background-image: url("images/site/baow2.jpg");
    width: 500px;
    height: 500px;
    margin: auto;
    }

    #font_baow
    {
    width: 760px;
    background-color: white;
    }

    #copyright
    {
       margin-top: 20px;
       text-align: center;
       border: 5px outset orange;
       font-size: 11px;
       width: 600px;
       margin: auto;
    }

    #copyright a
    {
    color: blue;
    font-size: 11px;
    }


    Dans le code XHTML, la partie qui nous interesse c'ets le div noel

    Merci de bien vouloir m'aider.
    • Partager sur Facebook
    • Partager sur Twitter
    jp949
      2 janvier 2006 à 12:07:29

      salut.
      tu as essayé d'utiliser une liste <dl> avec les <dt> en float:left; ?
      • Partager sur Facebook
      • Partager sur Twitter
      Captain MDS
        2 janvier 2006 à 12:11:09

        Euh, nan, mais les lignes doivent être à la même hauteur, donc je pense pas que ça va être utile... A moins que c'ets moi qui ai rien compris...
        • Partager sur Facebook
        • Partager sur Twitter

        Problème avec mes images

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown