Forum
Aller à la page       >>  
Moderateurs: Alexis
Auteur Message
alice-shan
Messages: 65
bonjour j'aimerais bien que quelqu'un m'aide car je n'ai rien compris au language css j'ai relu plusieurs fois l'explication mais je n'ai rien compris.
expliquer moi s'il-vous-plait

merci d'avance

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
Bonjour,

Ce serait bien que tu nous dises précisément ce qui te pose problème, car je ne peux pas tout expliquer.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

alice-shan
Messages: 65
ben en faîte ce que j'ai pas compris c'est presque tous, la première page d'explication ça je l'ai compris c'est le reste que j'ai pas compris

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
Pourtant si tu as compris la première page tu devrais avoir presque tout compris, les deux pages suivantes ne contiennent que la liste des propriétés et classes utilisables.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

alice-shan
Messages: 65
enfin j'ai compris juste la fin sinon quand il parle de atribu etc à marquer ça je comprend pas

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
Ce n'est pas très compliqué, les attributs désignent les différents éléments de ton site que tu peux modifier. Par exemple le menu de gauche, le header, le cadre contenant les news, etc...


Supposons par exemple que tu veuilles que la couleur de fond du menu de gauche de ton site soit rouge.

La couleur de fond est "la propriété" que tu souhaites modifier. Rouge est la "valeur" que tu souhaites donner à cette propriété.
Enfin, le menu de gauche est l'élément (ou "attribut" que tu souhaites modifier.

Le nom en CSS du menu de gauche est #meugauche
La propriété permettant de changer la couleur de fond est background-color.
La syntaxe CSS à écrire pour faire ceci est donc
#menugauche {
background-color: red;
}

- Edité le 28/10/2011 à 22:39 -

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

alice-shan
Messages: 65
c'est complexe ^^
voir très .

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
Dans ce cas, le plus simple est sans doutes que tu n'utilises pas le CSS. Ce n'est pas indispensable, et si tu veux tu as des designs tout faits à disposition sur ce site.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

anamos
Messages: 67
Site internet
Ou alors vient me voir je vais t'expliqué clairement pour ton site demande moi par Mp
alice-shan
Messages: 65
ok ^^

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
alice-shan
Messages: 65
bonjours, je voudrai savoir comment est-ce que l'on fait pour mettre l'entête du site en bas a gauche et aussi pour les menu comment arrondir les borts des titres de menus ??
J'ai un autre problème, çe qu'il y a écrit dans l'entête du menu est écri en gros au milieu et j'arrive pas a le changer. regardez: lien

merci.

- Edité le 21/01/2012 à 22:32 -

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
Bonjour,

Actuellement tu utilises déjà le CSS ou pas ?
Si ce n'est pas le cas ça ne sert à rien de poser des questions précises comme ça, il faut mieux que tu commences par le début.

Pour le dernier point que tu soulèves tu as réussie à te débrouiller toute seule, non ?

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

alice-shan
Messages: 65
nan en fait j'ai remis comme c'était avant le css, sinon si tu veux voir comment c'était avant je peux le remettre pour que tu voies comment ça donne.

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
Peux-tu copier ton CSS dans ton prochain message?
Je te montrerais ou tu dois le modifier.

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

alice-shan
Messages: 65
/* Quelques données généralistes */
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
color: #BA8267;
text-align: center;
background-color:#A1A1A1;
background-attachment:fixed;
text-align : left;
}
td {
background: transparent;
font-family:verdana,arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color:#AD6765;
padding: 0px;
text-align:left;
}
a {
color: #CF2513;
text-decoration: transparent;
}
a:hover {
color: #A1A1A1;
text-decoration: underline;
}
a img {
border: none;
}
.fborder {
border: #000000 1px solid;
width: 99% !important;
}

