Problème alignement des bloc

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème alignement des bloc

Message par Miss CC Sam 24 Aoû 2013 - 17:10

Bonjour,

alors j'ai codé en html/css ma page d'accueil que j'ai donc mis dans les module => page html en cochant "faire de cette page la page d'accueil" et j'ai réussis à créer ce que je voulais néanmoins il me reste un petit soucis j'ai beau chercher et modifier mon css je n'arrive pas à le résoudre!
voici l'adresse du forum:

http://testgraph59.forumactif.org/

Mon problème ce situe en bas de page les trois bloc ne s'alignent pas correctement et celui de gauche est coupé! J e pense que cela est du au fait que je n'ai pas déterminé de taille au niveau de la page en elle même dans le csss mais quand j'en attribue une tout se décale et plus rien ne fonctionne. Voici le code:

Code:
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>FL 2.0</title>
      <link rel="stylesheet" href="css/style.css" type="text/css" />
      <!--[if IE 7]>
         <link rel="stylesheet" href="css/ie7.css" type="text/css" />
      <![endif]-->

/*------------------------------------------------------------DEBUT CSS -----------------------------------------------------------*/
<style type="text/css">

/*---------------------------------------- GENERALE -------------------------------------*/
body{
background-color: #000000 ;  
width: 100%;
height: 100%;
}

.page{
  background-color: #000000 ;  
   text-align: center;
}

