Un bloc latéral

2 participants

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

Résolu Un bloc latéral

Message par Feuille d'Or Mer 3 Juil 2013 - 13:01

Bonjour, je voulais savoir,
Après avoir posé un bloc latéral sur son forum, je voulais savoir comment on peut l'embellir, par exemple mettre un cadre autour de son message, et comment , lorsque qu'on allait plus bas pour le forum, le bloc restait à sa première place (c'est-à-dire tout en haut)?

Comme ici par exemple:
Spoiler:


Dernière édition par Feuille d'Or le Mer 3 Juil 2013 - 13:21, édité 1 fois
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un bloc latéral

Message par Matriochka Mer 3 Juil 2013 - 13:05

Bonjour,

Pour ce faire, il faut ajouter des lignes dans la feuille de styles CSS.

Peux-tu me renvoyer ici ce que tu as dedans ?
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Un bloc latéral

Message par Feuille d'Or Mer 3 Juil 2013 - 13:07

Bien sûr
Voici:

Code:
/* ********** QUI EST EN LIGNE *********** */

    .statistiques{
    border:0px;
    background-repeat: no-repeat;
    background-position: left;
    height:270px;}

    .groupes{
    background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
    -moz-border-radius : 5px 5px 5px 5px;
    height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
    font-size:15px;font-weight: bold;text-align:center;
    text-decoration: none !important;}


.forumline {-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
padding: 1px;
}

body { cursor: crosshair }
a:hover { cursor:ne-resize; }

a {
font-variant: small-caps;
text-decoration: none!important;
}

a:hover {
text-decoration: none!important;
}

****************************************************************************************************************************

a.forumlink:link, a.forumlink:visited {
-moz-border-radius: 1px 1px 1px 1px;
background-color: #ffffff;
border-bottom: 1px solid #000000;
color: #000000;
font-family: Times New Roman;
font-size: 10px;
font-weight: lighter;
letter-spacing: 2px;
display:block;
text-align: left;
text-decoration: shadow !important;
text-shadow: black 1px 1px 2px;
}

a.forumlink:hover{
color: #888888;
letter-spacing: 2px;}



ul, li{  list-style: none;}.mon_onglet{  float: left;  padding: 2px 10px;  margin-right: 5px;  color: #333;  background: #E3C888;  border: 1px solid #DBB764;  cursor: pointer;  margin-bottom: -1px;}  .mon_onglet:hover{  background:#E3C888;}            .mon_onglet_selected{  float: left;  padding: 2px 10px;  margin-right: 5px;  color: #333;  background: #DBB764;  border-top: 1px solid #DBB764;  border-right: 1px solid #DBB764;  border-left: 1px solid #DBB764;    border-bottom: 1px solid #DBB764;    cursor: pointer;    margin-bottom: -1px;}              .clear{  clear: both;}.mon_contenu{  color: #666;  background: #E6D1A1;  border: 2px solid #DBB764;  padding: 100px;        margin: -1px;            }#mes_contenus, #mes_onglets{  width: 400px;}



#menu ul { div-align="center"; margin:0; padding:0; list-style-type:none; text-align:center; }#menu li { float:left; margin:auto; padding:0; background-color: #41528A; }#menu li a { display:block; width:96px; color: #C5CBEA; text-decoration:none; padding:5px; }#menu li a:hover { color:black; }#menu ul li ul { display:none; }#menu ul li:hover ul { display:block; }#menu li:hover ul li { float:none; }#menu li ul { position:absolute; }





div.infobulle
{
text-align: center;
 position: relative;
 float: left;
margin:8px;
}

div.infobulle span
{
 display: none;

}

div.infobulle:hover
{
  background: none;
  z-index: 999;
  color: #FCB56A;

}


div.infobulle:hover span
{
display: inline;
position: absolute;
top: 30px;
background-color: #44b3c7;
color:#000000;
 padding: 12px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
 white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
border: #FFFFFF 1px;
}

div#fixe {
position:absolute;
top:20px;}
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un bloc latéral

Message par Matriochka Mer 3 Juil 2013 - 13:08

Merci bien Smile

Donc la partie qui nous intéresse est là :
Code:
div#fixe {
position:absolute;
top:20px;}
Pour faire en sorte que le bloc suive la page, il faut remplacer absolute par fixed.

Pour faire un cadre, là tu peux utiliser :
Code:
background:#FFFFFF; /* couleur de fond du cadre */
border:1px solid #000000; /* bord du cadre */
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Un bloc latéral

Message par Feuille d'Or Mer 3 Juil 2013 - 13:10

Merci (:
Et pour que ce soit un rond complet? Et centré?
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un bloc latéral

Message par Matriochka Mer 3 Juil 2013 - 13:12

Pour ça, il faut ajouter :
Code:
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Un bloc latéral

Message par Feuille d'Or Mer 3 Juil 2013 - 13:15

Mais le texte déborde, et n'est pas centré, je fais quoi dans ces cas-là =/
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un bloc latéral

Message par Matriochka Mer 3 Juil 2013 - 13:17

Tu ajoutes une marge à l’intérieur avec :
Code:
padding:30px;
Tu peux changer 30px au besoin.

Si tu as besoin, n’hésite pas à te documenter ici :
https://forum.forumactif.com/t301866-le-css-comment-ca-marche
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Un bloc latéral

Message par Feuille d'Or Mer 3 Juil 2013 - 13:21

Merci beaucoup, je sais pas comment je peux faire pour te remercier comme tu le mérites, mais merci beaucoup, tu es très patient et tu expliques super bien, merci encore (: ♥
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or 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