Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Jeu 7 Mar 2013 - 20:12
coucou ,

Voilà un type de P.A avec les derniers sujets sur le bloc en haut à gauche.
L'aperçu:



Il faut que le widget des derniers sujets soit activé sur le portail  hinhin .

Le code html est prêt à l'emploi.
Il suffit de le placer dans la P.A:
Affichage/Page d'acceuil/Généralités/Message sur la page d'accueil

Le code HTML a déposer et a compléter avec vos préférences sauf pour le bloc en haut à gauche qui lui est réservé
aux derniers sujets  clin oeil .

Les cinq autres blocs sont pourvus d'un overflow-y:auto
ce qui signifie que le navigateur donnera un ascenseur si le contenu inséré est trop important,
un ascenseur sur la verticale se positionnera.

Le contenu de chaque bloc se trouve entre la balise
Code:
<div> et </div>

Copier coller ce code puis la css qui est truffée de commentaires pour une facilité de compréhension.
Puis regardez l'effet et ensuite agissez avec précaution pour toutes modifications  hinhin .


Code:

<div id="M14_pa"><div class="M14_haut">
              <div class="bloc_haut_gauche">
<p>Les derniers sujets</p><br><div>
    <p  id="comments_scroll_div" valign="middle">
<iframe name="ifr" style="visibility: hidden; width: 0px; height: 0px;" src="/portal.forum" onLoad="var ifr=window.ifr.document.getElementById('comments_scroll_div');document.getElementById('comments_scroll_div').innerHTML=ifr.innerHTML;"></iframe>
</p>
</div>
                 </div>
                  <div class="bloc_haut_centre"><p>Contenu haut centre</p><br>
<div>
Bella nec quos opposita possidere cuncta iactitant in saevissima.
</div>

               </div>
           <div class="bloc_haut_droit"><p>Contenu haut droit</p><br>
<div>
Ubi viam insidiarum sub qui sorte oppigneratos latebrae fatorum agente in latebrae domesticis certus agente venit Apodemio qua certus permutatione itaque venit elegerat deflecti deflecti deflecti agente milites et praestitutum itaque spoliari beneficiis erat praemiis cum beneficiis viam ulla ducens beneficiis permutatione permutatione milites Apodemio suis sunt Petobionem ducens erat repente ducens praemiis spoliari vita rebus insidiarum Barbatio insidiarum latebrae spoliari posse nec Apodemio qui praestitutum milites sub Noricorum imperator omnes nec nec in imperio nec qua domesticis apparuit itineribus itineribus fatorum comes erat vita posse imperator Petobionem interiectis certus comes fatorum Petobionem rebus spoliari deflecti milites ulla ulla reseratae.
</div>

          </div>
</div><div class="M14_bas">

          <div class="bloc_bas_gauche"><p>Contenu bas gauche</p><br>
<div>
Exitiosa ut eum Eusebius opera ut est verum eum praepositus hoc turbulentos praepotens missus perferens Galli praepositus consenuit aurum acueret navata exitiosa eum est praefecti et fiduciam hoc Eusebius acueret opera consulta insidiarum verum hoc abunde fiduciam insidiarum militum per praedicto periret et dilato turbulentos per periret acueret eum opera praefecti hocque eum est opera militum secum concitores verum per et secum consulta tuto salus in praefecti et ut est mota praepotens turbulentos praepotens avunculus turbulentos deinde hoc seditionum militum tuto et astute die perlato hoc et ut Galli perlato acueret cubiculi praedicto praepotens castra mota verum occultius missus sunt.

</div>
          </div>
            <div class="bloc_bas_centre"><p>Contenu bas centre</p><br>
<div>
Exitiosa ut eum Eusebius opera ut est verum eum praepositus hoc turbulentos praepotens missus perferens Galli praepositus consenuit aurum acueret navata exitiosa eum est praefecti et fiduciam hoc Eusebius acueret opera consulta insidiarum verum hoc abunde fiduciam insidiarum militum per praedicto periret et dilato turbulentos per periret acueret eum opera praefecti hocque eum est opera militum secum concitores verum per et secum consulta tuto salus in praefecti et ut est mota praepotens turbulentos praepotens avunculus turbulentos deinde hoc seditionum militum tuto et astute die perlato hoc et ut Galli perlato acueret cubiculi praedicto praepotens castra mota verum occultius missus sunt.
</div>

                  </div>
         <div class="bloc_bas_droit"><p>Contenu bas droit</p><br>
