Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme au niveau d'un alignement

css ou html

Sujet résolu
aokigeo
    2 novembre 2006 à 15:21:14

    Bonjour à tous , voila je suis en train de refaire le designe de mon site , oui mais voila ,j'ai un problême :
    Voila mon code:
    <html>
    <head>
    <title>Bienvenu sur Aokigeo:Tout sur les sports US</title>
    <script type="text/javascript">
    <!--
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
            for (var i = 1; i<=10; i++) {
                    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
            }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
    </head>
    <style>
    dl, dt, dd, ul, li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    position: absolute; /* placement du menu, à modifier selon vos besoins */
    top: 37%;
    margin-left:12%;
    z-index:100;
    width:100%;

    }
    #menu dl {
    float: left;
    width: 150px;
    }
    #menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    color:white;
    background: #0500c2;
    border: 1px double #ffffff;


    }
    #menu dd {
    display: none;
    border: 1px solid #ffffff;
    }
    #menu li {
    text-align: left;
    background: #0c00ff;
    font-weight: bold;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    }
    #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    background: #acbaff;
    }

    #body
    {
            font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
            color:Black ;
            font-size: 1em;
            margin: 0;
            background-image: url('http://aokigeo.goldzoneweb.info/newtheme/fondecran.jpg');
            width:100%;
    }

    #haut_de_page
    {
        margin-top: 1%;
            height: 300px;
            background-image: url("http://aokigeo.goldzoneweb.info/newtheme/enteteblue.jpg");
            background-repeat:no-repeat;
            margin-left: 12%;
            margin-right: 3%;
    }


    .element_menu
    {
            font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
            background-color:black;
            border: 3px double #8c7dff;
            margin-bottom:10px;
            margin-left:5px;
            margin-right:5px;
            padding-left: 5px;
            padding-right: 5px;
            list-style-image: url("http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif");
    }

    #corp_de_page
    {
            font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
            background-color: bec0ff;
            border: 1px solid #9fb1ff;
            padding-bottom:25px;
            padding-left:25px;
            padding-right:25px;
            margin-top:2%;
            margin-left:2%;
            margin-right:2%;

    }

    #pied_de_page
    {
            font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
            clear:  both;
            background-color:white;
            border: 1px solid #8c7dff;
            padding: 5px;
            margin-top: 10px;
            margin-bottom:1%;
        text-align: center;
            margin-left: 4%;
        margin-right: 4%;
     }
     
     
     #news h3
    {
            display: block;
            text-decoration: none;
            font-variant: normal;
            font-size: 0.8em;
            margin: 0px;
            text-indent: 20px;
            padding: 3px;
            font-family: Arial, 'Times New Roman', Times, serif;
            color: blue;
            background-color: #b0c4de;
            border: 1px dotted #848686;
    }

    #info_news
    {
            float: left;
            font-size: xx-small;
    }

    #news p
    {
        background-color: #ffffff;
        margin-top:0px;
            padding-left:10px;
        border: 0px solid #848686;
            padding: 1javascript:document.forms['EditForm'].screen.value=3;document.forms['EditForm'].submit();
    Save (accesskey s)0px;
    }

    .imageflottante
    {
       float: left;
       margin: 20px;
    }
    #commentaires
    {
            float: right;
            font-size: xx-small;
    }

    #news_entête
    {
        width:600px;
        height:90px;
            background-image:url('http://aokigeo.goldzoneweb.info/newtheme/actusite.gif');
            float:right;
    }

    #news_corp
    {
            font-family: 'Tahoma';
            font-size: 0.9em;
            font-weight: bold;
            margin-bottom:10px;
            width:598px;
            float:right;
            border-right:2px double #e6e5ff;
            border-left:2px double #e6e5ff;
            border-bottom:2px double #e6e5ff;
           
    }
    #actubase_entête
    {
        width:500px;
        height:105px;
            background-image:url('http://aokigeo.goldzoneweb.info/newtheme/actubaseball.gif');

    }
    #actubask_entête
    {
        width:500px;
        height:112px;
            background-image:url('http://aokigeo.goldzoneweb.info/newtheme/actubasket.gif');

    }
    #actuf_entête
    {
        width:500px;
        height:97px;
            background-image:url('http://aokigeo.goldzoneweb.info/newtheme/actufoot.gif');

    }
    #actuh_entête
    {
        width:500px;
        height:99px;
            background-image:url('http://aokigeo.goldzoneweb.info/newtheme/actuhockey.gif');

    }
    #actu_corp
    {
            font-family: 'Tahoma';
            font-size: 0.9em;
            font-weight: bold;
            margin-bottom:10px;
            width:497px;
            border-right:2px double #e6e5ff;
            border-left:2px double #e6e5ff;
            border-bottom:2px double #e6e5ff;
            margin-bottom:10px;
    }
    #s_entête
    {
        width:300px;
        height:84px;
            background-image:url('http://aokigeo.goldzoneweb.info/newtheme/sondage.gif');
            float:right;
            margin-left:2px;
            margin-right:2px;
    }
    #l_entête
    {
        width:300px;
        height:86px;
            background-image:url('http://aokigeo.goldzoneweb.info/newtheme/livreor.gif');
            float:right;
            margin-left:2px;
            margin-right:2px;
    }
    #s_corp
    {
        font-family: 'Tahoma';
            font-size: 0.9em;
            font-weight: bold;
            margin-bottom:10px;
            margin-left:2px;
            margin-right:2px;
            width:300px;
            border-right:2px double #e6e5ff;
            border-left:2px double #e6e5ff;
            border-bottom:2px double #e6e5ff;
            float:right;
    }

    a
    {
            text-decoration: none;
            color: red;
    }

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

    a:focus
    {
            background-color: #b0c4de;
    }

    #pre
    {
            font-size: 1em;
            font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
    }

    h1
    {
            text-align: center;
            color :#8c7dff;
            text-decoration: blink
    }

    /*Message d'erreur ou de réussite*/

    #message
    {
            text-align: center;
            width: 30%;
            height: 30%;
            background-color:#F4F9FD;
            border: 1px solid #848686;
            margin-left: 35%;
    }
    table
    {
       border-collapse: collapse;
       margin-right:2px;
       margin-left: 2px;
       font-size:1.2em;
    }

    td, th /* Mettre une bordure sur les td ET les th */
    {
       border: 1px solid #afafaf;
    }

    th
    {
    background: url("mettre fond th") repeat-x;
    }
    </style>


    <div id="body">

    <div id="haut_de_page">
    </div>
    <div id="menu">
            <dl>           
                    <dt onmouseover="javascript:montre('smenu1');">Navigation</dt>
                            <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
                                    <ul>
                                            <li><a href="#"><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Accueil</a></li>
                                            <li><a href="#"><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Forum</a></li>
                                            <li><a href="#"><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Livre d'or</a></li>
                                            <li><a href="#"><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Tchat en ligne</a></li>
                                            <li><a href="#"><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Radio</a></li>
                                    </ul>

                            </dd>
            </dl>
            <dl>   
                    <dt onmouseover="javascript:montre('smenu3');">Nous</dt>
                            <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
                                    <ul>
                                            <li><a href="#"><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">équipe</a></li>

                                            <li><a href="#"><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Nous contacter</a></li>
                                            <li><a href="#"><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Partenariat</a></li>
                                    </ul>
                            </dd>
            </dl>
                    <dl>   
                    <dt onmouseover="javascript:montre('smenu4');">Baseball</dt>

                            <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
                                    <ul>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">L'histoire</a></li>       
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Les regles</a></li>       
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Le MLB</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Les équipes</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Actualité de ce sport</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Annexe</a></li>
                                    </ul>
                            </dd>
            </dl>
                    <dl>   
                    <dt onmouseover="javascript:montre('smenu5');">Basket ball</dt>

                            <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
                                    <ul>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">L'histoire</a></li>       
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Les regles</a></li>       
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">La NBA</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Les équipes</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Actualité de ce sport</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Annexe</a></li>
                                    </ul>
                            </dd>
            </dl>
                    <dl>   
                    <dt onmouseover="javascript:montre('smenu6');">Foot US</dt>

                            <dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
                                    <ul>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">L'histoire</a></li>       
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Les regles</a></li>       
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">La NFL</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Les équipes</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Actualité de ce sport</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Annexe</a></li>
                                    </ul>
                            </dd>
            </dl>
                    <dl>   
                    <dt onmouseover="javascript:montre('smenu7');">Hockey</dt>

                            <dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre('');">
                                    <ul>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">L'histoire</a></li>       
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Les regles</a></li>       
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">La NHL</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Les équipes</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Actualité de ce sport</a></li>
                    <li><a href=""><img src="http://aokigeo.goldzoneweb.info/image/etoile%5b1%5d.gif" border="0">Annexe</a></li>
                                    </ul>
                            </dd>
            </dl>
           

    </div>

    <div id="corp_de_page">
    <div id="news_entête">
    </div>
    <div id="news_corp">
    <p>
    Mettre les news ici
    </div>
    <div id="actubase_entête">
    </div>
    <div id="actu_corp">
    mettre news baseball
    </div>
    <br>
    <div id="actubask_entête">
    </div>
    <div id="actu_corp">
    mettre news basket
    </div>
    <br>
    <div id="actuf_entête">
    </div>
    <div id="actu_corp">
    mettre news foot us
    </div>
    <br>
    <div id="actuh_entête">
    </div>
    <div id="l_entête">
    </div>
    <div id="s_entête">
    </div>
    <div id="actu_corp">
    mettre news hockey
    </div>
    <div id="s_corp">
    mettre le livre d'or
    </div>
    <div id="s_corp">
    mettre le sondage
    </div>




    <div id="pied_de_page">
    <a href="/admin/administration.php">Administration</a>
    </div>

    </body>
    </html>

    voila à présent ce que j'obtiens :
    Image utilisateur
    Vous voyez un peu le caca.
    Pourriez vous me situer l'erreur pour que je la corrige
    • Partager sur Facebook
    • Partager sur Twitter
    Steeve
      2 novembre 2006 à 15:27:24

      Fiou trop long a lire ce code ^^

      A vu d'oeil je dirais, ton bloc qui merde tu lui vires ces margin et tu lui mets un float : right;
      Et ton body tu vire ton 100 % et tu mets en pixel si jamais sa marche pas, la largeur étant la largeur additionés de tout tes blocs compris dans la largeur o_O

      T as suivis ? lol

      Ah oui si jamais tu n'as pas de float left a tes blocs de gauche tu peux leur ajoute aussi.

      enfin fais une sauvegarde et fais des tests.

      EDIT : au passage tu nous donneras les noms de blocs en question qu on galère pas a chercher dans ton code. merci
      • Partager sur Facebook
      • Partager sur Twitter

      probleme au niveau d'un alignement

      × 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