Recherche dans le forum:
Rechercher


« Voir le sujet précédent :: Voir le sujet suivant »  
Auteur Message
Message14/07/2008, 01 01 21 (UTC)    
Sujet du message: Pour modifier son design

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!!!!
Message14/07/2008, 03 03 16 (UTC)    
Sujet du message:

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 Laughing (non testé!!)Question

A mètre au-dessus du design!! car sa concerne la bannière (pas que!) et le centrage du site

<div align="center">
<table border="0" width="70%" id="center">
<tr>
<td>
<div id="Design"> <div id="Header_oben"></div>

A mètre en dessous du design car sa concerne ce ki se passe en dessous du site

<div id="Feld_unten"><b> </b></div></div>
</td>
</tr>
</table>
</div>

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
#Header_oben { height: 180px; width: 915px; background: ; background-image:url(http://urldelimage.jpg);
color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left; position:absolute;left:45px;top:50px;}
body {background-image:url(http://urldelimage.jpg);
background-position: center center;}
a{color:#ffffff; font-size: 15px; text-decoration: none;}
a:hover {color: #ffffff; font-size: 15px; text-decoration: none;}
a:link {color: #ffffff; font-size: 15px; text-decoration: none;}
a:active {color: #ffffff; font-size: 15px; text-decoration: none;}
a:visited {color: #ffffff; font-size: 15px; text-decoration: none;}

li.nav_element a{ color:#ffffff; display: block; margin: 5px; padding-left: 0px text-decoration: none; width: 80px; height: 25px;
background-image:url(http://urldelimage.jpg); background-color:}
li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 80px; height: 25px;
background-image:url(); background-color:} * { padding: 0; margin: 0; }
#Design { margin: 0 auto; width: 922px; }
#nav_container { width: 90px; height: 340px; background: ; background-image:url(http://urldelimage.jpg);
color: ; border: 1px solid #0000E1; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; position:absolute;left:284px;top:240px;}
#content { height: 340px; width: 540px; background:; background-image:url(http://urldelimage.jpg);
color: #ffffff; border: 1px solid #0000E1; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; position:absolute;left:399px;top:240px;}
#sidebar_container { height: 340px; width: 214px; background: ; background-image:url(http://urldelimage.jpg);
color:#ffffff ; border: 1px solid #0000E1; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; position:absolute;left:45px;top:240px;}
#counter{display: none;}


légende:
en vert adresse de l'image hébérgé
sur http://keepi.free.fr/ par éxemple

en bleu le "systém encrage" (cé pas sa mé bon!)
éxemple <div id="Header_oben"></div> envoi voir à #Header_oben

en rouge la taille et couleur des diféren textes
#000000 correspond à la couleur noire et #FFFFFF à la couleur blanche!!
vous voulé crée une couleur et avoir son code couleur hexadeximal
faut téléchargé : La boite à couleurs>>
génial ce petit programme--->tu peux chopé le code couleur à l'aide d'une pipéte partou sur ton écran!!!
Wink

"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

Mais vraiment si tous ce qui est en haut te paré du chinois!!! rend toi sur le site du zero pour te familiarisé avec tous ses codes
Wink
http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html
clique!!! Arrow

cé long et laborieu mais sa explique bien!!


Dernière édition par u2f le 14.07.2008, 15:48; édité 6 fois
Message14/07/2008, 05 05 38 (UTC)    
Sujet du message:

wow merci, ca c'est ce que jappel de laide!! tout est beaucoup plus claire maintenant
Message15/07/2008, 00 12 35 (UTC)    
Sujet du message:

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 Laughing Rolling Eyes

<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
Message15/07/2008, 01 01 11 (UTC)    
Sujet du message:

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.

au plaisir déchanger a nouveaux,
Dan
Message15/07/2008, 01 01 37 (UTC)    
Sujet du message:

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.

Smile

______________
Amitiés, gigi, modératrice

Je vous recommande mes sites : http://gisoft.t15.org - http://3dscreensaver.t15.org- http://freeimage.t15.org
Message15/07/2008, 08 08 18 (UTC)    
Sujet du message:

Monsieur stp Gigi (avec un grand M.) merci Surprised

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 Laughing
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?? Wink
allé bon courage
et amuzé vous bien


Dernière édition par u2f le 16.07.2008, 20:49; édité 2 fois
Message15/07/2008, 10 10 40 (UTC)    
Sujet du message:

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:

Citation:
#content { height: auto; width: 569px; background:; background-image:url(http://keepi.free.fr/12159213627.png);

Wink
______________

Visitez :
Message15/07/2008, 15 03 10 (UTC)    
Sujet du message:

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 Wink
Message15/07/2008, 15 03 24 (UTC)    
Sujet du message:

Oui je sais,je suis un peut "trop" maniaque!J'aime le travaille bien fait!Bon continuation a toi! Wink
______________

Visitez :
Message16/07/2008, 19 07 13 (UTC)    
Sujet du message:

merci... jé refait tous le disign toute façon
au passage si vous voulé une petite régle pour tous mesuré sur votre écran
gradué en pixél ...

http://uplofile.free.fr/rep4/26348189pixelruler.zip (.exe compressé)

sa peu étre utile pour savoir la marge qui réste par éxemple Razz


Dernière édition par u2f le 16.07.2008, 20:17; édité 1 fois
Message17/07/2008, 08 08 55 (UTC)    
Sujet du message:

Merci! Wink
______________

Visitez :
Montrer les messages depuis:   


Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com