<div>
Exitiosa ut eum Eusebius opera ut est verum eum praepositus hoc turbulentos praepotens missus perferens Galli praepositus consenuit aurum acueret navata exitiosa eum est praefecti et fiduciam hoc Eusebius acueret opera consulta insidiarum verum hoc abunde fiduciam insidiarum militum per praedicto periret et dilato turbulentos per periret acueret eum opera praefecti hocque eum est opera militum secum concitores verum per et secum consulta tuto salus in praefecti et ut est mota praepotens turbulentos praepotens avunculus turbulentos deinde hoc seditionum militum tuto et astute die perlato hoc et ut Galli perlato acueret cubiculi praedicto praepotens castra mota verum occultius missus sunt.
</div>
</div>
</div>
</div>



Cliquez sur le bouton  Enregistr  .

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Collez ceci:


Code:

/*La pa dans sa totalité*/
#M14_pa
{
width:800px;
height:300px;
background:black;
border:1px solid green;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

/*le bloc du haut qui va contenir les trois blocs*/
.M14_haut
{
width:780px;
height:120px;
background:orange;
margin:10px;
border:1px solid green;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
  
/*le premier bloc a gauche en haut*/
.bloc_haut_gauche
{
float:left;
position:relative;
width:250px;
height:110px;
margin:5px;
background:red;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* le titre du bloc a gauche en haut*/
.bloc_haut_gauche p
{
text-align:center;
font-size:12px;
color:white;
}
/* le contenu du bloc a gauche en haut*/
.bloc_haut_gauche div
{
padding-left:3px;
font-size:11px;
color:black;
}
/*la hauteur et largeur du bloc des dernies sujets*/
#comments_scroll_container
{
margin-top:-30px;
width:200px;
height:70px;
font-size:10px;
color:black;
}
/*la couleur des liens du menu des derniers sujets*/
#comments_scroll_container  a
{
font-size:10px;
color:#ffffff;
text-decoration:none;
}

/*le deuxieme bloc centre en haut*/
.bloc_haut_centre
{
float:left;
position:relative;
width:250px;
height:110px;
margin:5px;
background:red;
overflow-y:auto;
text-align:left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* le titre du bloc centre en haut*/
.bloc_haut_centre p
{
text-align:center;
font-size:12px;
color:white;
}
/* le contenu du bloc centre en haut*/
.bloc_haut_centre div
{
padding-left:3px;
font-size:11px;
color:black;
}

/*le troisieme bloc a droite en haut*/
.bloc_haut_droit
{
float:left;
position:relative;
width:250px;
height:110px;
margin:5px;
background:red;
overflow-y:auto;
text-align:left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* le titre du bloc a droite en haut*/
.bloc_haut_droit p
{
text-align:center;
font-size:12px;
color:white;
}
/* le contenu du bloc a droite en haut*/
.bloc_haut_droit div
{
padding-left:3px;
font-size:11px;
color:black;
}

/*le bloc du bas qui va contenir les trois blocs du bas*/
.M14_bas
{
width:780px;
height:120px;
background:green;
margin:10px;
border:1px solid green;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*le premier bloc a gauche en bas*/
.bloc_bas_gauche
{
float:left;
position:relative;
width:250px;
height:110px;
margin:5px;
background:red;
overflow-y:auto;
text-align:left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* le titre du bloc a gauche en bas*/
.bloc_bas_gauche p
{
text-align:center;
font-size:12px;
color:white;
}
/* le contenu du bloc a gauche en bas*/
.bloc_bas_gauche div
{
padding-left:3px;
font-size:11px;
color:black;

}
/*le deuxieme bloc centre en bas*/
.bloc_bas_centre
{
float:left;
position:relative;
width:250px;
height:110px;
margin:5px;
background:red;
overflow-y:auto;
text-align:left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* le titre du bloc centre en bas*/
.bloc_bas_centre p
{
text-align:center;
font-size:12px;
color:white;
}
/* le contenu du bloc centre en bas*/
.bloc_bas_centre div
{
padding-left:3px;
font-size:11px;
color:black;

}
/*le troisieme bloc a droite en bas*/
.bloc_bas_droit
{
float:left;
position:relative;
width:250px;
height:110px;
margin:5px;
background:red;
overflow-y:auto;
text-align:left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}


/* le titre du bloc droit en bas*/
.bloc_bas_droit p
{
text-align:center;
font-size:12px;
color:white;
}
/* le contenu du bloc droit en bas*/
.bloc_bas_droit div
{
padding-left:3px;
font-size:11px;
color:black;
}



Pensez à valider les modifications en cliquant sur le bouton   Valid.

Voilà c'est tout pour le moment  clin oeil





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus