Recherche un programmeur CSS/PHP
Pièces détachées Forum Contact

Recherche un programmeur CSS/PHP

Nous rachetons vos PC portables (et MAC) HS
spacebugs

Recherche un programmeur CSS/PHP

Hello tout le monde, (je sais pas si je suis au bon endroit.)
L'association EnjoyStation 3ème radio de france recrute un développeur web.
Notre web radio diffuse depuis VICHY, 35 000 auditeurs quotidien Page rank 6
Petite photo du studio http://www.enjoystation.net/technique.jpg
Une partie du site est déjà réalisée, il ne manque qu'une fin de code.
Pour le terminer nous recrutons un programmeur CSS/PHP
Nous demandons une personne compétente & disponibe pour intégrer ce projet
www.enjoystation.net donc c'est très urgent :)
Bref si quelqu'un est motivé n'hésitez pas ajouté dans votre msn enjoystation03[arob]hotmail.fr

Cordialement Marine
Le son fresh tu l'entend ou? Sur le www.enjoystation.net

 

Dernière modification par spacebugs ()



  



Guest-89

Re: Recherche un programmeur CSS/PHP

Bonjour,
Vous avez un projet et vous souhaitez trouver un prestataire informatique compétent rapidement ? Inscrivez-vous sur notre site internet www.anepi.fr, nous disposons d'un pool de développeurs variés, notre équipe peut vous réaliser votre appel d'offre aux conditions voulues. Venez vous inscrire, cela ne coûte rien, vous ne serez pas déçu. Cordialement, Dzialach Rémi, directeur SARL anepi



  



Guest-19

Re: Recherche un programmeur CSS/PHP

Bonjour, je m'appelle Guy merlin j'aimerais avoir un tutoriel et un logiciel pouvant me permettre de programmer en Xhtml et en css



  



Guysubneting

Re: Recherche un programmeur CSS/PHP

Bonjour, je m'appelle Guy merlin j'aimerais avoir un tutoriel et un logiciel pouvant me permettre de programmer en Xhtml et en css



  



drahmail

Re: Recherche un programmeur CSS/PHP