/*---------------------------------------- POLICE ---------------------------------------*/
@font-face {
    font-family: 'RokkittRegular';
    src: url('rokkitt-regular-webfont.eot');
    src: url('rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('rokkitt-regular-webfont.woff') format('woff'),
        url('rokkitt-regular-webfont.ttf') format('truetype'),
        url('rokkitt-regular-webfont.svg#RokkittRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*---------------------------------------- HEADER ---------------------------------------*/
.header{
   background-color:#000000;
   width:940px;
   margin:-1% 0 0 20%;
   padding:1% 1% 0;
}


/*---------------------------------------- CORPS ---------------------------------------*/
.body{
   width:50%;
   height:10%;
   margin:0 auto;
   padding:0 1%;
   overflow:hidden;
   text-align: center;
}
/*--------------- 1er bloc avec vidéo-----------------*/
/*----- Mise en place différent bloc-----*/
.body div#featured{
   background-color:#000000;
   height:360px;
   padding:0 0 80px;
}

/*----- bouton sans point liste-----*/
.body ul{
   margin:0;
   list-style:none;
   padding:13px 130px 0;
   float:right;
}


.body ul.bouton li a img:hover{
   filter:alpha(opacity=80);
   opacity:0.8;
}
/*--------------- fin 1er bloc avec vidéo-----------------*/

/*--------------- 2eme bloc pub-----------------*/
/*-----séparation-----*/
.body ul.essentiel{
   list-style:none;
   margin:-60px 0 0;
   padding:-10PX 0 60px;
   background:url(http://i40.servimg.com/u/f40/16/80/99/56/separa10.jpg) no-repeat center top;
   overflow:hidden;
}

/*-----alignement bloc-----*/
.body ul.essentiel li:first-child{
   margin:80px 0 0 -55px;
}

.body ul.essentiel li div{
   width:281px;
   height:380px;
   text-align:center;
   padding: 2px 0 20px 0;
   float:none;
   margin:0;
   background:none;
}

/*-----fond bloc-----*/
.body ul.essentiel li{
   float:left;
   background:url(http://img11.hostingpics.net/pics/388271partiepub.png) no-repeat -10px -10px!important;
   margin:60px 0 0 20px;
   height:400px;
}

/*-----placement bouton bloc-----*/
.body ul.essentiel li div a img{
   border:0;
   margin:0 0 0 0;
}

.body ul.essentiel li div a img:hover{
   filter:alpha(opacity=80);
   opacity:0.8;
}


/*-----texte bloc-----*/
.body ul.essentiel li div p{
   width:258px;
   text-align:center;
   color:#202020;
   font-family: 'RokkittRegular';
   margin:17px 0 0 10px;
   line-height:20px;
   font-size:14px;
   background:none;
   padding:0;
}

/*-----placement bloc essentiel-----*/
.body ul{
   list-style:none;
    margin:0;
    padding:0;
   overflow:hidden;
}
/*--------------- fin 2eme bloc pub-----------------*/


/*---------------------------------------- FOOTER ---------------------------------------*/
.footer{
   width:940px;
   background-color:#000000;
   padding:-60px 10px 207px;
   margin:0 auto;
   overflow:hidden;
}

/*-----placement crédit fin-----*/
.footer ul{
   list-style:none;
   margin:0 0 0 60px;
   padding:0;
   overflow:hidden;
   float:left;
}

/*-----retrait première séparation créd' fin-----*/
.footer ul li:first-child a{
   border:none;
   padding:0 6px 0 0;
}

/*-----créd' fin horizontal-----*/
.footer ul li{
   float:left;
}

/*-----créd' fin police-----*/
.footer ul li a{
   border-width: 1px;
   border-color:#5b5b5b;
   border-style: none none none solid;
   color:#5b5b5b;
   font-size:10px;
   font-family: Trebuchet MS;
   text-decoration:none;
   font-weight:bold;
   padding:0 6px;
   outline:none;
}

/*-----copyright-----*/
.footer p{
   color:#5b5b5b;
   font-size:10px;
   font-family: Trebuchet MS;
   font-weight:bold;
   float:left;
   margin:4px 0 0 100px;
}
</style>
/*------------------------------------------------------------ FIN CSS -----------------------------------------------------------*/

/*------------------------------------------------------------ CORPS HTML -----------------------------------------------------------*/
</head>
   <body>
      <div class="page">
         <div class="header">
            <a href="http://graph-addict.forumactif.pro/forum" id="logo"><img src="http://i71.servimg.com/u/f71/18/46/08/14/logo_p15.jpg" alt=""/></a>
         </div>


         <div class="body">
            <div id="featured">
<ul class="bouton">
               <li class="selected"><a href="index.html"><img src="http://i71.servimg.com/u/f71/18/46/08/14/bouton20.jpg" alt=""/></a></li>
               <li><a href="http://graph-addict.forumactif.pro/f22-inscriptions"><img src="http://i71.servimg.com/u/f71/18/46/08/14/bouton25.jpg" alt=""/></a></li>
               <li><a href="http://graph-addict.forumactif.pro/f24-infos-divers"><img src="http://i71.servimg.com/u/f71/18/46/08/14/bouton22.jpg" alt=""/></a></li>
</ul>


<iframe width="700" height="380" src="//www.youtube.com/v/QX-Efv95zqA?version=3&amp&rel=0&autoplay=1&replay&loop=1&playlist=lniVx_pFM_A%5D&rel=0" frameborder="0" allowFullScreen=""></iframe>
               </div>


/* * * * * * * * * * BLOC INFO * * * * * * * * * */      
          
            <ul class="essentiel">
  /* * * LES PARTENAIRES * * */
               <li>
                  <div class="partenaire">
<p>Pour en savoir plus cliquer sur le bouton!</p>
                     <a href="http://graph-addict.forumactif.pro/f10-partenariats"><img src="http://img4.hostingpics.net/pics/863533BOUTONPARTENAIRES.png" /></a>
                     <p>ICI SE TROUVERONT LES IMAGES DE NOS PARTENAIRES</p>
                  </div>
               </li>
  /* * * FIN PARTENAIRE * * */


  /* * * LE STAFF * * */
               <li>
                  <div class="staff">
<p>Pour en savoir plus cliquer sur le bouton!</p>
                     <a href="http://graph-addict.forumactif.pro/f23-le-staff"><img src="http://img4.hostingpics.net/pics/403081BOUTONSTAFF.png"/></a>
                     <p>ICI SE TROUVERONT LES MEMBRES DU STAFF</p>
                  </div>
               </li>
  /* * * FIN LE STAFF * * */


 /* * * CREDIT * * */
               <li>
                  <div class="credit">
<p>Pour en savoir plus cliquer sur le bouton!</p>
                     <a href="http://graph-addict.forumactif.pro/f23-le-staff">
                     <img src="http://img11.hostingpics.net/pics/995183BOUTONCREDITS.png"/></a>
                     <p>L'ensemble du forum appartient à ses fondatrices et ses membres. Thème et Code conçuent et crééent par <a href="http://graph-addict.forumactif.pro/u3">Miss CC</a>. Agencement et rédaction par <a href="http://graph-addict.forumactif.pro/u2">Ellanna</a> et <a href="http://graph-addict.forumactif.pro/u4">Elfy</a>. Merci à tout ceux qui nous ont aidé à bâtir Graph Addict.
</p>
                  </div>
               </li>
  /* * * FIN CREDIT * * */
            </ul>
         </div>

         <div class="footer">
            <ul>
               <li><a href="http://graph-addict.forumactif.pro/forum">Forum</a></li>
               <li><a href="http://graph-addict.forumactif.pro/f23-le-staff">Staff</a></li>
               <li><a href="http://graph-addict.forumactif.pro/f24-infos-divers">Info</a></li>
               <li><a href="http://www.forumactif.com" target="_blank">forumactif.com</a></li>
            </ul>
           <p>Copyright Miss CC 2013. Forum Graph Addict all rights reserved</p>
            <div class="connect"></div>
         </div>
      </div>
/* * * * * * * * * * FIN BLOC INFO * * * * * * * * * */  
   </body>
</html>
/*------------------------------------------------------------FIN  CORPS HTML -----------------------------------------------------------*/
Merci d'avance de l'aide que vous pourrez m'apporter


Dernière édition par Miss CC le Mar 27 Aoû 2013 - 20:15, édité 1 fois
avatar

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème alignement des bloc

Message par yuriz Sam 24 Aoû 2013 - 20:26

C'est caché car il est indiqué que l'élément doit être déplacé 55 pixels à gauche

Code:
.body ul.essentiel li:first-child{
   margin:80px 0 0 -55px;
}
Il y a des problèmes d'alignement car il y a du texte entre les éléments.

Un commentaire en html c'est <!-- tombeau --> et pas /* tombeau */ qui est du texte.
avatar

yuriz
Nouveau membre

Messages : 16
Inscrit(e) le : 24/08/2013

yuriz a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum