Aller au contenu


Photo
- - - - -

[Résolu] CSS3 - HTML5


  • Veuillez vous connecter pour répondre
17 réponses à ce sujet

#1 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 245 messages

Posté 28 juin 2016 - 10:32

Bonjour,

 

Avant je faisais du HTML et css (j'utilisais Dreamweaver8 et je voyais mes visualisations petit à petit).

Dernièrement, j'ai voulu savoir ce qu'était le HTML 5 et CSS3, j'ai donc commencé une animation.

Le problème est que j'utilise Notpad++, si je ne souhaite pas utiliser Dreamweaver 2015, comment voir mon résultat au fur et à mesure en local ? pour le moment j'ai une page en html et une autre css, j'utilise FF comme visualisation

Concernant WampServer c'est ce que j'utiliserai lorsque je code en PHP non ?!

Si je veux faire une visualisation, avec Notpad ?!

 

Merci pour votre aide,

Ceylia


Modifié par ceylia_6438, 26 septembre 2016 - 12:37 .

  • 0

PUBLICITÉ

    Annonces Google

#2 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 27 430 messages

Posté 28 juin 2016 - 11:10

Bonsoir Ceylia,

Regarde dans le menu Exécution... icon_wink.gif

680497notpad.jpg

Cela ne fonctionne qu'avec un fichier d'extension HTML.


  • 0

#3 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 245 messages

Posté 30 juin 2016 - 07:30

Bonjour Dylav,

 

Excuse-moi de ne pas t'avoir répondu avant car c'est un peu le "chantier" ici !

Bref...

Oui j'ai bien fait des Ctrl + Alt + Shift + X comme j'utilise Firefox, j'ai essayé Chrome avec Ctrl + Alt + Shift + I.

Je vois ma source dans les navigateurs, mais pas la création (le début du moins, vu que je ne suis qu'au début).

J'ai une page index.html et une page main.css

J'ai même ajouté par moment des paramètres pour Chrome et FF, par exemple :

-webkt-background-color: #99BBAA

-moz-background-color: #99BBAA

En ce moment je suis donc perplexe, car je ne vois que la source ! snif !!!

 

Merci pour ton aide !

 

C.


Modifié par ceylia_6438, 30 juin 2016 - 09:13 .

  • 0

#4 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 27 430 messages

Posté 30 juin 2016 - 10:34

Bonsoir Ceylia,
Je ne saisis pas bien ton problème. Je viens de faire le test avec l'affreux petit source ci-dessous.

<html>
<head>
<title>Test d'affichage</title>
</head>
<body>
<p>Hello World!</p>
</body></html>

Et le clic sur Exécution > Lauch in Firefox me donne le résultat que j'attendais...

551123Test.jpg

Idem en utilisant les touches CTRL+ALT+SHIFT+X (un peu compliqué, d'ailleurs) !


  • 0

#5 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 245 messages

Posté 01 juillet 2016 - 05:19

Bonjour Dylav,

 

Pas si affreuse ta source ! :-)

Puis au moins, tu vois quelque chose !!! icon_wink.gif

 

En fait si je mets ton affichage comme le tien, cela fonctionne.

J'ai ma page .html à la racine.

J'ai des dossiers : images, fonts, css.

Dans le dossier "css" se trouve mon fichier "main.css".

 

Je te donne ma source pour chacun pour le moment :

Fichier index.html :

<!DOCTYPE html>
<html>
    <head>
    <title>CSS3 TV - Mon animation !!!</title>
    
    <link rel="stylesheet" type="txt/css" href="css/main.css" />
    </head>
    <body>
        <div id="tv">
            <div id="screen">
        
                <div class="emissions">
        
                </div>
            </div>
        </div>
    </body>
</html>

Mon fichier main.css :

body {
    margin: 0;
    padding: 0;
    background: -moz-linear-gradient( to top, #000000, #666666);
}

@font-face {
    font-family: "Double Feature";
    font-style: normal;
    font-weight: normal;
    scr: local('Double Feature'), url('.../fonts/DoubleFeature20.ttf') format('TrueType');
}

#tv {
    width: 800px;
    height: 600px;
    margin: 60px; auto 80px;
    border: 1px solid #230f03;
    border-radius: 60px;
    -moz-border-radius: 60px;
    box-shadow: 5px 5p 5px #000000;
    -moz-box-shadow: 5px 5px 5px #000000;
    background: -moz-linear-gradient( to top, #9d4919, #be7348);
}

#tv:after {
    content: "Watch if you dare !!!";
    float: right;
    color: #e33333;
    font-size: 30px;
    margin-right: -100px;
    margin-top: -10px;
    font-family: 'DoubleFeature'
    text-shadow: 2px 2px 2px #000000;
}


Je suis d'accord avec Toi, il aurait fallu une touche comme F"truc" pour la visu ! d'ailleurs nous n'avons rien à configurer dans Notpad sinon ?!

Merci pour ton aide,

C.


  • 0

#6 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 27 430 messages

Posté 01 juillet 2016 - 06:21

Ta page HTML n'affiche rien de concret. Il est donc normal qu'elle te paraisse vide (sauf li titre de l'onglet)...

 

Ceci dit, il y a une erreur dans l'attribut type de ta balise <link> : type="text/css"


  • 0

#7 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 245 messages

Posté 01 juillet 2016 - 10:12

Comment ai-je pu louper cette "grossière erreur" !

Bref !

Je suis trop contente parce que là, ça fonctionne bien ! je vois une grosse partie du début de mon poste et quand j'ai remis le "e" et que j'ai actualisé !

 

Sisi, Dylav, vu que j'ai une page liée dans la page la feuille de style référencée, ça montre le résultat ! surtout avec ceci :

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

Tout est ok dans Notpad, par contre dans Dream il faut que je vérifie un truc car il devrait avoir de la couleur et non !

 

Je te dis si je n'y arrive pas Dylav,

Déjà merci.

Mince, il tonne....

 

C.


  • 0

#8 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 27 430 messages

Posté 02 juillet 2016 - 10:32

Une petite remarque,

  • En XHTML, pour des raisons de compatibilité XML, les balises auto-fermantes nécessitaient l'insertion d'un slash avant le chevron de fin (comme tu l'as écrit pour ta balise <link>).
  • HTML5, n'étant pas appuyé sur la syntaxe XML, n'a pas besoin de ce slash de fermeture (mais il le tolère).

Tu peux donc utiliser indifféremment les deux formes, mais je te suggère d'alléger l'écriture en utilisant la seconde (sans /).

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

  • 0

#9 ceylia_6438

ceylia_6438

    Mega Power Member

  • Membres
  • 245 messages

Posté 09 juillet 2016 - 04:55

Merci Dylav,

Cela va être difficile de s'en passer quand on y est habitué ! :-)

Par contre bizarrement le contenu n'est pas centré.... pourtant cela a l'air correct dans le code.


  • 0

#10 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 27 430 messages

Posté 09 juillet 2016 - 10:05

Si je me réfère à ton code CSS ci-dessus, pourquoi cela serait-il centré ?


  • 0









Sujets similaires :     x