Bonjour,Guysubneting
votre demande es trés simple pour le servir alors:
PREMIERE PARTIE – LES BASES:
un bloc <div> peut être représenté comme cela :
Ce que vous voyez n'est qu'une représentation ! Les différentes parties ont
été agrandies pour pouvoir y intégrer les légendes.
Par contre, il faut bien que vous compreniez ce que vous voyez :
Chaque <div> possède donc :
● 4 marges (en anglais : margin)
● 4 bordures (en anglais : border)
● 4 rembourrages (en anglais : padding)
● 1 largeur (en anglais : width)
● 1 hauteur (en anglais : height)
J'attire votre attention sur le fait que la largeur et la hauteur sont définis à
l'intérieur du <div> : cela sera particulièrement important lorsque vous calculerez
(si, si, vous calculerez !) la taille que prennent vos <div> à l'écran.
Par défaut, si la largeur d'une boite n'est pas précisée, elle est de la largeur
de son parent (l'endroit où elle est ancrée, la largeur de page, la largeur de la boite
dans laquelle elle est elle-même incluse, etc..), donc la largeur maximum à sa
disposition.
Ces propriétés de boites peuvent être données de plusieurs manières, soit
en tapant chaque valeur pour chaque propriété, soit en regroupant ces valeurs
selon une règle d'écriture simple.
Comment écrire les valeurs pour les propriétés de base d'un <div> ?
Les propriétés « padding », « border », et « margin » peuvent regrouper les
valeurs de plusieurs manières :
je veux 1 pixel pour les 4 marges de mon bloc <div> s'écrit :
margin-top : 1px;
margin-right : 1px;
margin-bottom : 1px;
margin-left : 1px;
IMPORTANT : vous remarquerez qu'à chaque fois que j'ai passé un paramètre, j'ai
tapé la propriété, j'ai rajouté un double point vertical, tapé la valeur, puis j'ai
terminé la phrase avec un point virgule. C'est toujours de cette manière que vous
taperez les paramètres dans votre fichier css (nous y reviendrons après).
Je peux également grouper ces propriétés 2 par 2 ou les 4 ensembles (à
condition qu'elles soient identiques).
L'ordre des valeurs n'est pas anodin : quand on regarde la boite, on donne
les valeurs dans l'ordre suivant : haut, droite, bas, gauche (ou si vous préférez
l'exemple de la pendule : midi, 3h, 6h, 9h)
Je peux donc écrire la même chose qu'au dessus de cette manière :
margin : 1px 1px 1px 1px;
Je peux également regrouper les valeurs 2 par 2 : cela ne sera possible
que si vous ne donnez que 2 valeurs.
Dans ce cas, la première valeur correspond à haut et bas, la deuxième à
droite et gauche.
Exemple : je veux une marge en haut et en bas de 2 pixels et pas de marge à
gauche et à droite (donc marge égale à zéro).
Je peux donc l'écrire comme ceci :
margin : 2px 0px;
Enfin, si toutes les valeurs sont identiques (comme dans le premierexemple), il suffit de ne donner qu'une seule valeur.
Exemple : toutes mes marges sont réglées à 1 pixel de large
margin : 1px;
Et voilà !
A vous de trouver la meilleure façon d'écrire (la plus économique) : plus vos
fichiers sont gros, plus ils mettent de temps à se charger sur les navigateurs..
Pour terminer ces explications, il me faut ajouter une information
complémentaire : l'unité de mesure que j'ai utilisé est le pixel, mais il est possible
d'utiliser d'autres unités de mesure :
UNITES DE MESURE
● pixel (px) : point d'image calculé par rapport à la résolution d'écran. C'est
l'unité la plus simple à calculer. C'est cette unité qu'il vous faudra utiliser
pendant l'apprentissage avec ce tutoriel.
● Em (em) : « em » est calculé par rapport à la taille de police défini par
l'internaute pour visualiser les pages sur son navigateur. « em » se réfère à
la taille de la lettre « M ». C'est une unité très souple, mais qui demande un
peu de pratique pour l'utiliser (il faut créer son template en calculant les
différentes tailles par rapport à la taille utilisé par l'internaute..)
Les templates entièrement codés en « Em » sont dits « élastiques », la taille
des conteneurs variant avec la taille des contenus.
● pourcent (%) : unité relative.. Très utile pour créer un template avec des
tailles dynamiques. Cette unité doit toujours être calculée « par rapport à
un tout ». Si vous donnez une propriété ressemblant à « width : 75%; », c'est
75% de l'élément parent (de votre page, d'une autre boite <div> contenant
votre boite <div>, etc.., donc de l'espace dans lequel est intégré votre <div>).
Les templates codés en % sont dit « liquides », la taille des blocs s'adaptant
à la taille de l'écran où ils sont affichés.

Les unités « em » et « % » permettent d'avoir des zones d'affichage
« dynamiques » : ces zones vont changer de taille par rapport à l'affichage utilisé
par l'internaute. C'est un travail supplémentaire pour calculer vos templates, mais
cela vous permet d'avoir des templates « élastiques » ou « liquides ».
Dans ce tutoriel, je n'utiliserai que des valeurs fixes données en pixels :
vous pourrez vous amuser à créer vos templates avec d'autres unités de mesures
plus tard, mais vous serez obligé de travailler dans « l'absolu » (100% de « quelque
chose » n'est pas identique sur tous les navigateurs..)
Sachez enfin qu'il existe encore d'autres unités de mesure : vous les
trouverez sur les documentations en ligne traitant du Css.

Comment pas ser les paramètres d'affichage de chacun de ces <div> ?
Dans l'absolu, il est possible de donner les paramètres des <div> au
moment où on les crée dans le fichier index.php. Dans ce cas là, l'écriture est de
ce type
exemple : une boite de 300 pixels de large, 100 pixels de haut, avec une marge
haut, droite, bas, gauche réglée à 10px
<div style="width:300px; height:100px; margin:10px;"></div>
C'est possible..mais complètement à côté de ce que nous voulons faire !
Je vous rappelle que pour que votre template soit correctement codé (dans
la logique de ce tutoriel qui veut que nous ayons au final quelque chose de
« souple » et conforme aux standards), vous devez paramétrer vos boites, non pas
dans le fichier index.php, mais dans le fichier template_css.css !
Donc, pour cela nous allons ajouter un élément complémentaire : identifier
nos <div>
En reprenant le même exemple que ci-dessus, nous allons intégrer la boite
dans le fichier index.php avec un identifiant « maboite » (c'est pour l'exemple !!) et
ensuite réutiliser ce nom dans le fichier css pour expliquer au navigateur
comment afficher correctement la boite.
dans Index.php..
<div id="maboite"></div>
..et dans le fichier template_css.css
#maboite {
width:300px;
height:100px;
margin:10px;
}
C'est exactement pareil que dans l'exemple précédent en terme de résultat,
mais complètement différent en terme de « cohérence ».

