CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Contours arrondi (problème) + question d'organisation feuille CSS | |
| Valou
{ Membre }
Messages : 45
| Bonjour à tous, J'ai deux petites questions. L'une concernant les contours. Pour ma part, j'aurai aimé qu'ils soit enlevé ou alors que l'écriture ne passe pas sur le trait. Je m'explique en image. - Spoiler:
Comme vous pouvez le voir, le "S" de salut est complètement sur le trait et je ne sais pas du tout comment remédier à ça. Comment pourrai-je faire pour enlever le contour ? ou mieux, ne pas écrire sur le trait ? J'ai essayé de bidouiller et rien y fait. La deuxième question concerne mon css en lui même. Je vous le poste ici - Spoiler:
- Code:
-
.titre { font-family: serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */ font-size: 110%; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */ text-transform: uppercase; /* Soyons fou, écrivons le titre en majuscules ! ^^ */ background-image: URL("http://img169.imageshack.us/img169/8876/patternog.png"); /* Et pourquoi ne pas mettre une petite image ? ça décore, ça fait sympa... xD */ border-bottom: 1px dotted #015DAE; /* ça, c'est le "soulignement" du titre. Si vous voulez que ce soit un trait plein, remplacez "dashed" par "solid". Pour un trait en pointillé, c'est "dotted". Pour aucun trait du tout, c'est "j'efface la ligne". */ color: #015DAE; /* Couleur de la police ^^ */ text-align: rleft; /* C'est la classe si le titre est centré, mais on peut l'aligner à droite (right) ou à gauche (left). */ border-left: 0px solid #015DAE; /* ça, c'est pour faire les petites barres sur le côté du titre... Pour les faire plus large, il suffit de mettre 3px, 4px ou plus à la place de "1px" */ border-right: 0px solid #015DAE; }
tr.post span.gensmall { display: none; }
a.forumlink:hover { text-shadow: 3px 2px 10px #FFFFFF; }
#paccueil { background-image: url('http://hitskin.com/themes/15/31/71/i_back_catg.jpg'); }
.spoiler.hidden .quote.spoiler_content, .spoiler .quote {display:none;}.spoiler .quote.spoiler_content, .spoiler.hidden .quote {display:block;}
a { text-decoration: none; }
a:hover { font-variant: small-caps; }
.bodyline{ -moz-border-radius: 25px;}
body { cursor: crosshair } a:hover { cursor:ne-resize; }
textarea, .textarea.post, input.post { -moz-border-radius:20px; }
.bodyline { -moz-border-radius:15px; }
.forumline{ background-color: #424648; -moz-border-radius: 5px ; border: 3px #424648 solid; }
.postbody { background-repeat: repeat; background-image: url('http://hitskin.com/themes/15/31/71/i_background.jpg'); background-position: center; }
td.row1 { background-repeat: repeat; background-image: url('http://hitskin.com/themes/15/31/71/i_background.jpg'); background-position: center; } td.row2 { background-repeat: repeat; background-image: url('http://hitskin.com/themes/15/31/71/i_background.jpg'); background-position: center; } td.row3 { background-repeat: repeat; background-image: url('http://hitskin.com/themes/15/31/71/i_background.jpg'); background-position: center; }
td.row3Right { background:url('http://hitskin.com/themes/15/31/71/i_background.jpg'); border-style: none }
td.row3{ background-image: url("http://hitskin.com/themes/15/31/71/i_background.jpg"); }
.postdetails.poster-profile a img { -moz-border-radius:12px; border: 5px solid #919796; }
a.forumlink:link, a.forumlink:visited { font-family: georgia; text-transform : uppercase; background-image: url("http://obsession27.free.fr/divers/fonds/paf3.jpg"); color: #000000; text-align: center; display: block; border-bottom: 5px solid #000000; -moz-border-radius:10px; }
a.forumlink:hover, a.forumlink:hover:visited { background-image: url("http://obsession27.free.fr/divers/fonds/tro3.jpg"); color: #000000; text-align: center; display: block; border-bottom: 5px solid #000000; -moz-border-radius:10px; }
.bordure { border: 2px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#table-pa { width: 100%; padding-right: 1px; }
#table-pa td { width: 20%; }
#table-pa td span.liens { display: block; width: 94%; }
.liens { text-align: center; border-left: 5px solid #000000; border-right: 5px solid #000000; }
span.infobulle { position: relative; }
span.infobulle span { display: none; /* ceci masque l'infobulle */ } span.infobulle:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
} span.infobulle:hover span { display: inline; /* ceci 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: 1px; /* on positionne notre infobulle */ left: 15px;
background: #ebebeb; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */ padding: 4px;
/* bordures de votre infobulle*/ border: 1px dotted black; border-left: 1px dotted black; }
#navigation ul{ list-style-type: none; text-align: center; } #navigation li{ display: inline; text-align: center; margin: 0 10px 0 0; } #navigation li a { padding: 2px 7px 2px 7px; color: #000000; background-color: #A8C8C4; border: 1px solid #FFFFFF; text-decoration: none; } #navigation li a:hover{ background-color: #43BCAC; color: #; }
a.mainmenu { background-color: #B3C4C7; text-align: center; padding-right: 20px; padding-left: 5px; font-size: 12px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -moz-border-radius-topleft:30px; -moz-border-radius-topright:30px; font-variant: small-caps;}
a.mainmenu:hover { background-color: #277783; text-align: center; padding-right: 20px; padding-left: 5px; font-size: 12px; -moz-box-shadow: 1px 1px 12px #ffffff; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -moz-border-radius-topleft:30px; -moz-border-radius-topright:30px;}
C'est assez "bordel" et j'ai peur d'avoir des problèmes avec ça plus tard en rajoutant des codes ect.. Surtout que je ne sais plus du tout quel code correspond à quoi Un conseil pour remédier à ça ? L'adresse de mon forum est indiquée dans mon profil. Merci à vous pour vos précieuses réponses Bisous |
Dernière édition par Valou le Mer 26 Mai 2010, 19:49, édité 1 fois | |
| | | Boow
{ Membre actif }
Messages : 866
| Pour ta première question, essaie ceci : - Code:
-
.text_editor_textarea { padding: 6px; } Pour ton deuxième souci.... Je reconnais que c'est le bazar !! Je te conseille tout d'abord de tout mettre sous la même forme. Je m'explique. Tout mettre, par exemple (je fais comme ça moi), sous cette forme-ci : - Code:
-
.LE NOM DE TA BALISE { PROPRIÉTÉ 1; PROPRIÉTÉ 2; PROPRIÉTÉ 3; } Exemple avec le premier de ton code : - Code:
-
.titre { font-family: serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */ font-size: 110%; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */ text-transform: uppercase; /* Soyons fou, écrivons le titre en majuscules ! ^^ */ background-image: URL("http://img169.imageshack.us/img169/8876/patternog.png"); /* Et pourquoi ne pas mettre une petite image ? ça décore, ça fait sympa... xD */ border-bottom: 1px dotted #015DAE; /* ça, c'est le "soulignement" du titre. Si vous voulez que ce soit un trait plein, remplacez "dashed" par "solid". Pour un trait en pointillé, c'est "dotted". Pour aucun trait du tout, c'est "j'efface la ligne". */ color: #015DAE; /* Couleur de la police ^^ */ text-align: rleft; /* C'est la classe si le titre est centré, mais on peut l'aligner à droite (right) ou à gauche (left). */ border-left: 0px solid #015DAE; /* ça, c'est pour faire les petites barres sur le côté du titre... Pour les faire plus large, il suffit de mettre 3px, 4px ou plus à la place de "1px" */ border-right: 0px solid #015DAE; } Exemple avec le deuxième : - Code:
-
tr.post span.gensmall { display: none; } | | |
| | | Valou
{ Membre }
Messages : 45
| Merci pour le conseil pour ma deuxième question. Pour la première, j'ai mis le code - Code:
-
.text_editor_textarea { padding: 6px; }
dans ma feuille Css et rien ne change :/ | | |
| | | Boow
{ Membre actif }
Messages : 866
| Hum pardon, je pense que c'est ceci qu'il faut mettre : - Code:
-
#text_editor_textarea { padding: 6px; } | | |
| | | VPeybernes
{ Membre actif }
Messages : 563
| Avec 2px même ça doit suffire. Pour ta deuxième question, une chose importante pour un code ordonner et de savoir ce que l'on fait quand on le modifie, et ne pas recopier bêtement des bout de code trouvé pour les mettre à la suite. Un exemple tout bête dans ton CSS: - CSS a écrit:
- a.forumlink:hover {
text-shadow: 3px 2px 10px #FFFFFF; }
#paccueil { background-image: url('http://hitskin.com/themes/15/31/71/i_back_catg.jpg'); }
.spoiler.hidden .quote.spoiler_content, .spoiler .quote {display:none;}.spoiler .quote.spoiler_content, .spoiler.hidden .quote {display:block;}
a { text-decoration: none; }
a:hover { font-variant: small-caps; }
.bodyline{ -moz-border-radius: 25px;}
body { cursor: crosshair } a:hover { cursor:ne-resize; }
.............. bien plus loin...............
a.forumlink:hover, a.forumlink:hover:visited { background-image: url("http://obsession27.free.fr/divers/fonds/tro3.jpg"); color: #000000; text-align: center; display: block; border-bottom: 5px solid #000000; -moz-border-radius:10px; } Tu définis ici 2 fois, à 2 endroit différant les propriété de a.forumlink:hover et de a:hover. Pour y voir plus clair il faut ordonner tout ça en rassemblant les définitions. Et quand on veux ajouter une propriété, trouver si l'élément n'est pas déjà défini dans le CSS, et voir si la propriété elle aussi n'est pas déjà là. Si elle est présente on la modifie, et sinon on la rajoute à la définition de l'élément. Et si rien n'est là, alors on ajoute une nouvelle définition. Et ne pas hésiter à commenter pour si retrouver. On ajoute des commentaire en les plaçant entre /* et */. Tout ce qui ce trouvelà n'est pas interprété. Et ça vaut sur plusieurs ligne. On peut séparer clairement plusieurs sections de code : - Code:
-
/*------------------------------------------------------------------------------ SÉPARATION ------------------------------------------------------------------------------*/ On peut bien sur mettre ce qu'on veux. Après dans le code même, personnelement quand j'ai beaucoup de proprété, je mets sur une même ligne les propriétés de même type (affichage, texte, bordure, position, etc...). Mais bon c'est à chacun de ce le voir. Un petit bout de ma CSS pour exemple : - Spoiler:
- Code:
-
/* ---------------------------------------------------- Apparence des pop-up -----------------------------------------------------*/
.popup { background : #368AD2 ; width:60%; display : none ; } .popup * {color : white ;font-size : 10pt;}
.popup .close { text-align : right ; font-style : italic ; margin-top : 50px } .popup .close:hover { cursor : pointer; }
.popup input,.popup select, .popup option, .popup textarea{ color : black ; -moz-border-radius : 10px; -webkit-border-radius : 10px} /*--- Fin du popup ---*/
/*------------------------------------------------- Mise en page --------------------------------------------------*/ table.carac td { border-bottom: dashed 1px #368AD2 ; vertical-align : top ; }
| | |
| | | Valou
{ Membre }
Messages : 45
| Merci à vous pour vos conseils. Il faut que je retrouve quel code correspond à quoi pour pouvoir bien organiser ma feuille css. Pour le contour arrondi, le problème est réglé merci beaucoup par contre, petit soucis en image - Spoiler:
Je ne sais pas pourquoi c'est devenu comme ça Ce n'est pas si grave, mais ça fait un peu négligé je trouve. Si quelqu'un pourrai m'aider ce serait adorable. merci beaucoup | | |
| | | Boow
{ Membre actif }
Messages : 866
| Hihi x) Peux-tu nous passer le lien du forum s'il te plait ? =D | | |
| | | Valou
{ Membre }
Messages : 45
| Hé bien j'ai deux forum ici et l'autre, qui est inscrit dans mon profil ici et sur les deux ça fait un petit décalage :/
merci à vous. | | |
| | | VPeybernes
{ Membre actif }
Messages : 563
| C'est l'effet relief des champ qui rend mal avec les arrondis (bordure haute et gauche) Le plus simple est de redéfinir toute les bordure de ces éléments : - Code:
-
border : solid 2px black; T'en qu'on y est, dans la série organisation de code, on peut aussi faire de l'optimisation : -moz-border-radius défini les arrondi de bordure sous firefox. border-radius défini les arrondi de bordure pour tout les autres. Donc autant mettre les 2. Seul MSIE résiste encore et toujours à l'envahisseur du progrès et de la standardisation. | | |
| | | Valou
{ Membre }
Messages : 45
| Recoucou, Je dois le placer où - Code:
-
border : solid 2px black; svp ? merci EDIT : question toute bête : que dois-je enlever comme code pour supprimer les arrondis ? ça poserai plus de problème comme ça.. Vous pouvez vous référer à mon code css plus haut. Merci beaucoup | | |
| | | Kaiji
Blanche-Neige
Messages : 5578
| Bonjour,
Votre problème est-il résolu ?
| | |
| | | Valou
{ Membre }
Messages : 45
| Bonsoir, Oui merci le problème est réglé Désolé pour l'oublie Merci à vous Valou | | |
| | | Contenu sponsorisé
| | | | | Contours arrondi (problème) + question d'organisation feuille CSS | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|