Aller au contenu
ceylia_6438

[Résolu] CSS3 - HTML5

Messages recommandés

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

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonsoir Ceylia,

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

680497notpad.jpg

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

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Partager ce message


Lien à poster
Partager sur d’autres sites

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) !

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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"

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×