Besoin de conseils et d'aide pour affiche html

**Linux44** · 12/07/2012, 10h43

Bonjour,

Voila je débute dans le développement HTML, JS et Css et mon 1er défi est de développer une interface pour afficher des emails.

J'aimerai savoir comment faire pour reproduire la partie mail (grise) dans l'exemple

Merci d'avance

**ledisciple** · 12/07/2012, 11h34

Heu, tu peux faire clique droit sur la page et afficher source ...

Tu es débutant à quel point?

**Linux44** · 12/07/2012, 12h12

Envoyé par ledisciple

Heu, tu peux faire clique droit sur la page et afficher source ...

Tu es débutant à quel point?

1semaine de tuto avec quelques petits exemples

**ledisciple** · 12/07/2012, 13h23

Tu as la solution toute faite de Torgar ou bien tu as la solution d'apprendre pas toi même avec tous les tutoriels de ce super site

As-tu commencer par voir le html?

N'oublie pas de valider ton code

tu peux aussi voir le css

et enfin javascript
N'empêche c'est plus marrant de faire par soit même que de prendre des solutions toute pondues

**Torgar** · 12/07/2012, 14h11

Ce n'est qu'une ébauche hein

Mon exemple ne dispense pas d'apprentissage.

Je rajouterai également ce lien comme tutoriel sur l'ombrage.

**Torgar** · 12/07/2012, 11h38

Salut,

Tu veux dire le cadre blanc avec les bords arrondis avec l'ombrage ?

Si oui, il faut se tourner vers les propriétés CSS : border-radius (et autres propriétés propriétaires -moz, -webkit), pour les arrondis et box-shadow pour l'ombrage.

Après une simple div HTML suffit à faire ce que tu demandes.

Exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#mail_content {
    background-color: #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 2px 1px #656565;
    -webkit-box-shadow: 0px 0px 2px 1px #656565;
    -o-box-shadow: 0px 0px 2px 1px #656565;
    box-shadow: 0px 0px 2px 1px #656565;
    width: 400px;
    height: 300px;
}
 
#header_mail {
    border-bottom: 1px solid #aaa;
    width: 80%;
    margin: 0 auto;
    height: 50px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="mail_content">
    <div id="header_mail"></div>
</div>

**ledisciple** · 12/07/2012, 14h26

Envoyé par Torgar

Ce n'est qu'une ébauche hein

Mon exemple ne dispense pas d'apprentissage.

Je rajouterai également ce lien comme tutoriel sur l'ombrage.

oui

Envoyé par Torgar

(et autres propriétés propriétaires -moz, -webkit),
Après une simple div HTML suffit à faire ce que tu demandes.

Je ne suis pas sur que quelqu'un qui n'y connait rien

puisse comprendre, qu'il faut se faire ch

à faire des sites compatibles pour tous les navigateurs ...

**Linux44** · 12/07/2012, 17h52

Merci pour vos reponses je suis novice en html, js et css. je deja parcouru les tutos sur css et html je commence a bidouiller un peu en decouvrant js !!! et je suis sensible

à la compatibilité pour les navigateurs

**Linux44** · 17/07/2012, 11h30

Bonjour,

Après avoir lu les différents tutoriaux voici ma toute p'tite ébauche de template

je sais c'est pas grand chose

Mais j'ai un mal fou à rentrer dans la logique

Il y a 2ans quand je me suis lancé dans Python j'ai eu bcp plus de facilité .... (je dois vieillir

)
Là je bloque à 2 niveaux

1 - Séparément je comprends Js et HTML/css, par contre les faire cohabiter ensemble je rame. je voudrai tout bêtement afficher des variables JS dans mon html (par exemple remplacer ce qui est en noir dans mon HTML).
2-Mon programme principal est en python ... Comment transférer des variables python à JS??? là c'est nébuleux.

Pour résumer, J'essaye d'avoir un prg en Python qui se connecte à un serveur de messagerie et qui récupère le corps du message, l'expediteur, le sujet .... et qui au final affiche ces informations dans un template html.

Merci d'avance

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Exemple</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div id="mail_content">
   <div id="header_mail">
      <table>	
         <tr>
	    <td id="from">From:</td>
	    <td>abc@gmail.com</td>
         </tr>
         <tr>
	    <td id="to">To:</td>
	    <td>Moi</td>
         </tr>
         <tr>
	    <td id="subject">Subject:</td>
	    <td>Test script HTML</td>
         </tr>
         <tr>
	    <td id="date">Date:</td>
	    <td>16/07/2012</td>
         </tr>
      </table>	
   </div>
</div>
</body>
</html>

Css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
* {
font-family : Ubuntu;
}
 
html {
background-color : #D0D0D0 ;
}
 
#mail_content {
background-color : #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius : 5px;
-moz-box-shadow: 0px 0px 2px 1px #656565;
-webkit-box-shadow: 0px 0px 2px 1px #656565;
-o-box-shadow: 0px 0px 2px 1px #656565;
box-shadow : 0 0 2px 1px #656565;
width : 800px;
height : 800px;
}
 
#header_mail {
font-size : 14px;
background-color : #fff;
border-bottom : 1px solid #aaa;
width : 90%;
margin : 0 auto;
padding-top: 10px;
padding-left: 10px;
height : 100px;
}
 
#from {
text-align: right;
color: grey;
}
 
#to {
text-align: right;
color: grey;
}
 
#subject {
text-align: right;
color: grey;
}
 
#date {
text-align: right;
color: grey;
}

Ps : Je continue à chercher et à bidouiller de mon coté

**Vil'Coyote** · 17/07/2012, 13h21

1 - Séparément je comprends Js et HTML/css, par contre les faire cohabiter ensemble je rame. je voudrai tout bêtement afficher des variables JS dans mon html (par exemple remplacer ce qui est en noir dans mon HTML).

document.write(mavariablejavascript);

un remplacement ne se fait pas par affichage il faut passer par le DOM et gérer l'id ou les names

exemple, si ton prog généère des élément en noir, il doit mettre un names identique ainsi via un getElement.names("nom").style="stylecommejeveux"

bref, il va falloir cravacher pour que tu comprenne que le javascript ne se joue que côté client donc ton programme en amont en python doit te fournir tout ce qu'il te faut sinon il faudra passer par de l'ajax.

2-Mon programme principal est en python ... Comment transférer des variables python à JS??? là c'est nébuleux.

on ne transfert pas de variable d'un environnement à l'autre.
python>js: il faut insérer dans ta page des zones spécifiques, exemple des input de type hidden.

Besoin de conseils et d'aide pour affiche html

HTML

Vue hybride

Discussions similaires

Partager

Partager