Lakxi
{ Membre }
Messages : 54
| bonsoir, alors dans un premier je désolée pour ce titre, je ne sais pas trop comment pouvoir décrire mon problème sans les images. - le problème:
comme vous le voyez, le pseudo et tout ce qui l'entour passent par dessus la barre de navigation, or lorsque je de descends un peu plus bas, l'avatar + les champs de profil passe très bien en dessous de la barre de navigation, chose que je souhaite désirer pour ce que je vous ai indiquer précédemment. Je n'arrive pas à trouver le problème, si vous pourriez m'éclairer voici mon css - Code:
-
#i_logo {margin-bottom: -5px; } tr.post span.gensmall { display: none; } html, body { margin: 0; padding: 0; }
/*body , forum, catégorie, qeel*/ body { background-image: url("http://i48.tinypic.com/o55ldk.png"); background-position: top center; background-repeat:no-repeat }
.bodyline {border-right: 15px #C7C966 solid; border-left: 15px #C7C966 solid;}
.forumline {color: none; background-image: url("http://i50.tinypic.com/2rqjb6p.jpg"); border-bottom: 15px #E6C6B5 solid; margin-top: 40px; padding-right:20px; padding-left:20px; padding-bottom:5px; padding-top:5px; -webkit-border-bottom-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; -moz-border-radius-bottomleft: 50px; -moz-border-radius-bottomright: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 50px; -o-border-radius-bottomleft: 50px; -o-border-radius-bottomright: 50px; -o-border-radius-topleft:50px; -o-border-radius-topright: 50px; text-align:justify; line-height:10px; font-size:11px; font-family:helvetica; text-shadow: #FFEFD5 1px 1px 1px;}
.forumlink{ font-family: Crushed; margin-top:3px; margin-bottom:2px; letter-spacing: -1px; margin-left: 10px; font-size:20px; display: block; color: #F7F7F7; /* Couleur de départ */ text-align: left; transition: all 1s; /* Durée de la transition, mettez les mêmes valeurs partout, ça sera plus facile */ -moz-transition: all 1s; -webkit-transition: all 1s;} a.forumlink:hover{ color: #FF7F50; /* Couleur d'arrivée */ text-shadow:1px 1px 1px gray; margin-left: 30px; /* Décalement ( nombre de px à décaler pour l'arrivée)*/ transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s;}
.catégorie { color: #E6425C; margin-left:90px; margin-bottom:30px; text-shadow: 1px 1px 1px white; text-align: center; text-transform: none; margin-top:-10px; font-size: 50px; font-family:over the rainbow;}
.lastpost{ padding: 2px; font-family: helvetica; font-size: 12px; letter-spacing: -1px; background: #FFFAF0; color: #000; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -o-border-radius: 5px; }
.nsujets{ text-transform: uppercase; font-family:helvetica; letter-spacing: -1px; }
.titres { text-align : center; color : white; text-shadow : 0px 0px 5px white; text-transform : uppercase; font-size : 20px; font-family : Calibri;}
.forum { width:95%; height:77px; font-size:11px; color:#A39587; line-height:11px; font-family:helvetica; border-left:5px solid transparent; padding-left:6px; padding-right:10px; padding-top:10px; border-radius:17px; -webkit-border-radius:17px; -moz-border-radius:17px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;} .forum:hover { width:95%; height:77px; font-size:11px; color:#A39587; line-height:11px; font-family:helvetica; background-color : rgba(234,234,234,0.6); padding-top:10px; padding-left:6px; padding-right:10px; border-left:5px solid #94D6C9; border-radius:17px; -webkit-border-radius:17px; -moz-border-radius:17px; -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out;}
.sousforum { margin-left:6px; text-align:left; width:87%; height:65px; font-size:10px; font-family:trebuchet ms; background-color : rgba(234,234,234,0.6); border:2px dashed transparent; border-bottom:2px dashed transparent; padding:10px; padding-top:7px; padding-left:7px; border-radius:17px; -webkit-border-radius:17px; -moz-border-radius:17px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;} .sousforum:hover { text-align:left; width:87%; height:65px; font-size:10px; text-transform:uppercase; color:#66CDAA; background-color : rgba(234,234,234,0.6); font-family:trebuchet ms; border:2px dashed transparent; padding:10px; padding-top:7px; padding-left:7px; border-radius:0px 40px 0px 40px; -webkit-border-radius:0px 40px 0px 40px; -moz-border-radius:0px 40px 0px 40px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;}
.lastpost2 { height:56px; text-align:center; margin-top:-23px; padding-top:22px; border-radius:17px; border-right:5px solid transparent; -webkit-border-radius:17px; -moz-border-radius:17px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;} .lastpost2:hover { text-align:center; margin-top:-23px; padding-top:22px; background-color : rgba(234,234,234,0.6); border-radius:17px; border-right:5px solid #C7C966; -webkit-border-radius:17px; -moz-border-radius:17px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;}
body.chatbox { background-color: #F2EFEF; -webkit-border-bottom-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; -moz-border-radius-bottomleft: 50px; -moz-border-radius-bottomright: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 50px; -o-border-radius-bottomleft: 50px; -o-border-radius-bottomright: 50px; -o-border-radius-topleft:50px; -o-border-radius-topright: 50px;} .catHead { border: none !important;} .catBottom { border: none !important;} .thLeft { border: none !important;} .thRight { border: none !important;} .row3Right { border: none !important;}
/*page d'accueil*/ .pageaccueil{ background-color:#F2EFEF; border-bottom: 15px #E6C6B5 solid; -webkit-border-bottom-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; -moz-border-radius-bottomleft: 50px; -moz-border-radius-bottomright: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 50px; -o-border-radius-bottomleft: 50px; -o-border-radius-bottomright: 50px; -o-border-radius-topleft:50px; -o-border-radius-topright: 50px; text-align:justify; line-height:10px; font-size:11px; font-family:helvetica; width:95%; background-repeat: no-repeat; background-position: center; } .cadregauche { border-left:10px solid #94D6C9; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; line-height:11px; padding:10px;} .cadredroite { border-right:10px solid #94D6C9; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; line-height:11px; padding:10px;}
.partenaires { opacity : 0.5; -moz-transition : opacity 1s; -webkit-transition : opacity 1s;} .partenaires:hover { opacity : 1; } .charstat { width:100px; padding:3px; background-color:#E8E3E3; font-family:trebuchet ms; font-size:10px; color:#fff; text-transform:uppercase; text-align:center; -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; } .charstat:hover { width:100px; padding:3px; background-color:#DED8D8; font-family:trebuchet ms; font-size:10px; color:#fff; text-transform:uppercase; text-align:center; -webkit-border-radius:15px; -moz-border-radius:15px; -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; }
/*petites choses*/ .soustitre { text-transform:uppercase; font-family:tulpen one; font-size:20px; color: #66CDAA; letter-spacing: 5px;}
.validation { width:400px; text-align:justify; border-radius:25px; background-color:#EAEAEA; border:5px solid #FFFFF0; color:#A39587}
.titreficherose { font-family:tulpen one; font-size:30px; margin-bottom:-7px; letter-spacing:10px; color:#C7C966}
.cadrefiche { width:410px; background-color: none; border-radius:15px; text-align:justify; padding:10px; line-height:10px; font-size:11px; color:#A39587 } .modèlefiche { width:450px; background-color: #EAEAEA; border-bottom:4px double #D2BD73 ; border-top:none; color:#A39587 }
.nomforum { font-size:11px; text-align:center; margin-bottom:-15px; letter-spacing:-1px; }
.postbody { text-align:justify; padding:10px; font-size:12px; background-color:#FFFFFF; background-color : rgba(255,255,255,0.5); border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; } .titres { text-align : center; color : white; text-shadow : 0px 0px 5px white; text-transform : uppercase; font-size : 20px; font-family : Calibri;} .navtop { position: fixed; background-color:#F2EFEF; height:20px; margin-top:-3px; padding:2px; border:3px solid transparent; width:99%; valign : center ; text-transform: uppercase;} .navtop:hover { background-color:#F2EFEF; height:20px; margin-top:-3px; padding:2px; position: fixed; border:3px solid #C7C966; width:99%; valign : center ; text-transform: uppercase; border-radius:0px 0px 30px 30px; -webkit-border-radius:0px 0px 30px 30px; -moz-border-radius:0px 0px 30px 30px;}
.qeel { width:627px; text-align:justify; line-height:10px; font-size:10px; padding:10px; font-family:helvetica; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;} .titreqeel { font-family:over the rainbow; margin-top:30px; margin-bottom:-35px; color:#66CDAA; font-size:40px; text-shadow: 1px 1px 1px white;} .qeelgauche { margin-right:-3px; border-right:10px solid #E6C6B5; border-radius:25px 0px 0px 25px; -webkit-border-radius:25px 0px 0px 25px; -moz-border-radius:25px 0px 0px 25px; line-height:11px; padding:10px; background-color:#F2EFEF} .qeeldroite { margin-left:-3px; border-radius:0px 25px 25px 0px; -webkit-border-radius:0px 25px 25px 0px; -moz-border-radius:0px 25px 25px 0px; line-height:11px; padding:10px; background-color:#F2EFEF}
.groupes{ text-transform: uppercase; font-family: helvetica; text-shadow: 1px 1px 1px white; letter-spacing: -1px; text-align:justify; font-size:15px; width:700px; } .lconnected { height:125px; overflow:auto; text-align:justify; line-height:10px;} .gensmall2 { text-align:justify; font-size:10px; height:70px; overflow:auto } .messagefin { valign:center; font-size:7px; line-height:8px; font-family:helvetica; text-transform:uppercase; text-align:justify; width:300px; color:#B3B3B3;} .mainmenu { font-family:helvetica; font-weight: bold; font-size:12px; letter-spacing: -1px;} .quote { border:5px solid #FFFFF0; border-radius:10px; padding:7px; } .code { border:5px solid #FFFFF0; border-radius:10px; padding:7px; color:#A39587 } h{font: bold; text-transform: uppercase; font-family: helvetica; letter-spacing: -1px; color: white; text-shadow:0px 2px 2px #DC143C;} v{ color:white; text-shadow: 0px 2px 1px #DC143C; font: 45px over the rainbow; margin-top:-20px; }
/*pofil*/ .avatar_mess { -webkit-border-top-left-radius: 40px; -webkit-border-top-right-radius: 40px; -moz-border-radius-topleft: 40px; -moz-border-radius-topright: 40px; border-top-left-radius: 40px; border-top-right-radius: 40px; display: block; padding-top:-50px; width: 200px; margin-top:40px; margin-left: -10px; margin-right: 10px; overflow: hidden; border: 8px solid #F8F8FF; border-top:none; box-shadow: 1px 2px 1px #94D6C9; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;} .avatar_mess:hover { margin-left: 5px; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;} .profil_mess { position: absolute; display: block; width: 190px; height: 310px; margin: auto; padding: 5px; background: #EBEBEB; color: #A39588; font-size: 10px; text-align:justify; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;} .profil_mess:hover { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;} .pseudo_mess { position: relative; z-index: 2; -webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-topright: 100px; border-top-left-radius: 100px; border-top-right-radius: 100px; width: 200px; margin-top:-2px; margin-left: -8px; display: block; overflow: hidden; text-align: center; font-size: 20px; letter-spacing:-1px; text-transform: uppercase; font-family: helvetica; font-weight: bold; text-shadow: #FFEFD5 1px 1px 1px; background: #EBEBEB; padding-top: 5px; padding-bottom:5px; border: 8px solid #F8F8FF; box-shadow: 1px 0px 0px #94D6C9; border-bottom: 2px dashed #E6C6B5; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;} .profilentour { text-transform: none ; letter-spacing: 0px; text-shadow: #FFEFD5 1px 1px 1px; display: block; overflow: hidden; background-color: #F2EFEF; overflow: hidden; background: #94D6C9; box-shadow: 1px 2px 1px #94D6C9; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;} .rank { font-family: helvetica; text-transform: uppercase; text-align: center; letter-spacing: -1px; font-size: 15px; text-shadow: #FFEFD5 1px 1px 1px; border-bottom: 2px dashed #E6C6B5; } a {text-decoration:none;} A:link {text-decoration: none !important;} A:visited {text-decoration: none !important;} A:active {text-decoration: none !important;} A:hover {text-decoration: none !important; letter-spacing:2px} .rightpart { font-size : 12px; color: #A6A89A; border-left:2px dotted red; padding-left: 10px; }
/* ------------- présentation */ /*premiere image*/ div.infobulle { position: relative; cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/ display: inline-block; /*Place les icones un à côté de l'autre */ margin: 10px; /* marge entre les icones */} div.infobulle img { width:450px; -webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-topright: 100px; border-top-left-radius: 100px; border-top-right-radius: 100px;} div.infobulle div{ display: none; /* ceci masque l'infobulle */} div.infobulle:hover { background: none; /* correction d'un bug IE */ z-index: 500; /* on définit une valeur pour l'ordre d'affichage */} div.infobulle:hover div{ display: block; /* ceci affiche l'infobulle */ position: absolute; font-size:10px; text-shadow: none; letter-spacing: none; text-align:justify; width: 300px; /* Largeur de l'infobulle */ top: 50px; /* on positionne notre infobulle */ left: 0px; background-color: #EEEAEA; /* Couleur de fond */ -webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */ -moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */ border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */ -webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */ -moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */ box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */ border-left: 6px double #66CDAA; padding: 10px;} /* marge interne de l'infobulle */ /*fin premiere image*/ /* ------------- FIN FICHE présentation */
/*ROTATION+INFO BULLE*/ /* BLOC CONTENANT L'INFOBULLE - L’ICÔNE */ .transition-NU{ position: relative; width: 130px; float: left; margin: 0px; }
/* INFOBULLE */ .NU_transition{ background: #E8E3E3; border-right:5px solid #F17890; width: 0; height: 0; overflow: hidden; position: absolute; left:80px; top: 0; z-index: 999; padding: 0; text-align: center; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; -webkit-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur webkit */ -moz-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur mozilla */ -o-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur opera */ transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour les navigateurs récents */ } /* INFOBULLE AU SURVOL */ .transition-NU:hover .NU_transition{ height: 72px; width: 170px; padding: 5px; border-right:5px solid #F17890; } /* IMAGE (icône) */ .transition-NU img { position: relative; z-index: 990; left: 0; bottom: 0; -webkit-transition: all 1s linear 0s; -moz-transition: all 1s linear 0s; -o-transition: all 1s linear 0s; transition: all 1s linear 0s; } /* IMAGE (icône) AU SURVOL */ .transition-NU:hover img { -webkit-transition: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); }
/*ROTATION AGRANDISSELMENT*/ /* IMAGE (icône) */ .Xplo2 img{ width: 60px; height: 60px; margin: 10px; padding: 0; -moz-border-radius: 100px; -webkit-transition: all 1.5s ease; /* pour navigateur webkit */ -moz-transition: all 1.5s ease; /* pour navigateur mozilla */ -o-transition: all 1.5s ease; /* pour navigateur opera */ transition: all 1.5s ease; /* pour les navigateurs récents */ } /* IMAGE (icône) AU SURVOL */ .Xplo2:hover img { width: 80px; height: 75px; -moz-border-radius: 100px; -webkit-transform : rotate(-360deg);/* pour navigateur webkit */ -moz-transform : rotate(-360deg); /* pour navigateur mozilla */ -o-transform : rotate(-360deg);/* pour navigateur opera */ transform: rotate(-360deg); /* pour les navigateurs récents */ }
.border1 { border-right:5px solid #66CDAA; }
.border2 { border: 3px dotted white; width: 440px; }
/*essai journal*/ .texte:first-letter { font-size:500%; line-height:27px; border: 1px solid transparent; float:left; font-family:over the rainbow; text-shadow: 1px 1px 1px white; color:#66CDAA; } spanjournal{ float:center; padding:12px; height:500px; } si vous avez besoin d'un template, n'hésitez pas ! cordialement. | | |
|
GalgaeH
{ Membre }
Messages : 20
| Bonsoir, as-tu essayé un margin-top de plus de 0 sur la balise qui correspond au champ de profil ? Sinon j'ai jeté un œil à ton forum et j'ai pas eu ton souci d'avatar qui passe par dessus la barre de navigation pour ma part... Tu es la seule à avoir ce souci ou d'autres membres s'en sont plains ? | | |
|
Hinari
{ Membre }
Messages : 39
| Si tu enlevais le z-index de ta classe pour le rang et le pseudo ? ^^ | | |
|
'Christa
Lostmindy
Messages : 2856
| Même remarque que Hinari, ou bien tu augmentes le z-index sur la barre de navigation. Accessoirement, il y a des choses louches dans ton CSS, en particulier des classes avec accent (On ne met JAMAIS d'accent dans un nom de classe CSS) et la définition d'une balise qui n'existe pas : - Code:
-
v{ color:white; text-shadow: 0px 2px 1px #DC143C; font: 45px over the rainbow; margin-top:-20px; } (Il va sans dire que le HTML étant un langage informatique, inventer de nouvelles balises est plus que déconseillé vu que les navigateurs ne sauront pas trop quoi en faire) | | |
|
Psycho
Psychopathe
Messages : 3407
| Bonjour, bonsoir (: Je viens aux nouvelles : le sujet est-il toujours d'actualité ?Si nous n'avons pas de réponse dans 3 jours, le sujet sera archivé ! Merci de ta compréhension | | |
|
Psycho
Psychopathe
Messages : 3407
| Hello (: N'ayant toujours pas obtenu de réponse, je considère ce sujet comme résolu ! Merci de ta compréhension | | |
|