Nous avons donc ici une nouvelle syntaxe (très simple !) à observer :
Un bloc <div> s'ouvre et se ferme (ne tapez pas le texte en italique !!!!) :
<div id="maboite"> on ouvre la boite
</div> on ferme la boite
Un bloc <div> se paramètre dans le fichier Css sous la forme (ne tapez pas le
texte en italique !!!!) :
#maboite { identifiant utilisé pour insérer la boite dans le fichier
index.php, l'identifiant est précédé du symbole dièse
(« ALTGR »+ « 3 ») et on ouvre une accolade
(« ALTGR »+« 4 »)pour signaler le début de l'écriture des
propriétés
width:300px; propriété terminé par ;
height:100px; propriété terminé par ;
margin:10px; propriété terminé par ;
} on ferme l'accolade (« ALTGR » + « + ») pour signaler que
cette partie est terminée
A noter :
● Dans un fichier Css, vous pouvez ajouter des commentaires en utilisant la
syntaxe suivante : /* commentaires */ ou /** commentaires **/
Il est important que vous commentiez vos fichiers (je vous le redirai plus loin !)
● Les raccourcis claviers de type « ALTGR » sont des raccourcis standards
fonctionnant dans tous les logiciels : ce ne sont que des codes claviers
permettant d'obtenir les différents caractères du clavier..
Erreurs courantes
Lors de vos saisies, vous allez..vous planter ! Bah oui, comme tout le
monde !
A moins que vous puissiez garantir l'absence de faute de frappe,
d'inattention, que vous ayez une expérience de codage importante (et encore !)
etc.. Tout le monde se plante.

● Pensez à relire chacune de vos lignes,
● vérifiez l'orthographe des mots,
● vérifiez les ponctuations..
C'est souvent ce qu'il ressort des appels aux secours « Eh, mon template ne
marche pas ! » et qui se traduit par « eh ! T'as oublié un point virgule à la fin de la
4e ligne ! »
Dans les fichiers que vous créerez, la moindre erreur entraînera un
dysfonctionnement de votre template..
NOTE SUR « ID »
Je vous ai parlé de « id » pour identifier vos div. Il existe également un autre
moyen d'identifier les div : « class ». Pour faire simple (il existe de grandes
discussions sur ce sujet !), considérez la chose suivante :
si un sélecteur (div ou autre) est utilisé plusieurs fois dans un document, vous
utiliserez « class », (par exemple un div permettant d'utiliser un style),
si un sélecteur (div ou autre) n'existe qu'une seule fois et n'est déclaré et utilisé
qu'une seule fois dans votre index.php, vous utilisez « id ».
Dans les exemples suivants, les différents div sont uniques, donc je n'ai utilisé
que des « id ».
De plus, les « id » ont une plus grande importance dans le css en cas de conflit
(règles se contredisant), si vous avez un « class » stipulant une règle contraire à
celle d'un « id » au même endroit, c'est le « id » qui est appliqué.
Pour ces notions de css, il faudra sans doute développer un peu plus : je pense
que je vous livrerai rapidement un complément regroupant les règles css ainsi
que différents exemples, mais en attendant, à vous de chercher sur le net..
Un bon point de départ pour votre recherche est ici :
http://wiki.media--box.net/documentation/css/


Bon, faisons le point : vous avez compris ce qu'est une boite <div> et
comment la paramétrer.
C'est pas mal ! Mais c'est pas suffisant ! :))
Nous devons maintenant comprendre comment, après avoir donné les
tailles de nos boites, les positionner sur la page.
Il existe plusieurs possibilités de positionnement de vos boites. Je ne vous
donnerai que les éléments qui vous permettront de créer le template de cet
exemple, puis les vôtres ensuite. Vous pourrez en théorie réaliser tous les
templates possibles, mais certains demanderont une analyse efficace pour que
vous arriviez à vos fins..
De plus, la totalité des propriétés Css demanderait que je ré-écrive une doc
de plusieurs dizaines de pages, documentation ayant déjà été réalisée ailleurs !

Règle n°1 des <Div> : toutes les boites sont dans le flux par défaut
Par défaut, chaque boite que vous positionnerez dans votre page sera
automatiquement passée à la ligne, quelque soit sa taille
Ainsi, si j'ai 3 boites de 200 pixels, 250 pixels, 300 pixels, respectivement,
elles s'afficheront ainsi dans le navigateur (ne faites pas attention aux couleurs de
fonds et bordures):
Chaque boite créée est donc automatiquement renvoyée à la ligne, même
si il reste de la place pour afficher la suivante à la suite.
On parle alors de « flux », un petit peu à la manière d'un cours d'eau où les
différentes caisses (nos boites) se suivent les unes sous les autres sans se
chevaucher.
Il va être possible de faire sortir les boites du flux en les faisant « flotter »
au dessus de celui-ci.


Règle n°2 des <Div> : toutes les boites peuvent sortir du flux
Il est heureusement possible de sortir les boites du flux en utilisant une
propriété pour les faire « flotter » au dessus du flux : float
Cette propriété sera activée de 2 manières :
● float: left; La boite sera collée au premier espace disponible en partant de
la gauche de l'écran
ou
● float:right; La boite sera collée au premier espace disponible en partant de
la droite de l'écran
La propriété « float » reste active jusqu'à qu'elle soit désactivée soit à
gauche, soit à droite, soit entièrement :
La commande suivante désactivera le « flottement » d'une boite :
● clear:left; Le flottement est annulé sur la gauche à partir de ce point
● clear:right; Le flottement est annulé sur la droite à partir de ce point
● clear:both; Le flottement est annulé sur la gauche et la droite à partir de ce
point
« Clear » ramène donc le fonctionnement des boites automatique avec un
passage à la ligne

Pour résumer « float » et « clear » :
● lorsque « float » est utilisé, la boite va flotter au premier emplacement
gauche ou droite (suivant ce que l'on a spécifié),
● si une autre boite « float » est déclarée, elle se colle à la précédente si il lui
reste suffisamment de place pour le faire (les largeurs des boites
s'additionnent et doivent tenir dans la largeur de l'espace ou elles se
trouvent)
● si on veut stopper le « flottement » des boites, on utilise la propriété
« clear », cela permet de générer un retour automatique à la ligne.
● si rien n'est spécifié, c'est la propriété parente qui l'emporte : si la propriété
précédente était « clear », elle reste en « clear »
● si vous utilisez une boite en « float », spécifiez toujours si la boite flotte à
gauche ou à droite.
● si vous avez des boites flottantes, pensez à spécifier une largeur !!! Les
boites flottantes sans largeur peuvent devenir...folles !..et partir se loger
n'importe où !


Quelques exemples seront les bienvenus..
dans index.php, nous déclarons 4 <div>
<div id="boite1"></div>
<div id="boite2"></div>
<div id="boite3"></div>
<div id="boite4"></div>
je veux obtenir quelque chose comme ça (encore une fois, je ne parle que du
positionnement, pas des couleurs ou des textes !) :
NOTE : Pour la suite, les commentaires seront tapés tels qu'ils devraient l'être dans
le fichier css :
/** on ouvre un commentaire
**/ on ferme un commentaire
Utilisez les commentaires pour pouvoir vous relire !!


je
considère que ma largeur écran fait 960 px de large) :
#boite1 { /**toujours pareil : identifiant et accolade**/
width:960px; /**largeur boite 1 ;**/
height:100px; /**hauteur boite 1**/
margin:1px; /**marge générale de 1 pixel**/
padding:1px; /**rembourrage générale de 1 pixel**/
clear: both; /**inutile ici, c'est la première boite ! Mais je le mets pour
que vous puissiez le « voir » **/
} /** on ferme l'accolade pour signaler que cette partie est
terminée**/
#boite2 { /**rebelote ! : identifiant et accolade**/
width:460px; /**largeur boite 2 ;**/
height:100px; /**hauteur boite 2**/
margin:1px; /**marge générale de 1 pixel**/
padding:1px; /**rembourrage générale de 1 pixel**/
float: left; /**la boite doit se coller sur le premier « emplacement
libre » à sa gauche, donc, ici à gauche de l'écran (la page,
le « body ») et on ne passe pas à la ligne après**/
} /** on ferme l'accolade pour signaler que cette partie est
terminée**/

