Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] CSS3 - HTML5

ceylia_6438

Par ceylia_6438
dans Programmation

 Partager

Messages recommandés

ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
Posté(e) (modifié)

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
Lien vers le commentaire
Partager sur d’autres sites

ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e) (modifié)

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
Lien vers le commentaire
Partager sur d’autres sites
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites
ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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">
Lien vers le commentaire
Partager sur d’autres sites
ceylia_6438 Mega Power Member

ceylia_6438

Posté(e)
  • Auteur
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...