.fcaption {
border-top : 1px #A1A1A1 transparent;
border-bottom : 1px  #AD6765 solid;
background-color: #E5E5E5;
background-image:url(http://utiliweb.fr/defaut/titrenews.png);
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
color:#BA8267;
font-weight:bold;
padding: 2px;
text-align: left;
}
.fcaption a{
padding-right:4px;
color:#030303;
}

.casetype1 {
background-color:#EDEDED;
border : 2px #C9C9C9 solid;
padding: 2px;
}
.casetype2 {
border : 1px #AD6765 solid;
background-color: #F7F7F7;
padding: 2px;
}
.casetype3 {
background-color: #AD6765;
font-size: 12px;
padding:2px;
border: 1px solid #A1A1A1;
}
.titre {
font-size: 14px;
text-align : center;
}
/* Début de la mise en page */
#page {
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
width: 780px;
border: 2px solid #C7BFBB;
text-align: left;
background-color :#FBFBFB ;
}
#header {
position:relative;
padding: 0px;
margin: 0px;
height: 116px;
width: 100%;
background-color: #E2E2E2;
background-image:url(http://utiliweb.fr/defaut/header.png);
}
#header h1{
text-align:center;
width: 100%;
padding: 0;
margin: 0 auto;
font-size: 30px;
color: #CF2513;
}
#header h1 a, #header h1 a:hover{margin-right:200px
color: #A1A1A1;
}
#header h2 {
height : 100%;
display : block;
position : absolute;
top : 108px;
left : 3px;
padding: 0;
margin: 0 auto;
font-size: 12px;
text-align: center;
color: #CF2513;
width: 100%;
height:30px;
overflow : hidden;
}
#header h2 a {
color: #C9C9C9;
}
#header h2 a:hover {
color: #C9C9C9;
text-decoration : underline;
}

.body1 {
border-bottom : 2px #A1A1A1 solid;
background-color : #FBFBFB;
padding : 0px;
}
#menugauche {
width: 130px;
height : 100%;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
vertical-align : top;
background-color:#F7F7F7;
border-right : 2px #D1D1D1 solid;
}
#menugauche .titre {
background-image:url(http://utiliweb.fr/defaut/titremenu.png);
padding: 4px;
display : block;
border-bottom : 2px #A1A1A1 solid;
border-style: groove;
border-top : 2px #A1A1A1 solid;
color : #C9C9C9;
background-color: #E5E5E5;
font-weight : bold;
text-align : center;
}
#main {
background-color:#FBFBFB;
text-align : left;
vertical-align : top;
padding-top : 5px;
padding-bottom : 5px;
padding-left : 2px;
padding-right : 2px;
height : 100%;
border-top : 2px #A1A1A1 solid;
}
#main .titre {
font-size : 18px;
font-weight : bold;
color : #8F5553;
}
#footer {
padding: 0;
margin: 0 auto;
width: 8F5553;
background-color : #E2E2E2;
text-align: center;
}
#footer p {
margin: 1;
padding: 10px 0;
text-align: center;
}
/* Fin de la mise en page  */

/* Apparance des news */
.news {
border : 1px #000000 solid;
width : 96%;
border-style: ridge;
}
.titrenews {
background-color:#E5E5E5;
text-align : center;
font-weight : bold;
font-size : 12px;
color : #000000;
height : 27px;
background-image:url(http://utiliweb.fr/defaut/titrenews.png);
border-bottom : 1px #000000 solid;
}
.corpsnews {
background-color:#EDEDED;
text-align : justify;
color : #000000;
padding : 2px;
}
.piednews {
background-color:#EDEDED;
color : #C7A297;
height : 20px;
padding : 4px;
vertical-align : bottom;
}
.imagenews {
max-width:120px;
max-height:120px;
float:left;
padding: 4px;
}
/* Apparance de l\'index du forum et autres tableaux */
.forumheader{
background-color: #DFDFDF;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
color:#000000;
font-weight : bold;
padding:2px;
border: 1px solid #000000;
}
.forumheader A {
font-size: 12px;
color:#000000;
font-weight : bold;
}

#corpsforum {
text-align : left;
background-color : #F7F7F7;
color : #000000;
border-left : 1px #000000 solid;
border-right : 1px #000000 solid;
border-top : 1px #000000 solid;
vertical-align : top;
}

