Image page d'accueil

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

Résolu Image page d'accueil

Message par Popy le Mer 12 Sep 2012 - 18:11

Bonsoir,

J'ai créer un code a mettre sur la PA mais il y a un petit soucis, voyez vous même Smile



Comment mettre le cadre a la taille exacte de l'image, ou alors remonter l'image pour qu'elle sois DANS le cadre et non a moiter en dessous..

Merci d'avance !


Dernière édition par Popy le Dim 16 Sep 2012 - 14:58, édité 1 fois

Popy
***

Féminin
Messages : 151
Inscrit(e) le : 29/09/2010

http://sicret-dream.forums-actifs.com/
Popy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image page d'accueil

Message par Kinotto le Mer 12 Sep 2012 - 18:13

    Bonjour,

    Tout dépend de la taille de l'image. Soit vous réduisez la taille de l'image, soit celle du cadre.

    Cordialement,
    spiderman

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image page d'accueil

Message par Invité le Mer 12 Sep 2012 - 21:31

Bonjour,

La taille de votre cadre est trop petite par rapport à la hauteur de votre image.
Il faut aller dans votre CSS et modifier le code qui gère la hauteur du cadre.
Ce sera une balise height.

Invité
Invité


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

Résolu Re: Image page d'accueil

Message par Popy le Jeu 13 Sep 2012 - 18:40

Merci Gwelallyn, par contre je ne trouve pas quel partie du CSS est le code que je doit modifier :/

quelqu'un peu m'aider ?

Le code CSS:
Code:
body
{background-position: top center;
}


a {
font-variant: small-caps;
}


th {
font-family:monospace; (police)
text-align: center; (pour aligner le texte)
}


.forumline{border:2px dotted #ff8196;
}

a.forumlink {
font-family: monospace;
background-color: ; (couleur du fond)
display: block; (affiche sous forme de "bloc" si tu spécifies pas la largeur, il prendra toute la largeur)
font-weight: bold; (met la police en gras)
text-align: center;
border-bottom: 1px dashed #C799B8; (ajoute une bordure en dessous)
color : #B56B4F; (couleur du titre du forum)
}


