Accueil
Créer un forumProblème alignement des bloc
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème alignement des bloc
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:
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&&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 -----------------------------------------------------------*/
Dernière édition par Miss CC le Mar 27 Aoû 2013 - 20:15, édité 1 fois
Miss CC- *
- Messages : 48
Inscrit(e) le : 10/08/2013 -
Re: Problème alignement des bloc
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
Un commentaire en html c'est <!-- tombeau --> et pas /* tombeau */ qui est du texte.
- Code:
.body ul.essentiel li:first-child{
margin:80px 0 0 -55px;
}
Un commentaire en html c'est <!-- tombeau --> et pas /* tombeau */ qui est du texte.
yuriz- Nouveau membre
- Messages : 16
Inscrit(e) le : 24/08/2013
Sujets similaires» Alignement du bloc forum
» Un problème d'alignement
» problème d'alignement pa
» Problème d'alignement
» Problème d'alignement PA
» Un problème d'alignement
» problème d'alignement pa
» Problème d'alignement
» Problème d'alignement PA
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum