Aide pour mise en place

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 15/02/2014 à 20h17

Reprise du message précédent

Citation:

J'ai comprit une chose ==> margin c'est la marge qui as entre chaque logo .. mais sa les fait pas centré .. c'est l'espace .. -_-

Oui c'est ce qui permet d'espacer les le a. id="facebook" et compagnie... Mais c'est aussi ce qui peut gérer la hauteur sur des éléments flottants comme tes images qui est permis dans chaque #tartampion par "float:left" dans ton code css.

Je comprends que tu veuilles le faire seul .. Mais si tu veux pouvoir faire ce que tu veux , utilise les fonctionnalité des navigateurs pour t'aider ..

Firefo avec le plugin : firebug => inspect élément .. Tu connais le tuto vidéo, vu que je l'ai fait quand tu étais apprenti .. ou sinon avec Chrome avec la touche F12 et en cliquant sur "element" ... le tuto existe aussi si ma mémoire est bonne ..

Ensuite il faut quand même que tu potasses un peu les bases avant de te lancer dans ce genre de modification

A toi de voir.

swan_signature

Site web

Tsuna-Fa

EDN Motivé(e)

Rang

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 15/02/2014 à 20h31

euh .. deja utiliser .. toute tes chose que tu dite .. Mais pareil faut je touche a chaque fois un peu au hasard .. la qui faut :

recentrée les logo au centre ,
Regardé si tous est correct point de vue longueur car il me manque des contour .. Fin bref .. c'est pas encore tout je vais pouvoir faire un thème ..

Surtout me reste encore a mettre un menu la sa va etre encore drole a mon avis .. Edité par Tsuna-Fa Le 15/02/2014 à 20h35

Site web

janus57

EDN Erudit(e)

Rang

Inscrit le : 14/01/2013 à 21h59

Messages: 1018

Le 15/02/2014 à 20h31

Bonsoir,

avant toute chose y a ceci à lire : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Ensuite pour avoir un renseignement précis sur une balise (X)HTML/CSS/JS y a ceci : http://www.w3schools.com/

Enfin pour Firefox il y a cette addon : https://addons.mozilla.org/fr/firefox/addon/firebug/
Et pour chrome il a la même chose : https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench

Et pour finir le tout faut absolument bosser en local pour aller plus vite, donc dans ce cas faut utiliser WAMP ou XAMPP sous windows, sous linux LAMP suffit et sous MAC aucune idée (désolé).

Pourquoi ?

Tout simplement parce que en local le chargement des images/éléments est bien plus rapide et surtout que les modifications sont pris instantanément en compte.

Résumé global pour tout le monde :

Connaitre un minimum HTML/CSS (de préférence supérieur à HTML4 quand même)
Avoir les bon logiciel pour avoir la coloration syntaxique (notepad++ ou geany ou autre)
Avoir un local pour faire des test c'est toujours mieux (et plus rapide).
Avoir un navigateur "récent" (stop utiliser IE 6-7-8, même la version 11 n'est pas à jour niveau HTML/CSS/JS)
Utiliser les bon addons (voir plus haut)
Avoir de la patience et l'envie de progresser malgré les difficultés ou le temps mis pour résoudre un problème si vous êtes pas motivé du tout tout ce qui a été dit avant ne sert à rien (ou quasiment).

Cordialement, janus57

Tsuna-Fa

EDN Motivé(e)

Rang

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 15/02/2014 à 20h38

.... tu voie janus je savais tu allez me dire sa .. mais tu sais que j'en pense .. je préféré apprendre sur le tas que lire des truck que je comprend absolument pas voie tu .. et a la base tu est tout de même le dev des site fun-animes il me semble moi je fait que je peux et tu le sais bref .. je vais pas plus loin .. Bref je vais reprendre a zéro le thème et voir ou été le souci .. Edité par Tsuna-Fa Le 15/02/2014 à 20h48

Site web

janus57

EDN Erudit(e)

Rang

Inscrit le : 14/01/2013 à 21h59

Messages: 1018

Le 15/02/2014 à 20h48

Tsuna-Fa:

.... tu voie janus je savais tu allez me dire sa .. mais tu sais que j'en pense .. je préféré apprendre sur le tas que lire des trcuk que je comprend absolument pas voie tu .. et a la base tu est tout de même le dev des site fun-animes il me semble moi je fait que je peux et tu le sais bref .. je vais pas plus loin .. Bref je vais reprendre a zéro le thème et voir ou été le souci ..

Bonsoir,

seul problème, le HTMl comme le PHP ou tout autre chose en informatique tu est pratiquement obliger d'apprendre les bases quelque part, ce genre de chose ne s'apprend pas sur le tas, tu va pas apprendre tout seul comment mettre tel ou tel doctype, ce que tu peu/ne peu pas mettre dans <head>, dans <body> etc...

Sur le tuto donnée plus haut tu as à la fin un TP qui t'apprend un crée un site basic en HTML/CSS ce que en gros tu essaye de faire avec le template phpboost, car oui les template phpboost n'est ni plus ni moins qu'un squelette en HTML/CSS qui est remplis par php.

Je suis aussi passé par ce tuto quand il était encore en XHTML 1.0 et CSS2

Cordialement, janus57

Tsuna-Fa

EDN Motivé(e)

Rang

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 15/02/2014 à 21h26

question :

-- text-align: left; /* centre le texte */

il centre tout les texte des colonne certes mais aussi ceux des flux extérieur . pas moyen de mettre que ceux des top menu en centrée .. ??

Site web

Tsuna-Fa

EDN Motivé(e)

Rang

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 15/02/2014 à 21h59

Code CSS :

#facebook            {float: left ;background:url('images/facebook.png');width:50px;height:50px;margin:0px 0 0 480px;padding:0} 
#facebook:hover      {background:url('images/facebook.png');width:50px;height:50px;}
#twitter          {float: left ;background:url('images/twitter.png');width:50px;height:50px;margin:0px 0 0 11px;padding:0}
#twitter:hover      {background:url('images/twitter.png');width:50px;height:50px;}
#rss          {float: left ;background:url('images/rss.png');width:50px;height:50px;margin:0px 0 0 11px;padding:0}
#rss:hover      {background:url('images/rss.png');width:50px;height:50px;}
#google             {float: left ;background:url('images/google.png');width:50px;height:50px;margin:0px 0 0 11px;padding:0}
#google:hover    {background:url('images/google.png');width:50px;height:50px;}

Trouver pour centrée comme screen si dessous mais les descendre c'est ou ? en prenant mon temps .. on y arrive ^^

La ou j'ai placer les logo voici le bout de code :

Code CSS :

* ##### Pied de page ######*/
 
div#footer {
    background: url("images/footer.png") no-repeat scroll center center #888E96;
    height: 167px;
    margin: 0 auto auto 0;
    min-width: 100%;
    padding: 0 0 0 0;
    text-align: center;
}
div#footer span {
    color:#FFFFFF;
    font-size:10px;
}
div#footer span a {
    color:#FFFFFF;
    font-size:10px;
}
#facebook            {float: left ;background:url('images/facebook.png');width:50px;height:50px;margin:0px 0 0 480px;padding:0} 
#facebook:hover      {background:url('images/facebook.png');width:50px;height:50px;}
#twitter          {float: left ;background:url('images/twitter.png');width:50px;height:50px;margin:0px 0 0 11px;padding:0}
#twitter:hover      {background:url('images/twitter.png');width:50px;height:50px;}
#rss          {float: left ;background:url('images/rss.png');width:50px;height:50px;margin:0px 0 0 11px;padding:0}
#rss:hover      {background:url('images/rss.png');width:50px;height:50px;}
#google             {float: left ;background:url('images/google.png');width:50px;height:50px;margin:0px 0 0 11px;padding:0}
#google:hover    {background:url('images/google.png');width:50px;height:50px;}