.postdetails.poster-profile a img {
border:4px solid #FFFFFF;
border-left: 6px solid #FFFFFF;
border-right: 6px solid #FFFFFF;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

a { text-decoration: none; }

tr.post td {padding-left: 20px;}

h2.titre1 span {
  padding: 2px 10px 2px 5px; /* Dans l'ordre: padding-top padding-right padding-bottom padding-left */
  margin-left: 10px; /* Décaler le titre par rapport aux paragraphes normaux */
  border-left: 5px solid #458EFF;
  border-bottom: 2px dotted #458EFF;
  color: #be4d5d;
}
h2.titre2 {
  display: inline; /* Ne plus considérer le titre comme un bloc */
  /* Après, c'est la même chose que pour titre1 : */
  margin-left: 10px;
  padding: 2px 10px 2px 5px;
  border-left: 5px solid #458EFF;
  border-bottom: 2px dotted #458EFF;
  color: #BE4D5D;
}


a {
  text-shadow: 1px 1px 1px #ffbbbf;
}




.infobulle{position: relative;z-index: 0;}

.infobulle:hover{background-color: transparent;z-index: 50;}



.infobulle span{
position: absolute;
background-color: #abb8c8;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{
border: 1px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 90px ;
color:#FFFFFF;
border: 3px dotted #f36f71;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}




 /*Bulle autour du message*/
    .bulle{
    background-color : #fcdbe5; /*couleur du fond de la bulle*/
    border : 1px solid #df596a; /*couleur de la bordure*/
    -moz-border-radius: 15px ; /*adapter les arrondis en réglant le 10px des 4 phrases*/
    -webkit-border-radius:10px;
    -border-radius:10px;
    -khtml-border-radius:10px;
    padding : 5px; /*espacement interne obligatoire pour éviter les débordements de texte et d'images*/
    }

    /*Image du triangle de la bulle*/
    .attache {
      background-image : url("http://img11.hostingpics.net/pics/278717ggg.png"); /*Image du triangle de la bulle à vous de faire la votre, vous pouvez prendre modèle sur la mienne*/
    width: 20px; /*largeur de l'image à remettre, obligatoire*/
    height :20px; /*hauteur de l'image à remettre, obligatoire*/
    position : relative;
    top :50px; /*à régler si besoin il s'agit de la position en hauteur initiale de l'image par rapport à celle qu'elle aura en visuel, obligatoire*/
    left :-19px; /*idem, mais en largeur, calculer facilement, largeur de l'image -1, obligatoire*/
    }

.fondperso {
 background-image : url("http://img4.hostingpics.net/pics/701182fond.png");
}



.colorpicker {
  width: 356px;
  height: 176px;
  overflow: hidden;
  position: absolute;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
  font-family: Arial, Helvetica, sans-serif;
  display: none;
}
.colorpicker_color {
  width: 150px;
  height: 150px;
  left: 14px;
  top: 13px;
  position: absolute;
  background: #f00;
  overflow: hidden;
  cursor: crosshair;
}
.colorpicker_color div {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  overflow: hidden;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
  margin: -5px 0 0 -5px;
}
.colorpicker_hue {
  position: absolute;
  top: 13px;
  left: 171px;
  width: 35px;
  height: 150px;
  cursor: n-resize;
}
.colorpicker_hue div {
  position: absolute;
  width: 35px;
  height: 9px;
  overflow: hidden;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
  margin: -4px 0 0 0;
  left: 0px;
}
.colorpicker_new_color {
  position: absolute;
  width: 60px;
  height: 30px;
  left: 213px;
  top: 13px;
  background: #f00;
}
.colorpicker_current_color {
  position: absolute;
  width: 60px;
  height: 30px;
  left: 283px;
  top: 13px;
  background: #f00;
}
.colorpicker input {
  background-color: transparent;
  border: 1px solid transparent;
  position: absolute;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #898989;
  top: 4px;
  right: 11px;
  text-align: right;
  margin: 0;
  padding: 0;
  height: 11px;
}
.colorpicker_hex {
  position: absolute;
  width: 72px;
  height: 22px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
  left: 212px;
  top: 142px;
}
.colorpicker_hex input {
  right: 6px;
}
.colorpicker_field {
  height: 22px;
  width: 62px;
  background-position: top;
  position: absolute;
}
.colorpicker_field span {
  position: absolute;
  width: 12px;
  height: 22px;
  overflow: hidden;
  top: 0;
  right: 0;
  cursor: n-resize;
}
.colorpicker_rgb_r {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
  top: 52px;
  left: 212px;
}
.colorpicker_rgb_g {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
  top: 82px;
  left: 212px;
}
.colorpicker_rgb_b {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
  top: 112px;
  left: 212px;
}
.colorpicker_hsb_h {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
  top: 52px;
  left: 282px;
}
.colorpicker_hsb_s {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
  top: 82px;
  left: 282px;
}
.colorpicker_hsb_b {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
  top: 112px;
  left: 282px;
}
.colorpicker_submit {
  position: absolute;
  width: 22px;
  height: 22px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
  left: 322px;
  top: 142px;
  overflow: hidden;
}
.colorpicker_focus {
  background-position: center;
}
.colorpicker_hex.colorpicker_focus {
  background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
  background-position: bottom;
}
.colorpicker_slider {
  background-position: bottom;
}



.forumline {
    -moz-border-radius: 20px ;
    -webkit-border-radius:20px;
    -border-radius:20px;
    -khtml-border-radius:20px;
background-color : #ffd6f7;
padding : 5px;}


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

a { text-decoration: none ; }


a.imginfo {
  position: relative;
  color: #7d7d7d;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  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é */
  top: 30px; /* on positionne notre infobulle */
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #ff8196;
  border-right: 3px solid #ff8196;
  border-top: 3px solid #ff8196;
  border-bottom: 5px solid #ff8196;
}

a.forumlink, a.forumlink:hover{
display: block;
font-weight: bold;
text-decoration:none !important;
text-transform:small-caps;
text-align: center;}

.forumline {
 border: 1px dotted #ff8196;
 }

a {font-variant: small-caps;}

a.forumlink:hover{
  text-align: center;
  border-bottom: 1px dashed #b3ff58;
  border-left: 2px solid #b3ff58;
  border-right: 2px solid #b3ff58;
  font-variant: small-caps;
  background-color: #b3ff58;}

a.forumlink:hover{
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
}

a.forumlink{
  text-align: center;
  border-bottom: 1px dashed #b3ff58;
  border-left: 2px solid #b3ff58;
  border-right: 2px solid #b3ff58;
  font-variant: small-caps;
  background-color: #b3ff58;}

a.forumlink{
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
}

input,textarea, select {
 background: #EDE9D8;
 border: 1px #baa882 solid;
 border-radius: 9px 9px;
 -moz-border-radius: 9px;}

.categorylink
{border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #b3ff58;}

.categorylink a
{color: #57441C;}

.categorylink a:hover
{color: #8C7543;}

.onglet
{background-color: #b3ff58;
padding-right: 8px;
padding-left: 8px;
padding-bottom: 2px;
text-transform: small-caps;
-moz-border-radius:7px 7px 0px 0px;}


tr.post span.gensmall { display: none; }


.dersuj {
background-color : #cbff77;
padding : 5px;
text-align : center;
-moz-border-radius: 20px ;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;
border : 2px solid #f28892;
}


.groupes
{
background-color:#FFD6F7; /* FOND DES NOMS DE GROUPES */
border: 1px #ACACAC dotted; /* POUR METTRE LE CONTOUR EN POINTILLES */
-moz-border-radius : 5px 5px 5px 5px; /* ARRONDI DES CONTOURS */
height:40px; /* HAUTEUR DES ENCADRES */
padding-right:12px; /* SÉPARATION ENTRE LES GROUPES */
padding-left:12px;
padding-bottom:3px;
font-size:9px; /*TAILLE ECRITURE */
font-weight: bold; /* STYLE DE L'ECRITURE */
text-align:center;
text-decoration: none !important;
}

i { color: #F26F7F; }

.name{
font-size:16px;
letter-spacing:2px;
}

.descritp {
border : 1px solid #f28ca2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.nav img {
display : none;
}

        .mon_onglet{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #000;
          background: #fff;
          border: 1px solid #000;}
     
        .mon_onglet:hover{
          background: #b8efa1;}
       
        .mon_onglet_selected{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #000;
          background: #fff;
          border: 1px solid #000;}
             
        .clear{
          clear: both;}
     
        .mon_contenu{
          color: #000;
          background: #fff;
          border: 1px solid #000;
          padding: 10px;
          margin: 10 px;
          height: 120px;
          line-height: normal;
          font-size: 11px;}
     
        #mes_contenus, #mes_onglets{
          height: 100%;
          width:100%;}

QUEEL personalisé :
.statistiques
{
border:0px;
background-image: url("http://img15.hostingpics.net/pics/556959tinypic.png");
background-repeat: no-repeat;
background-position: center;
height:270px; /* HAUTEUR DE VOTRE IMAGE DE FOND, C'EST UNE VARIABLE */
}

Popy
***

Féminin
Messages : 151
Inscrit(e) le : 29/09/2010

http://sicret-dream.forums-actifs.com/
Popy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image page d'accueil

Message par Nyko-neko le Jeu 13 Sep 2012 - 19:29

Bonjour, je ne viens pas en aide(désolé) mais pourais-je avoir le tutoriel de ton tableau? car je cherche ceci depuis un moment, si tu es d'accord pour me le passé(tu sera crédité bien sur, enfin ton forum)

Nyko-neko
****

Masculin
Messages : 306
Inscrit(e) le : 10/06/2012

http://fairytale-world.forums-rpg.com/
Nyko-neko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image page d'accueil

Message par Invité le Ven 14 Sep 2012 - 7:32

@Popy a écrit:Merci Gwelallyn, par contre je ne trouve pas quel partie du CSS est le code que je doit modifier :/

quelqu'un peu m'aider ?
Malheuruesement on ne peut pas deviner quel nom tu as mis a ton code CSS pour ce tableau. Il serait donc judicieux de nous donner aussi le code de ta PA^^

Invité
Invité


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

Résolu Re: Image page d'accueil

Message par Popy le Ven 14 Sep 2012 - 18:41

nyko-neko # Desolé ça fait très longtemps, donc je me rappelle pas du tout :/ Mais je pense que je peux te passer les codes ect Wink

Gwelallyn # De la PA ? ce code la ?
Code:
        <table style="margin: auto;"><tr><td><div id="mes_onglets">
            <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Home </span>
                <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">News du fow'</span>
                <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff de T-dream</span>
                <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Credits & Partenaires</span></td><td>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu"><img src="http://img15.hostingpics.net/pics/409797titi.png" border="0" alt="" /></div>
            <div id="co_2" class="mon_contenu" style="display: none;"><img src="http://img15.hostingpics.net/pics/545764titi.png" border="0" alt="" /></div>
            <div id="co_3" class="mon_contenu" style="display: none;"><img src="http://img15.hostingpics.net/pics/471843titi.png" border="0" alt="" /></div>
            <div id="co_4" class="mon_contenu" style="display: none;"><img src="http://img11.hostingpics.net/pics/380587titi.png" border="0" alt="" /></div>
        </div></div></div></td></tr></table>

Popy
***

Féminin
Messages : 151
Inscrit(e) le : 29/09/2010

http://sicret-dream.forums-actifs.com/
Popy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image page d'accueil

Message par Nyko-neko le Ven 14 Sep 2012 - 20:11

Merci Popy# tu pourrais le faire par message privé s'il te plais?

Nyko-neko
****

Masculin
Messages : 306
Inscrit(e) le : 10/06/2012

http://fairytale-world.forums-rpg.com/
Nyko-neko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image page d'accueil

Message par Invité le Dim 16 Sep 2012 - 9:40

Bonjour,

Non pas ce code là.
Celui qui se trouve dans Affichage > Généralités.

Invité
Invité


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

Résolu Re: Image page d'accueil

Message par no_way le Dim 16 Sep 2012 - 10:33

Bonjour, remplacez le code CSS suivant:
Code:
.mon_contenu{
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 10 px;
height: 120px;
line-height: normal;
font-size: 11px;}
par celui-ci:
Code:
.mon_contenu{
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 10 px;
height: 164px;
line-height: normal;
font-size: 11px;}

Je n'ai modifié que la hauteur « height: n px ».

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image page d'accueil

Message par Popy le Dim 16 Sep 2012 - 14:56

Bonjour,
Gwelallyn # C'est justement celui que je viens de donner..

No_way # GENIAL ! Mercii beaucoup Very Happy

Popy
***

Féminin
Messages : 151
Inscrit(e) le : 29/09/2010

http://sicret-dream.forums-actifs.com/
Popy 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