Page d'accueil qui se décale

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

Résolu Page d'accueil qui se décale

Message par Melodiam le Jeu 17 Mar 2016 - 14:08

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://zootopia.forumactif.org/

Description du problème

Bonjour bonjour ! Very Happy

Voilà j'ai un petit soucis avec mon code...
Lorsque je le poste en message sur un forum, le tout s'affiche parfaitement bien...

Or quand je le met dans les Généralités (puisque c'est une PA) tout se décale et je ne comprends pas pourquoi...

Voici mon CSS ->
Code:
/*******PAGE D'ACCUEIL*******/

.fondimage {
  background: url('http://img15.hostingpics.net/pics/782818FONDPAGEACCUEILcopie.png');
  width: 950px;
  height: 450px; }

.fondblanc {
  margin-top: 5px;
  margin-left: 40px;
  padding: 10px;
  width: 200px;
  height: 347px;
  border: 0px solid #efefef;
  overflow: auto; }

.bloctxt1 {
font-size: 11px;
color: #adadad;
border: 1px solid #efefef;
overflow: auto;
line-height: 11px;
width: 200px;
padding: 5px;
text-align: justify;
height: 160px;
margin-left: 270px;
margin-top: -173px;
}

.bloctxt2 {
font-size: 11px;
color: #adadad;
border: 0px solid #efefef;
overflow: hidden;
line-height: 15px;
width: 200px;
padding: 5px;
text-align: justify;
height: 160px;
margin-left: 270px;
margin-top: -361px;
}

.blocctxt {
font-size: 11px;
color: #adadad;
border: 1px solid #efefef;
overflow: auto;
line-height: 12px;
width: 310px;
padding: 5px;
text-align: justify;
height: 180px;
margin-left: 495px;
margin-top: -1px;
}

.blocliens {
font-size: 11px;
color: #adadad;
overflow: hidden;
line-height: 12px;
width: 310px;
padding: 5px;
text-align: center;
height: 140px;
margin-left: 495px;
margin-top: -385px;
}

.blocpote {
font-size: 11px;
color: #adadad;
overflow: auto;
line-height: 10px;
width: 80px;
text-align: center;
height: 362px;
margin-left: 830px;
margin-top: -122px;
}

/*******FIN PAGE D'ACCUEIL*******/

Voici le code ->
Code:
<div class="fondimage">
    
   <div class="fondblanc">
      <a class="postlink" href="http://zootopia.forumactif.org/?tid=f4220d80909952a917fb4c939983ea5f"><img alt="" border="0" src="http://img15.hostingpics.net/pics/338434predef.png" /></a> <a class="postlink" href="http://zootopia.forumactif.org/?tid=f4220d80909952a917fb4c939983ea5f"><img alt="" border="0" src="http://img15.hostingpics.net/pics/338434predef.png" /></a> <a class="postlink" href="http://zootopia.forumactif.org/?tid=f4220d80909952a917fb4c939983ea5f"><img alt="" border="0" src="http://img15.hostingpics.net/pics/338434predef.png" /></a> <a class="postlink" href="http://zootopia.forumactif.org/?tid=f4220d80909952a917fb4c939983ea5f"><img alt="" border="0" src="http://img15.hostingpics.net/pics/338434predef.png" /></a> <a class="postlink" href="http://zootopia.forumactif.org/?tid=f4220d80909952a917fb4c939983ea5f"><img alt="" border="0" src="http://img15.hostingpics.net/pics/338434predef.png" /></a>
   </div>
   <div class="bloctxt1">
      <strong><span style="color: rgb(139, 217, 127);"><em>nouveauté 17/03</em> -</span></strong> forum en construction encore et toujours ; <strong><span style="color: rgb(139, 217, 127);"><em>nouveauté 13/03</em> -</span></strong> forum en construction <strong><span style="color: rgb(139, 217, 127);"><em>nouveauté xx/xx</em> -</span></strong> du blabla blabla blabla blabla <strong><span style="color: rgb(139, 217, 127);"><em>nouveauté xx/xx</em> -</span></strong> du blabla blabla blabla blabla
   </div>
   <div class="bloctxt2">
      <img alt="" border="0" src="http://img15.hostingpics.net/pics/137549staff.png" />
      <div style="font-size: 11px; text-transform: uppercase; font-style: italic; color: #adadad; line-height: 15px; letter-spacing: 2px; text-align: center;">
         ARCHIBALD MC CORMICK
      </div><img alt="" border="0" src="http://img15.hostingpics.net/pics/137549staff.png" />
      <div style="font-size: 11px; text-transform: uppercase; font-style: italic; color: #adadad; line-height: 15px; letter-spacing: 2px; text-align: center;">
         NOM ET PRÉNOM
      </div>
   </div>
   <div class="blocctxt">
      blablabla babla haiozf oieghzeuogh  gzoheguo g hzehegzu ez hegome
   </div>
   <div class="blocliens">
      <table border="0">
         <tbody>
            <tr>
               <td>
                  <div style="background: #efefef; text-align: center; width: 140px; height: 10px; font-size: 9px; text-transform: uppercase; color: #808080; padding: 5px;">
                     lien navigation
                  </div>
               </td>
               <td>
                  <div style="background: #efefef; width: 140px; height: 10px; font-size: 9px; text-transform: uppercase; text-align: center; color: #808080; padding: 5px;">
                     lien navigation
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div style="background: #efefef; text-align: center; width: 140px; height: 10px; font-size: 9px; text-transform: uppercase; color: #808080; padding: 5px;">
                     lien navigation
                  </div>
               </td>
               <td>
                  <div style="background: #efefef; width: 140px; height: 10px; font-size: 9px; text-transform: uppercase; text-align: center; color: #808080; padding: 5px;">
                     lien navigation
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div style="background: #efefef; text-align: center; width: 140px; height: 10px; font-size: 9px; text-transform: uppercase; color: #808080; padding: 5px;">
                     lien navigation
                  </div>
               </td>
               <td>
                  <div style="background: #efefef; width: 140px; height: 10px; font-size: 9px; text-transform: uppercase; text-align: center; color: #808080; padding: 5px;">
                     lien navigation
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div style="background: #efefef; text-align: center; width: 140px; height: 10px; font-size: 9px; text-transform: uppercase; color: #808080; padding: 5px;">
                     lien navigation
                  </div>
               </td>
               <td>
                  <div style="background: #efefef; width: 140px; height: 10px; font-size: 9px; text-transform: uppercase; text-align: center; color: #808080; padding: 5px;">
                     lien navigation
                  </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
   <div class="blocpote">
      <img alt="" border="0" src="http://img15.hostingpics.net/pics/855652parte.png" /> <img alt="" border="0" src="http://img15.hostingpics.net/pics/855652parte.png" /> <img alt="" border="0" src="http://img15.hostingpics.net/pics/855652parte.png" /> <img alt="" border="0" src="http://img15.hostingpics.net/pics/855652parte.png" /> <img alt="" border="0" src="http://img15.hostingpics.net/pics/855652parte.png" /> <img alt="" border="0" src="http://img15.hostingpics.net/pics/855652parte.png" />
   </div>
</div>


Quelqu'un aurait une astuce pour que cela marche ou saurait me dire ce qui cloche ?


Dernière édition par Melodiam le Jeu 17 Mar 2016 - 14:53, édité 1 fois

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

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

Résolu Re: Page d'accueil qui se décale

Message par Miettes le Jeu 17 Mar 2016 - 14:24

Coucou Smile

J'ai l'impression que tu te compliques beaucoup la vie avec le placement de tes blocs Embarassed

Cela dit, si tu veux vraiment faire ça :

1) Place le fondimage en position relative
2) Place chacune de tes div en position "absolute"
3) Remplace :
- margin-top par top
- margin-left par left


ça devrait te simpliquer la vie pour placer tes blocs Embarassed

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil qui se décale

Message par Melodiam le Jeu 17 Mar 2016 - 14:53

Coucou Miettes !!! Very Happy

Oui je me suis bien compliquée la vie ahah
N'empêche grâce à tes conseils j'ai réussi, elle est correctement mise en place la PA !

Je te remercie GRANDEMENT hehe
Bonne après-midi !! ::fleur::

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

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

Résolu Re: Page d'accueil qui se décale

Message par Miettes le Jeu 17 Mar 2016 - 14:54

Ahh super ^^

Eh bien de rien et bonne continuation Smile

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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


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