[Résolu] CSS3 - HTML5

ceylia_6438 · le 28 juin 2016

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é le 26 septembre 2016 par ceylia_6438

Dylav · le 28 juin 2016

Bonsoir Ceylia,

Regarde dans le menu Exécution...

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

ceylia_6438 · le 30 juin 2016

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é le 30 juin 2016 par ceylia_6438

Dylav · le 30 juin 2016

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...

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

ceylia_6438 · le 1 juillet 2016

Bonjour Dylav,

Pas si affreuse ta source ! :-)

Puis au moins, tu vois quelque chose !!!

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.

Dylav · le 1 juillet 2016

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"

ceylia_6438 · le 1 juillet 2016

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.

Dylav · le 2 juillet 2016

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">

ceylia_6438 · le 9 juillet 2016

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.

Dylav · le 9 juillet 2016

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

Connexion

Pas encore inscrit ?

[Résolu] CSS3 - HTML5

Messages recommandés

ceylia_6438

Dylav

ceylia_6438

Dylav

ceylia_6438

Dylav

ceylia_6438

Dylav

ceylia_6438

Dylav

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer