Partage

Faire une bannière head

1 2 >>

18 octobre 2014 à 19:27:00

Bonjour je fais actuellement un site internet et j'aimerais faire une banniere comme le truc bleu foncé de facebook et le truc gris foncé en haut du site open classroom.

mais je ne sais pas comment m'y prendre pourrait t-on m'aider

PS: Je suis des cours html et css

(Ceux qui veulent un apercu de quoi je parle ) http://www.k33g.org/?q=book/export/html/33

-
Edité par tester00 18 octobre 2014 à 19:33:34

B3lgium

18 octobre 2014 à 19:38:18

D"après ton site, la bannière est un simple <header>, auquel on applique un background.

header
{
     background-color: red;
}

pour le site que tu as donné.

-
Edité par B3lgium 18 octobre 2014 à 19:40:30

tester00

19 octobre 2014 à 13:12:40

merci et pour la taille du truc ?

Et peut on inserer un nom ?

B3lgium

19 octobre 2014 à 15:28:56

Pour que la bannière occupe toute la place, il faut supprimer les marges par défaut du body ;

body
{
    margin: 0;
    padding: 0;
}

Ensuite, pour régler la taille de la bannière :

header
{
     background: red;
     height: 200px;
     width: 100%;
     margin: 0;
     padding: 10px;
}

Height peut bien sûr varier, mais là, c'est à toi de voir.

Par contre, qu'entend-tu par "insérer un nom ?"

-
Edité par B3lgium 19 octobre 2014 à 15:59:39

tester00

19 octobre 2014 à 16:53:02

Le nom de mon site enfaite dans la banniere comme facebook genre ecrire le nom du site dans la banniere

tester00

19 octobre 2014 à 16:54:07

par contre j'arrive pas a mettre ensemble mon css avec mon html

Nymphea_alba

19 octobre 2014 à 16:56:53

Bonjour,

dans ton code html tu peux ajouter le titre

</header>

dans ton css tu peux ensuite lui appliquer la police et le style que tu veux

h1{

font-size: 2em;

color: #fff;

}

Nymphea_alba

19 octobre 2014 à 16:59:07

Dans ton html tu dois mettre une balise <meta> dans la balise <head>

<!DOCTYPE html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

</body>

</html>

-
Edité par Nymphea_alba 19 octobre 2014 à 16:59:58

B3lgium

19 octobre 2014 à 17:03:03

Tout est dit

tester00

19 octobre 2014 à 17:10:45

Je n'ai pas encore concu de site j'en suis a la page d'acceuil et au formulaire et merci a vous

Le site rouge était un exemple a part ca je test et je vous donne des nouvelle merci

tester00

19 octobre 2014 à 17:12:13

j'ai pas compris nymphea

Je dois dire le nom de mon fichier css c'est ca ?

Nymphea_alba

19 octobre 2014 à 17:22:14

Oui, par convention, ta première page html se nomme index.html, c'est le fichier qui est lu en premier par le navigateur quand le visiteur accède à ton site. Et dans cette fameuse page html tu vas déclarer ton fichier css. En gros tu lui dis va chercher la feuille de style à cet endroit. Si les deux fichiers (html et css) sont dans le même dossier, ce que je te conseille au début, tu nommes ton fichier style.css et tu mets ce code : <link rel="stylesheet" type="text/css" href="style.css" /> dans la balise meta.

link rel="stylesheet" explique que tu vas déclarer l'emplacement de la feuille de style, href="EMPLACEMENT-FEUILLE-DE-STYLE" déclare l'emplacement et le nom de ton fichier css.

tester00

19 octobre 2014 à 17:22:30

Voila j'ai suppr mes truc que je veux pas montrer j'ai c/c le debut regarder car j'ai pas compris et j'ai rename mon css en ton site

CSS:

body

{

margin: 0;

padding: 0;

}

header

{

background: red;

height: 200px;

width: 100%;

margin: 0;

padding: 10px;

}

h1{

font-size:30px;

font-style:italic;

font-weight:bolder

}

Fichier HTML

<!DOCTYPE html>

<html>

<head>

</head>

</header>

<body>

</body>

</html>

Alors ?

tester00

19 octobre 2014 à 17:23:20

ok et mon coding est bon

A part ca j'ai enregistrer et ca me l'ouvre en fichier texte est ce normal (CSS)

Le link css ca marche merci mais je peux pas rendre la couleur plus bleu foncé comme instagram et facebook

-
Edité par tester00 19 octobre 2014 à 17:25:57

B3lgium

19 octobre 2014 à 17:27:21