Edité par Tsuna-Fa Le 15/02/2014 à 22h04

Site web

NK-aide

EDN Concerné(e)

Rang

Inscrit le : 24/09/2013 à 16h07

Messages: 238

Le 15/02/2014 à 22h36

Bonsoir ,

Poste intéressant je trouve même que cela peut servir de tutoriel je me trompe peut être

Cordialement

Edité par NK-aide Le 16/02/2014 à 18h22

Merci swan et sont équipes

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 15/02/2014 à 23h08

Re,

NK oui cela pourra servir

Mais je l'ai répété maintes fois .. j'ai même fait des vidéo pour les extras de pbt.

@ Tsuna-Fa Dans ton footer.tpl, en dessous du code fermeture de ton div ... que tu as posé, essaie un <br /> .

swan_signature

Site web

Tsuna-Fa

EDN Motivé(e)

Rang

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 16/02/2014 à 00h00

nn sa fait pareil ..

Site web

Tsuna-Fa

EDN Motivé(e)

Rang

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 16/02/2014 à 00h22

je te rar l'archive pour tu regarde ..

http://www.partage-facile.com/X2GWLMEOTL/movie_theme.rar.html

La faudrait que les logo passe en 1er case blanche et l’écriture dans la case grise .. demain j'attaque le header avec mon ami ^^ Edité par Tsuna-Fa Le 16/02/2014 à 00h24

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 16/02/2014 à 11h27

Bonjour,

J'ai bien l’archive, par contre j'ai pas le code dans le "footer.tpl" et pas le code dans le "design.css". Et pour être sur j'ai cherché les icones elles ne sont pas présentes dans l'archive .. donc

Tu es sur que c'est la bonne archive ?

swan_signature

Site web

Tsuna-Fa

EDN Motivé(e)

Rang

Inscrit le : 09/11/2012 à 15h04

Messages: 254

Le 16/02/2014 à 12h13

Bonjour,

erf attend j'ai du me tromper ..

tiens : http://www.partage-facile.com/HDK38SKNB2/movie_theme.rar.html sa dois etre la bonne celle si ^^

je ferais le renomme quand j'aurais tout fini .. ^^ Tiens d’ailleurs si tu peux pouvez me faire les onmbre de chaque coté que je sais pas faire comme celui que j'ai actuellement ici :

http://radio.fun-animes.fr/ tu voie de chaque coté les ombre noir tu peux en faire autant pour celui si car comme j'ai dit plus haut je sais pas faire de mon coté ^^

Merci Edité par Tsuna-Fa Le 16/02/2014 à 12h17

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 16/02/2014 à 17h19

~~Je regarde ^^~~