.blocforum {
border : 1px #000000 solid;
}
.forumcolonne1 {
background-color : #EDEDED;
border : 1px #AD6765 solid;
}
.forumcolonne2 {
background-color:#F7F7F7;
border : 1px #AD6765 solid;
text-align : left;
padding : 2px;
}
.forumcolonne3 {
background-color: #EDEDED;
border : 1px #000000 solid;
padding : 2px;
}
.forumcolonne4 {
background-color:#F7F7F7;
border : 1px #D9D9D9 solid;
}
.forumcolonne5 {
background-color: #EDEDED;
border : 1px #000000 solid;
}
.forumcolonne6 {
background-color:#F7F7F7;
border : 1px #D9D9D9 solid;
}
.foruminfo {
background-color : #DFDFDF;
border : 1px #000000 solid;
padding-top : 1px;
    padding-bottom : 1px;
}
.legende {
text-align: center;
width : 100%;
border : 1px #000000 solid;
background-color : #EDEDED;
padding : 2px;
margin-top : 5px;
}
.caselegende {
text-align : center;
}
/* Apparance des commentaires et des messages du forum */
.commentaire {
border-bottom: #000000 1px inset;
width : 85%;
}
#colonneavatar {
width : 212px;
background-color : #EDEDED;
background-repeat:no-repeat;
text-align : center;
border-top : 1px #000000 solid;
border-left : 1px #D1D1D1 solid;
padding : 2px;
vertical-align : top;
}
#menumessage {
background-color : #EDEDED;
border-bottom : 1px #000000 solid;
height : 24px;
padding : 2px;
}
#corpsmessage {
background : #F7F7F7;
padding : 4px;
}
#signature {
border-top : 1px #000000 dashed;
vertical-align : bottom;
padding : 4px;
background-color : #F7F7F7;
}
#reponserapide {
background-color : #EDEDED;
border : 1px #000000 solid;
border-style: outset;
}
/* Attributs supplémentaires */
.button{
font-size: 12px;
text-align:center;
}
.tbox.chatbox {
width: 45%;
margin-left: auto;
margin-right: auto;
}
.spacer {
padding: 0px 0 0px 0;
}

.indent{
padding:4px;
border: 1px solid #000000;
background-color: #EDEDED;
}
.spoiler{
background-color: #EDEDED;
color : #EDEDED;
padding : 4px;
border: 1px #CF2513 solid;
}
.spoiler span{
color: #CF2513;
}

.mediumtext {
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
}

.tbox{
background-color: #ffffff;
border: #000000 1px solid;
color: #000000;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
}
.helpbox {
border: 0px;
background-color: transparent;
color:#000000;
font-size: 10px;
font-family:verdana,arial, Helvetica, sans-serif;
}
.smalltext {
font-size : 11px;
color : #000000 ;
}
.smallblacktext {
font-size : 11px;
color : #000000 ;
}
hr
{display : none}
.cpage_title {
text-align : center;
font-weight : bold;
}
.tableaubb {
border: 1px #000000 solid;
}
 
J'ai utilisé celui qui avais dansles guides mais j'ai pas fini.
et aussi j'arrive plus a mettre de la couleur ça me met que du gris sauf pour la police.

- Edité le 22/01/2012 à 16:09 -

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
Pour arrondir les bords des titres des menus, il faut utiliser la propriété border-radius. Je te conseille aussi d'enlever la bordure qu'il y'a autour de ces titres.

Ce que tu me dis sur les couleurs est assez surprenant. Quelles couleurs essaies-tu de changer ?

Pour le texte de l'entête, je te fais les modifications directement dans ton CSS.
Compare les deux versions, c'est comme ça que tu progresseras.

/* Quelques données généralistes */
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
color: #BA8267;
text-align: center;
background-color:#A1A1A1;
background-attachment:fixed;
text-align : left;
}
td {
background: transparent;
font-family:verdana,arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color:#AD6765;
padding: 0px;
text-align:left;
}
a {
color: #CF2513;
text-decoration: transparent;
}
a:hover {
color: #A1A1A1;
text-decoration: underline;
}
a img {
border: none;
}
.fborder {
border: #000000 1px solid;
width: 99% !important;
}