Pour la couleur, tu dois juste changer cette propriété CSS :

header
{
    background: ; */ La couleur que tu veux pour ta bannière*/
}

Pour t'aider dans le choix de la couleur, http://www.code-couleur.com/ , tu n'aura qu'a entrer le code hexadécimal ( #..) après background:

-
Edité par B3lgium 19 octobre 2014 à 17:32:51

tester00

19 octobre 2014 à 17:28:56

Nymphea_alba

19 octobre 2014 à 17:33:29

Hum je vois pas la déclaration de la feuille de style dans ton html là... tu n'as pas mis la ligne orange !

Pour mettre la couleur de Facebook, il faut que tu mettes la couleur à la place de "red". Logique ! en gros tu dis à ton header de mettre un fond rouge là (background: red;) là il faut que tu mettes background: #336699;

Pour trouver les couleurs en #0000; il faut que tu utilises un nuancier comme dans photoshop, tu ouvres l'image de Facebook par exemple et avec la pipette tu regardes quel nombre correspond à la couleur.

tester00

19 octobre 2014 à 17:36:04

j'ai fait un #000080 navy et #191970 mightblue ca ressemble pas du tout

tester00

19 octobre 2014 à 17:36:13

J'ai pas photoshop

Nymphea_alba

19 octobre 2014 à 17:38:23

Utilise le lien que B3lgium t'as donné ! Je n'avais pas vu sa réponse en rédigeant la mienne

moi je trouve #336699 pour la couleur de Facebook

tester00

19 octobre 2014 à 17:39:39

Je viens d'ouvrir pour voir et en haut il y a comme un trait vide comment combler ce blanc ?

maj : il est partis

-
Edité par tester00 19 octobre 2014 à 17:43:45

B3lgium

19 octobre 2014 à 17:41:27

La couleur exacte de la bannière facebook est #3b5998

( PS: Si tu utilise chrome ou firefox, il y a un plugin utile pour ça : ColorZilla, une sorte de "pipette" en ligne.)

tester00

19 octobre 2014 à 17:41:59

merci en tout cas les gars pour votre aide je croyais pas etre autant aidé je vous en remercie comment on prend un screen de son pc je vais vous montrer le resultat

Nymphea_alba

19 octobre 2014 à 17:44:46

Est-ce que tu as lu les cours html/css en ligne ?

Au début on tâtonne, on apprend un peu en faisant n'importe quoi, on test, petit à petit on comprend de mieux en mieux le code. Je pense que tu devrais jouer un peu avec le code et revenir d'ici quelques jours avec ce que tu n'as pas pu résoudre seul. Si on te donne le code qu'il faut à chaque fois tu ne comprendras jamais les raisons et n'arriveras jamais à rédiger tes codes seul, ce qui est dommage.

Pour ta question, je pense que c'est une question de positionnement. Il faut que tu regardes la rubrique du positionnement fixed avec top: 0; en Css.

Bon courage

tester00

19 octobre 2014 à 17:46:02

Merci ca maaaaarche

tester00

19 octobre 2014 à 17:47:10

Enfaite j'ai appris ici http://www.youtube.com/watch?v=8FqZZrbnwkM

J'aime pas trop les cours ecrit je vois pas donc j'ai peur des erreurs

tester00

19 octobre 2014 à 17:49:42

Je suis entrain d'apprendre le positionnement car la je veux mettre le titre bien Merci a vous vous etes les best

B3lgium

19 octobre 2014 à 17:50:40

On est tous passés par les erreurs, mais comme le dit Nymphea, on teste et on comprend de mieux en mieux.

Bon courage !

Nymphea_alba

19 octobre 2014 à 17:51:28

Franchement télécharge le pdf histoire de pouvoir t'y reporter. J'ai toujours gardé le pdf depuis quelques années pour m'y reporter en cas de doute. Une fois que tu as les bases, tu t'en sers comme d'un dictionnaire, à la fin il y a un récapitulatif de toutes les balises html5 et Css3. Hyper utile au quotidien, avant de t'adresser au forum il y a de fortes chances que la réponse soit dedans, tu fais rechercher dans le pdf avec le mot clé "fixed" par exemple pour accéder à toutes les occurrences de cette notion. Bref voilà pour moi ce qui a fonctionné

Je te souhaite de poursuivre l'apprentissage, plus tu coderas, plus tu prendras du plaisir, plus tu comprendras et trouveras de nouvelles difficultés à réaliser ahahah !

tester00

19 octobre 2014 à 17:51:39

Merci encore

1 2 >>

Faire une bannière head

Supprimer

Modérer

Signaler le message aux modérateurs