#boite3 { /**belote !(euh, j'aurais du écrire ça avant rebelote..) :
identifiant et accolade**/
width:500px; /**largeur boite 3 ;**/
height:100px; /**hauteur boite 3**/
margin:1px; /**marge générale de 1 pixel**/
padding:1px; /**rembourrage générale de 1 pixel**/
float: left; /**On colle sur le bord gauche. Premièrement emplacement
libre, donc à la suite de la boite 2**/
} /** on ferme l'accolade pour signaler que cette partie est
terminée**/
#boite4 { /**Dix de der ! (là j'ai bon, m'sieur !) : identifiant et
accolade**/
clear: both; /**Cette fois, je veux retourner à la ligne ! J'annule donc le
« flottement »..**/
width:960px; /**largeur boite 1 ;**/
height:100px; /**hauteur boite 1**/
margin:1px; /**marge générale de 1 pixel**/
padding:1px; /**rembourrage générale de 1 pixel**/
} /** on ferme l'accolade pour signaler que cette partie est
terminée et nous avons terminé..**/
Les propriétés « float » et « clear » peuvent être utilisées de multiples
manières et permettent différents montages. Je vous donnerai quelques trucs au
fur et à mesure de notre progression.
Pour l'instant, on a un boulot à terminer de comprendre !
Notez qu'il existe bien d'autres manières de positionner des <div> : je ne
vous décris que ce dont nous avons besoin pour travailler sur le template de ce
tutoriel.
Je vous ai joint en annexe de ce tuto la feuille de référence Css publiée sur le net
sous licence GPL. A vous d'allez chercher les significations de chaque propriété si
vous voulez toutes les utiliser .


Comment utiliser tout ça avec nos images découpées ? Comment tout
ré-assembler ?
Je ne vais utiliser que les propriétés css qui nous sont indispensables pour
ce montage.
Je reviendrai sur le css lorsque nous arriverons à la dernière partie du tuto
pour l'explication complète des fichier css..
Chaque <div> peut avoir, entre autres, les propriétés suivantes (ce sont les
propriétés qui seront utilisées dans ce tutoriel pour les <div>.
Une liste complète de toutes les propriétés se trouve en annexe dans la page
« liens ».
Je vous conseille de lire ces pages pour le détail complet des valeurs de
propriété, les compatibilités des navigateurs, les ordres d'écriture) :
background : regroupe les propriétés pour le fond d'un bloc (couleur, image,
répétition, etc..). Voir la documentation Css pour plus de détails sur cette
propriétés.
background-color : couleur de fond
background-image : image de fond
background-position : position de l'image de fond (analysez Rhuk_solarflare pour
l'image de fond des boutons et vous comprendrez)
background-repeat: répétition en x, y de l'image ou empêche la répétition
height : hauteur de la boite
width : largeur de la boite
margin (margin-top, margin-right, margin-bottom, margin-left) : marges de la
boite
padding (padding-top, padding-right, padding-bottom, padding-left) :
rembourrages de la boite
float (float:left, float:right) : permet de sortir une boite du flux (désactive le
retour à la ligne après une boite par défaut)
clear (clear:left, clear:right, clear:both) : permet de réintégrer le flux après avoir
utilisé la propriété float. Indispensable dans ce tuto et plus tard dans vos
réalisations !
Avec ceci, nous allons être en mesure de mettre notre template en forme,
même si certaines propriétés manquent pour que ce soit parfait...



  



Guest-18

Re: Recherche un programmeur CSS/PHP

Throughout this great pattern of things you'll receive  a B- just for effort and hard work. Where exactly you actually misplaced us was first on all the specifics. You know,  it is said, the devil is in the details... And it couldn't be much more true right here. Having said that, allow me inform you what did give good results. The text is certainly very engaging which is most likely why I am making an effort in order to opine. I do not really make it a regular habit of



  



Réponse rapide

forum Répondez et participez librement forum
Services informatiques Merci d'écrire un message de plus de 10 mots en français correct. (Tout message mal rédigé sera effacé.)

Pied de page des forums

Forum : Réseau - Sécurité - Materiel
Php - Référencement - Serveurs - Divers
Windows - Internet - Logiciels - Communication
SARL Brakstar / 485 013 809 R.C.S. BOURGES
2 rue de coulon. 18310 Graçay
Mail : societe@brakstar.com
USA EN ES BR PO DE NL IT SU DN HU JP TE RU PL FI NO GR SE SL ET TH UK SL IN LH RO LE HE BG CZ MS CAT IR CR