.fcaption {
border-top : 1px #A1A1A1 transparent;
border-bottom : 1px #AD6765 solid;
background-color: #E5E5E5;
background-image:url(http://utiliweb.fr/defaut/titrenews.png);
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
color:#BA8267;
font-weight:bold;
padding: 2px;
text-align: left;
}
.fcaption a{
padding-right:4px;
color:#030303;
}

.casetype1 {
background-color:#EDEDED;
border : 2px #C9C9C9 solid;
padding: 2px;
}
.casetype2 {
border : 1px #AD6765 solid;
background-color: #F7F7F7;
padding: 2px;
}
.casetype3 {
background-color: #AD6765;
font-size: 12px;
padding:2px;
border: 1px solid #A1A1A1;
}
.titre {
font-size: 14px;
text-align : center;
}
/* Début de la mise en page */
#page {
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
width: 780px;
border: 2px solid #C7BFBB;
text-align: left;
background-color :#FBFBFB ;
}
#header {
position:relative;
padding: 0px;
margin: 0px;
height: 116px;
width: 100%;
background-color: #E2E2E2;
background-image:url(http://utiliweb.fr/defaut/header.png);
}
#header h1{
text-align:center;
width: 100%;
padding: 0;
margin: 0 auto;
font-size: 30px;
color: #CF2513;
}
#header h1 a, #header h1 a:hover{margin-right:200px
color: #A1A1A1;
}
#header h2 {
font-size: 12px;
color: #CF2513;
text-align: left;
padding-top: 90px;
padding-left: 10px;
}
#header h2 a {
color: #C9C9C9;
}
#header h2 a:hover {
color: #C9C9C9;
text-decoration : underline;
}

.body1 {
border-bottom : 2px #A1A1A1 solid;
background-color : #FBFBFB;
padding : 0px;
}
#menugauche {
width: 130px;
height : 100%;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
vertical-align : top;
background-color:#F7F7F7;
border-right : 2px #D1D1D1 solid;
}
#menugauche .titre {
background-image:url(http://utiliweb.fr/defaut/titremenu.png);
padding: 4px;
display : block;
border-radius: 5px;
margin: 3px;

color : #C9C9C9;
background-color: #E5E5E5;
font-weight : bold;
text-align : center;
}
#main {
background-color:#FBFBFB;
text-align : left;
vertical-align : top;
padding-top : 5px;
padding-bottom : 5px;
padding-left : 2px;
padding-right : 2px;
height : 100%;
border-top : 2px #A1A1A1 solid;
}
#main .titre {
font-size : 18px;
font-weight : bold;
color : #8F5553;
}
#footer {
padding: 0;
margin: 0 auto;
width: 8F5553;
background-color : #E2E2E2;
text-align: center;
}
#footer p {
margin: 1;
padding: 10px 0;
text-align: center;
}
/* Fin de la mise en page */

/* Apparance des news */
.news {
border : 1px #000000 solid;
width : 96%;
border-style: ridge;
}
.titrenews {
background-color:#E5E5E5;
text-align : center;
font-weight : bold;
font-size : 12px;
color : #000000;
height : 27px;
background-image:url(http://utiliweb.fr/defaut/titrenews.png);
border-bottom : 1px #000000 solid;
}
.corpsnews {
background-color:#EDEDED;
text-align : justify;
color : #000000;
padding : 2px;
}
.piednews {
background-color:#EDEDED;
color : #C7A297;
height : 20px;
padding : 4px;
vertical-align : bottom;
}
.imagenews {
max-width:120px;
max-height:120px;
float:left;
padding: 4px;
}
/* Apparance de l\\\'index du forum et autres tableaux */
.forumheader{
background-color: #DFDFDF;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
color:#000000;
font-weight : bold;
padding:2px;
border: 1px solid #000000;
}
.forumheader A {
font-size: 12px;
color:#000000;
font-weight : bold;
}

#corpsforum {
text-align : left;
background-color : #F7F7F7;
color : #000000;
border-left : 1px #000000 solid;
border-right : 1px #000000 solid;
border-top : 1px #000000 solid;
vertical-align : top;
}

