web-composants

Un forum sur le graphisme!!!Toute l'équipe professionelle est là pour vous aidées!Elle satisfait votre demande au plus vite!!!!!Sonne-sheint,polip64 et moi même!
 
AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 Faire son design sous fr.gd[css]

Aller en bas 
AuteurMessage
web-composants
Fondateur
avatar

Messages : 1343
Date d'inscription : 28/05/2008

avertissements
avertissements:
0/3  (0/3)
niveau graphique:
18/100  (18/100)

MessageSujet: Faire son design sous fr.gd[css]   Ven 15 Aoû - 18:14

Leçon 1
Comprendre le css:

Nous allons commencer par comprendre le css.

Bon tout à bord j'explique un peut le css, le css est composé par plusieur partie sa veut dire par plusieur composant !

Mais pour les retrouvé vous devez comprende ces mot !

Alors je commence à citer ces mot (code)

edit_header_full: Veut dire header tous simplement
headline: Montre comment et ou sera pacé le titre (aucune importance)
nav_heading: Quand vous le changerais remplacera le bouton ou il y a écrit naviguation
nav a: montre la couleur de l'écriture par exemple pour écriture noir " td.nav a{color: #FFFFFF;} "
nav: design bouton, pour changer le bouton de toute la naviguation !
edit_below_nav: Visibilitè couleur du cradre en bas la navigaution
edit_navi_headbg: Sert à changer le cadre en bas de la navigaution grâce à votre images choisi
edit_content_top: Sert à changer la grande barre en haut de chauqe page
edit_content_bottom2: Sert à changer la grand barre en bas de chaque pages.
edit_content: Sert à changer le fond de chaque page
edit_content_bottom: Sert a plusieur chose vous verrez par la suite
sidebar_heading: Sert à changer le bouton de titre de chaque cadre
shouty: Fond du premiers cadre
shouty2: Fond du deuxièmes cadres
edit_rechts_bottom: Pareil que edit_navi_headbg mais pour le cotè droite !

Voilà je vous ai donné le général !
Je vous met à disposition une images qui montre encore plus de code ! Et qui représente encore meieux ceux que je vous est mit !



Leçcon 2:
Mais je suis ultra debutant me faut de l'aide svp !

Comme vous le montre le titre nous allons attaquer notre design !

Prenons un code de design n'importe le quel !

<style type="text/css"> <!--
td.nav{background-image:url(URL DU BOUTON 2); background-repeat:no-repeat;}
td.nav:hover{background-image:url(URL DU BOUTON 1); background-repeat:no-repeat;}
td.nav a{text-decoration:none;}
td.nav_heading{background-image:url(URL D'IMAGES QUI REMPLAE LA OU IL Y A ECRIS NAVIGUATION); height:35px; background-repeat:no-repeat;}
td.edit_navi_headbg{background-image:url(URL DE L'IMAGES QUI CHANGE DU CADRE EN BAS LA NAVIGAUTION);background-color:#XXXXXX;}
td.edit_below_nav {visibility:hidden;}
td.nav a{color: #000000;}
td.headline{visibility:hidden;}
td.edit_header_full{background-image:url(URL DE L'IMAGES DE VORTE HEADER);}
td.edit_content_bottom{height:0px;}
td.edit_content_top{background-image:url(URL DE L'IMAGES PUR XCHANGER LA GRANDE BARRE DU HAUT DE CHAQUE PAGE); height:35px; background-repeat:no-repeat;}
td.edit_content_bottom2{background-image:url(PARREIL SAUF DE LA BARRE DU BAS);}
td.edit_content_bottom{background-image:url(URL DE L' IMAGES POUR L IMAGES DU CADRE EN BAS A DROITE);background-color:transparent;}
td.edit_content{background-image:url(URL DE L'IMAGES POUR CHANGER LE FOND DE CHAQUE PAGE);}
td.edit_content_bottom{height:0px;}
body{background-image:url(URL DE L'IMAGES POUR FOND DE PAGE DU SITE); background-attachment: fixed;background-color:#XXXXXX;}
td.sidebar_heading{background-image:url(URL DE L'IMAGE POUR CHANGER LES BOUTON DE TITRE DES CADRE A DROITE); height:35px; background-repeat:no-repeat;}
td.edit_rb_footer {visibility:hidden;}
td.edit_rechts_sbg{visibility:hidden;}
td.edit_rechts_cbg{background-image:url(URL);background-color:transparent;}
td.edit_rechts_bottom{background-image:url(URL);background-color:transparent;}
td.shouty{background-image:url(URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 1);background-color: ;}
td.shouty2{background-image:url(URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 2 );background-color: ;}
td.shouty3{background-image:url(URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 3);background-color: ;}
td.shouty4{background-image:url(URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 4);background-color: ;}
td.shouty5{background-image:url(URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 5);background-color: ;}
--> </style><style type="text/css">
<!--
html, body {
text-align: center;
}
-->
</style>

Voilà maintenant vous pouvez faire votre propre design avec vos images ! Mais la leçon n'est pas encore fini ! Vous pouviez toujours agrandir le design, le centré changer la taille du bouton, header ....

Leçon 3
Taille, centrer, élargir, décaler...


La code pour élargirs son design est:

table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}

Mais ne fonctionne pas sur tous les design (je pense).
Mais il faut le placer juste après ceci <style type="text/css"> et ton design prendra toute la alrgeur de ton écran.

Le code pour centré son design:

Tu colle le code dans "Texte au dessus de design"!

<div style="width:921px; position: relative; margin-left: auto; margin-right: auto;">

Voilà, maintenant ton design et centré en plein milleu de ton écran

IMPORTANT: Tous les code que je vous est donné ne marche pas sur tous les design mais en majorité ils marches !

_________________

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://da6c.fr.gd
series-tv
Graphiste
avatar

Messages : 284
Date d'inscription : 24/07/2008
Age : 23
Localisation : Aveyron; France

avertissements
avertissements:
0/3  (0/3)
niveau graphique:
2/100  (2/100)

MessageSujet: Re: Faire son design sous fr.gd[css]   Sam 16 Aoû - 14:46

Super Brian !
Ca va aider des gens je pense.

_________________




Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.series-tv.fr.gd
web-composants
Fondateur
avatar

Messages : 1343
Date d'inscription : 28/05/2008

avertissements
avertissements:
0/3  (0/3)
niveau graphique:
18/100  (18/100)

MessageSujet: Re: Faire son design sous fr.gd[css]   Dim 17 Aoû - 18:52

Oui,c'est là pour sa!

_________________

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://da6c.fr.gd
Fabien
Graphiste
avatar

Messages : 315
Date d'inscription : 02/08/2008
Age : 23

avertissements
avertissements:
0/3  (0/3)
niveau graphique:
5/100  (5/100)

MessageSujet: Re: Faire son design sous fr.gd[css]   Dim 17 Aoû - 18:57

Bravo tout simplement.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://design-decor.fr.gd
Contenu sponsorisé




MessageSujet: Re: Faire son design sous fr.gd[css]   

Revenir en haut Aller en bas
 
Faire son design sous fr.gd[css]
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Mareck Challenge : reproduction photo - Blender
» tag mp3
» PC sous Vista ne veut plus démarrer, que faire ?
» Impossible de faire une M.A.J avec Avira [Résolu]
» que dois-je faire apres avoir fait un scan avec hijckthis

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
web-composants :: les ressources :: Tutoriaux :: Autres-
Sauter vers: