Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de mise en page :(

le css ou le .html ????

Sujet résolu
casper
    12 juillet 2006 à 22:48:07

    Bonsoir,
    Après avoir lu le tuto de Bogoris sur comment faire des cadres avec bords arrondis en css, j'ai essayé de faire la même chose pour voir si j'y arriverai :p et malheureusement tout allait bien jusqu'au dernier coin arrondi celui en bas à droite et je cherche la solution depuis un bon moment en vain :colere2: .
    Donc je vous donne mon code j'espère que quelqu'un trouvera la solution. Merci.

    Le xhtml :

    <!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>Accueil - Bibuntu.com   | version 0.1 |</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <link rel="stylesheet" media="screen" type="text/css" title="design par defaut" href="index.css" />
       </head>
       <body>
            <div class="header">
                            <img src="images/titre_banniere.png" alt="titre du site web Bibuntu.com"/>     
                            <div class="acces">               
                                            <a href="#">politique d'accessibilit&eacute</a> |
                                            <a href="#">aller au contenu</a> |
                                            <a href="#">plan du site</a>                       
                            </div>
            </div>
           
            <div class="actualites">

                 <div class="haut_gauche">   
                 <div class="haut_droit">
                    <div class="haut_milieu">
                 </div>
                    </div>
                    </div>
           
                    <div class="milieu_gauche">
                    <div class="milieu_droit">
                    <div class="milieu_milieu">               
                    <!-- rajouter le texte ici ;) -->

                    </div>     
                    </div>     
                    </div>
                           
                    <div class="bas_gauche">
                    <div cass="bas_droit">     
                    <div class="bas_milieu">
                    </div>     
                    </div>     
                    </div>
                                   
            </div>
       </body>
    </html>


    Le css :

    html, body
    {
            margin: 0;
            padding: 0;     
    }

    .header
    {
            width: 100%;
            height: 129px; 
            margin: 0;
            padding: 0;
            background: url('images/background-repeat.png') repeat-x;

    }

                                    .header img
                                    {
                                            margin-left:3%;
                                            margin-top: 2%;
                                    }

    .acces
    {
            margin: 0;
            padding: 0;
            position: absolute;
            top: 0.6%;
            right: 1%;
            font-size: 0.7em;
            color: #ffffff;
    }

                                    .acces a
                                    {
                                            text-decoration: none;
                                            color: #ffffff;
                                    }

    .actualites
    {
            width: 45%;
            margin-top: 3%;
            margin-left: 3%;
            padding: 0;
    }

                                    .actualites .haut_gauche
                                    {
                                            padding-left: 290px;                   
                                            background: url('images/haut_gauche1.png') bottom left no-repeat;
                                    }

                                    .actualites .haut_milieu
                                    {       
                                            width: 100%;
                                            padding-top: 40px;                             
                                            background: url('images/fond_actualite.png') bottom center repeat-x;
                                    }

                                    .actualites .haut_droit
                                    {                                         
                                            padding-right: 30px;                   
                                            background: url('images/haut_droit.png') bottom right no-repeat;
                                    }                           
                                   
                                    .actualites .milieu_gauche
                                    {
                                            padding-left: 30px;
                                            padding-top: 0;
                                            height: 100%;
                                            background: url('images/milieu_gd.png') left repeat-y;       
                                    }
                                   
                                    .actualites .milieu_droit
                                    {
                                            padding-right: 30px;       
                                            padding-top: 0;
                                            height: 100%;
                                            background: url('images/milieu_gd.png') right repeat-y;
                                    }

                                    .actualites .milieu_milieu
                                    {
                                            padding-top: 1px;       
                                            padding-bottom: 1px;               
                                            width: 100%;
                                            height: 100%;
                                            background: url('images/milieu_gd.png') repeat;
                                            text-align: justify;           
                                    }
                                   
                                    .actualites .bas_gauche
                                    {                                   
                                            padding-left: 30px;
                                            background: url('images/bas_gauche.png') top left no-repeat;               
                                    }
                                   
                                    .actualites .bas_milieu
                                    {
                                            padding-top: 30px;                                                     
                                            width: 100%;
                                            background: url('images/fond_actualite_milieu_bas.png') top center repeat-x;               
                                    }                           
                           
                                    .actualites .bas_droit
                                    {                                   
                                            padding-right: 30px;
                                            background: url('images/bas_droit.png') top right no-repeat;
                                    }
                                   




    PS: si vous voulez les images pour tester demander les moi en me laissant votre email je vous les enverrai car je n'ai pas accès à mon ftp sur ce PC pour le moment


    edit: Voici les liens des images :
    coin bas droit
    coin bas gauche
    coin haut droit
    coin haut gauche
    colonne droite et gauche
    entre coin gauche et droite haut
    entre coin gauche et droite bas
    la répétition du header
    nom du site en haut a gauche


    Voilà les images pour faire le test ;)
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
    Alésio
      13 juillet 2006 à 13:20:00

      Salut à toi!

      tu as une toute petite erreur dans ton code:
      Dans ton code HTML tu donnes toutes les class, sauf "bas_droit" ou tu écrit CASS, il faut rajouter un "l" entre le C et le A ;)
      si jamais j'ai essayer ici, ça marche très bien maintenant ;)

      PS: la prochaine fois faudrait que tu trouves un autre endroit pour uploader tes images parce que sur ce site, il te renomme les images (et c'est vraiment ch***ant à renommer :p )

      bonne chance à toi pour la suite!
      • Partager sur Facebook
      • Partager sur Twitter
      casper
        13 juillet 2006 à 13:51:54

        Re,
        Alors là, dire que j'ai cherché l'erreur pendant plusieurs heures :euh: , c'est toujours bête c'est devant nos yeux mais on ne la voit pas, en tout cas merci parce que je commençais à desespérer...
        Voilà encore merci @+.

        Ps: la prochaine j'essayerai l'upload du site ;)

        Casper
        • Partager sur Facebook
        • Partager sur Twitter

        Problème de mise en page :(

        × 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