.blocforum {
border : 1px #000000 solid;
}
.forumcolonne1 {
background-color : #EDEDED;
border : 1px #AD6765 solid;
}
.forumcolonne2 {
background-color:#F7F7F7;
border : 1px #AD6765 solid;
text-align : left;
padding : 2px;
}
.forumcolonne3 {
background-color: #EDEDED;
border : 1px #000000 solid;
padding : 2px;
}
.forumcolonne4 {
background-color:#F7F7F7;
border : 1px #D9D9D9 solid;
}
.forumcolonne5 {
background-color: #EDEDED;
border : 1px #000000 solid;
}
.forumcolonne6 {
background-color:#F7F7F7;
border : 1px #D9D9D9 solid;
}
.foruminfo {
background-color : #DFDFDF;
border : 1px #000000 solid;
padding-top : 1px;
padding-bottom : 1px;
}
.legende {
text-align: center;
width : 100%;
border : 1px #000000 solid;
background-color : #EDEDED;
padding : 2px;
margin-top : 5px;
}
.caselegende {
text-align : center;
}
/* Apparance des commentaires et des messages du forum */
.commentaire {
border-bottom: #000000 1px inset;
width : 85%;
}
#colonneavatar {
width : 212px;
background-color : #EDEDED;
background-repeat:no-repeat;
text-align : center;
border-top : 1px #000000 solid;
border-left : 1px #D1D1D1 solid;
padding : 2px;
vertical-align : top;
}
#menumessage {
background-color : #EDEDED;
border-bottom : 1px #000000 solid;
height : 24px;
padding : 2px;
}
#corpsmessage {
background : #F7F7F7;
padding : 4px;
}
#signature {
border-top : 1px #000000 dashed;
vertical-align : bottom;
padding : 4px;
background-color : #F7F7F7;
}
#reponserapide {
background-color : #EDEDED;
border : 1px #000000 solid;
border-style: outset;
}
/* Attributs supplémentaires */
.button{
font-size: 12px;
text-align:center;
}
.tbox.chatbox {
width: 45%;
margin-left: auto;
margin-right: auto;
}
.spacer {
padding: 0px 0 0px 0;
}

.indent{
padding:4px;
border: 1px solid #000000;
background-color: #EDEDED;
}
.spoiler{
background-color: #EDEDED;
color : #EDEDED;
padding : 4px;
border: 1px #CF2513 solid;
}
.spoiler span{
color: #CF2513;
}

.mediumtext {
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
}

.tbox{
background-color: #ffffff;
border: #000000 1px solid;
color: #000000;
font-size: 12px;
font-family:verdana,arial, Helvetica, sans-serif;
}
.helpbox {
border: 0px;
background-color: transparent;
color:#000000;
font-size: 10px;
font-family:verdana,arial, Helvetica, sans-serif;
}
.smalltext {
font-size : 11px;
color : #000000 ;
}
.smallblacktext {
font-size : 11px;
color : #000000 ;
}
hr
{display : none}
.cpage_title {
text-align : center;
font-weight : bold;
}
.tableaubb {
border: 1px #000000 solid;
}

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

alice-shan
Messages: 65
en fait pour les couleur je voulait mettre du gris assez foncé pour la case 1, 3 et du gris un peu plus clair dans la case 2, en fait des couleur assez foncé mais pas trop ^^".

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
En couleur de texte (color) ou en couleur de fond (background-color) ?

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

alice-shan
Messages: 65
couleur de fond du menu gauche, et aussi j'arrive plus a changer la police.

Pour les fan de pandora hearts cliquer ici(il est en construction ^^)
pandora hearts master
Alexis

Messages: 1136
Site internet
pour changer de police, il faut mettre

font-family: "nom de la police";

Pour la couleur de fond du menu gauche, il suffit de changer la propriété "background-color" de #menugauche

image
image
image
Vous aimez les services offerts par UtiliWeb ? 
Signez le livre d'or !
Vous voulez être au courant de nos actualités ?
Suivez nous !
Vous voulez faire un geste pour nous aider ? 
Faites un don !

Aller à la page       >>   

Aller à:     Haut de page