Bonjour a tous, je suis un petit nouveau parmis vous et jaimerai changer totallement mon design. jai lu les post et bien qu'ils soient tres bien expliquer (merci a tous ceux qui ce donnent la peinne de faire des tuto) jaimerai bien avoir un exemple de code css que l'ont peux mettre dans la boite au dessus du design. On explique bien les mots et leurs fonction, mais c'est comment les appliquer qui me pose un probleme. ce qui m'aiderai ainsi qu'aux autres novices ce sont des exemples de code. merci beaucoup davance.
en passant la communauté frgd est totallemant genial je suis acros!!!!
Pour crée un design va dans la boite de construction et choisi "css-design"
ensuite tu vas en dessous dans "réglages avancés"
là tu trouvera un cadre pour tapé ton code css.
je vous conseille vivement de téléchargé Notepad++ (.exe) qui vous aidera à mieux rédigé tous type de code!!!
http://sourceforge.net/project/showfiles.php?group_id=95717&package_id=102072
exemple de css pour ton site (non testé!!)
A mètre au-dessus du design!! car sa concerne la bannière (pas que!) et le centrage du site
"px" = taille en pixel! tu peu aussi utilisé les "cm" ou "mm" ou "%" ou mètre "auto"
bold : gras
bolder : plus gras
lighter : plus fin
normal : pas gras
italic : italique
oblique : autre façon de mettre en italique
normal : normal
underline : souligné
overline : ligne au-dessus
line-through : barré
blink : clignotant
none : normal
uppercase : tout mettre en majuscules
lowercase : tout mettre en minuscules
capitalize : début des mots en majuscules
none : normal
font : Méga-propriété de police
exemple font: bold, 16px, Arial;
ce qui donne :
texte en gras, 16 pixels, Arial.
alignement : text-align
left : à gauche (par défaut)
center : centré
right : à droite
justify : texte justifié
top : en haut
middle : au milieu
bottom : en bas
Largeur : width Valeur en px, %, ou encore "auto" (la largeur dépendra du texte à l'intérieur)
Hauteur : height Idem
Largeur minimale min-width Indiquer une valeur, en pixels par exemple.
Largeur maximale max-width "
Hauteur minimale min-height "
Hauteur maximale max-height "
Marge en haut : margin-top indiquer une valeur comme 20px, 1.5mm...
Marge à gauche : margin-left "
Marge à droite : margin-right "
Marge en bas : margin-bottom "
Méga-propriété de marge : margin + 1 2 ou 3 valeur
éxemple: margin:20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */
Marge intérieure en haut : padding-top Indiquer une valeur comme 20px, 2mm...
Marge intérieure à gauche : padding-left "
Marge intérieure à droite : padding-right "
Marge intérieure en bas : padding-bottom "
Epaisseur de la bordure : border-width Indiquer une valeur en px (ou autre)
Couleur de la bordure : border-color Indiquer une valeur de couleur
Type de bordure
border-style none : pas de bordure (par défaut)
border-hidden : bordure cachée
border-solid : ligne pleine
border-double : ligne double (nécessite une taille de bordure de 3px minimum)
border-dashed : en tirets
border-dotted : en pointillés
border-inset : effet 3D "enfoncé"
border-outset : effet 3D "surélevé"
border-ridge : autre effet 3D
exemple : border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
Type d'élément : display
none : l'élément ne sera pas affiché
block : l'élément devient de type "block" (bloc, comme <p>)
inline : l'élément devient de type "inline" (en ligne, comme <strong>)
list-item : l'élément devient de type "élément de liste à puce"
Flottant : float
left
right
none
Stopper un flottant : clear
left
right
none
Type de positionnement : position
absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe L'élément reste à sa position même quand on descend plus bas dans la page.
relative : position relative, par rapport à la position "normale" de l'élément
static : positionnement normal
Curseur de souris : cursor
auto : curseur automatique
default : curseur standard
pointer : curseur en forme de main, comme quand on pointe sur un lien
text : curseur utilisé quand on pointe sur du texte
wait : curseur utilisé pour indiquer une attente (sablier)
progress : curseur utilisé pour indiquer une tâche de fond (curseur avec sablier)
help : curseur en forme de point d'interrogation, indiquant une aide
move : curseur en forme de croix, indiquant un déplacement possible
éxemple : cursor: url("images/curseur.cur");
Tu doit utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani
n-resize : flèche vers le nord
ne-resize : flèche vers le nord-est
e-resize : flèche vers l'est
se-resize : flèche vers le sud-est
s-resize : flèche vers le sud
sw-resize : flèche vers le sud-ouest
w-resize : flèche vers l'ouest
nw-resize : flèche vers le nord-ouest
body=TOUTE la page de travail
background = fond
( exemple:
background-image: url("../images/skieur.gif"); /* Le fond est l'image "skieur.gif" */
background-repeat: no-repeat; /* Le fond ne se répète pas */
background-position: top right; /* Le fond est aligné en haut à droite */
background-attachment: fixed; /* Le fond est fixé */ )
(exemple 2 :
body
{
background-color: black;
color: white; /* Toutes les balises contenues dans body verront leur texte coloré en blanc... */
}
h1
{
color: red; /* ... sauf si je demande expressément de changer la couleur par la suite (comme ici h1)*/
}
.surligne /* Un style qui permet par exemple de surligner certains mots d'un texte */
{
background-color: yellow;
color: black; /* Le texte surligné sera écrit en noir, parce que le blanc sur fond jaune on voit rien ;o) */
} )
Pour les autres terme (y'en à beaucoup) vous pouvé les trouvé sur le net
de rien sa ma pris 5 minute... (lol, multiplié par 3)
jé vu ton site!!
si je peu me permettre de te donné un conseille ainsi qu'au novice
---> construit déjà ton site fr.gd avec un design standard...!!
le tous ces d'avoir une idée
disons que le "css" cé un habit... et le"html" la structure... si t'enfile un pull par les jambes
le pantalon par la tête a la place du pull, bon aussi les chaussettes en guise de gant,
lol,(cé figuratif) mais cé sur a un moment va y'avoir un problème =)
disons aussi que si té motivé croit moi tu peu tous réussire!
méme à enfilé un pull les doigt dans le nez
<message d'encouragement = sincère><br />
<b>hip hip hip</b><br />
amicalement
Gangstar
Dernière édition par u2f le 15.07.2008, 01:57; édité 2 fois
salut! ha ha ha !!! en effet mon site démontre beaucoup de probleme! mais c'est simplement a cause que jai voulu m'amuser avec tes exemples et en plus il etais 4 du matin, donc le resultat le montre bien.... je sais que le produit final sera bien mieux.
un gros merci pour les nouvelles infos que tu a laisser, ca maide vraiment en plus de tout les tuto que jai trouver sur le net.
effectivement je vais commencer avec un model et avancer (apprendre!) a partir de la.(bonne comparaison avec le linge, tres drole et VRAI)
je suis un gars de reseautique, donc linformatique n'est vraiment pas nouveau pour moi, par contre la programmation web elle est nouvelle! je crois bien avoir trouvé une nouvelle passion a faire sur mon ordi! et comme tu dois deja le savoir, qui dit "passion" dit généralement "réussite".... alors pas a pas je me dirige vers une experience tres enrichissante sur le web.
aux noms de tous ceux qui comme moi débutent en web design, nous te remercions pour avoir généreusement donné de ton temps pour enrichire nos connaissances.
Salut Dan ! Le monsieur ou la madame a aussi mis entre parenthèses que son code n'a pas été testé. Or, lorsqu'on met des codes sur le forum, il faut d'abord les avoir testé avant, pour voir si cé ok.
Je t'avais d'ailleurs conseillé le site du zero et leurs tutos. Il te parle de Notepad++, mais il a omis de te dire qu'il te faut avecça le navigateur Firefox.
A mon avis, il ne faut pas prendre des choses que tu ne connais pas sur le forum, surtout sans avoir été testé au préalable par la personne qui les y place. Je veux dire qu'il ne faut pas mettre la charue avant les boeufs (vu que tu aimes les cas de figures). En premier, ta démarche doit être celle d'apprendre, de te familiariser avec le langage CSS, et non prendre n'importe quoi, au risque de foc... ton site. C'est d'ailleurs ce que je t'avais conseiller de faire. On apprend beaucoup mieux par soi-même avec les cours sur le net en même temps que la pratique. Et avec le temps, comme c'est devenu une passion pour toi, un jour tu pourras en apprendre aux autres en connaissance de cause.
Personnellement, moi aussi c'est devenu une passion. J'en mange ! Et je veux aussi tout les connaître.
l'utilisation de notepad++ ne nécéssite pas firefox
mais firefox cé un des meilleur navigateur web qui devance méchamment IE
pour téléchargé Firefox 3 release clique dessus!
d'ailleur n'oublie pas de sélectionné le "language css" dans notepad++
si tu tape du css ( va dans "language" et séléctionne "css")
revenon au css
concrètement
on fesai une comparaison avec l'habillage alors continuon
tu dois savoir a quoi correspond ce qui est en bleu
à savoir :
#title (titre)
#title span (foulard)
#Header_oben (banniére)
#Design (etc...)
#nav_container (navigation)
#content (contenu principale)
#sidebar_container (etc...)
#counter (compteur)
ensuite tu choisir la couleur, la taille, l'image ... pour chaque!! comprendo??
allé bon courage
et amuzé vous bien
Dernière édition par u2f le 16.07.2008, 20:49; édité 2 fois
Pour u2f!
J'ai regardé ton site.Un petit remarque: Ton header est plus large que ta page,je trouve que ces pas très jolie,mais chacun son goût bien sur.Si jamais tu veux mettre ta page a la même largeur que ton header tu modifie le code comme ça:
Oué je voulé faire un #content auto mais ta raison cé pas térrible...
cé cool de ta part de m'en faire là remarque et d'avoir pris le temp de faire le calcule
Les cookies sont de petits textes d'informations que nous ou nos partenaires enregistrons localement sur ton ordinateur via ton navigateur.
Tu peux empêcher l'utilisation de cookies à tout moment en modifiant les paramètres de ton navigateur.
Nous utilisons les cookies suivants, conformes au RGPD :
- Cookies essentiels : sont absolument essentiels pour que le site soit pleinement fonctionnel.
- Cookies optionnels : sont optionnels, et nous aident à améliorer le site web, par ex. en analysant le comportement des utilisateurs sur le site web, et ce sans t'identifier personnellement.
Tu peux trouver plus d'informations dans notre déclaration de confidentialité.
(non testé!!)
