Débutant : pb HTML & CSS

**lolo_the_fripouille** · 29/08/2005, 21h17

Bonsoir,

je commence à m'interresser au CSS et au langage HTML. J'ai commencé mon site hier, tout d'abord par le code CSS (sur un fichier séparé), puis je me suis interressé au code html de la page d'accueil.

En gros, une gros bloc (conteneur) sur un fond rouge. Dans ce bloc, un premier bloc (top) en haut qui occupe toute la largeur du conteneur et 10% de la hauteur. En dessous de ce "top", un bloc d'une ligne de 5 bloc appelés (menu1, menu2, menu3, menu4 et menu5), puis en dessous, le bloc "principal" où j'écris avec ma balise h2 elle-même identifiée dans le fichier css.

Donc tout à l'heure je me suis reservé un espace sur wanadoo
J'y ai transféré mes fichiers, je ne pense pas m'etre trompé pour cela

en revanche en allant à l'adresse d'accueil de mon site, je me suis rendu compte qu'aucun bloc n'apparaissait ! bizarre, je pense donc avoir faire une gros erreur, soit sur mon css, soit sur mon html.

Est-ce que vous pourriez jeter un petit coup d'oeil ce qui pourrait m'aider à améliorer mes connaissances dans le language, dont je comprend le principe (plus ou moins), mais pour lequel j'ai tout de meme à jongler avec les balise, le plus dur étant pour moi le css.

Je vous remercie.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
#conteneur
	{
		position:absolute;
		left: 50%;
		top: 0;
		width: 50%;
		height: 100%;
		margin-left: -25%;
		margin-top: none;
		border: 1px solid white;
	}
 
#top
	{
		position:top;
		width: 100%
		heigth: 10%
		border: 1px solide white
		background-image:url(http://perso.wanadoo.fr/infocomputer/images/background_top.jpg};
	}
 
 
#principal
	{
		position:absolute;
		top: 20%;
		left: 0;
		height: 80%;
		width: 100%;
		border: 1px solid white
		background color:#FFFFFF;
		overflow:auto;
 
 
 
#menu1
	{
		position: absolute;
		left: 0;
		width: 20%;
		height: 10%;
		border: 1px solid white
	}
 
#menu2
	{
		position: absolute;
		left: 20%;
		width: 20%;
		height: 10%;
		border: 1px solid white
	}
 
#menu3
	{
		position: absolute;
		left: 40%;
		width: 20%;
		height: 10%;
		border: 1px solid white
	}
 
#menu4
	{
		position: absolute;
		left: 60%;
		width: 20%;
		height: 10%;
		border: 1px solid white
	}
 
#menu5
	{
		position: absolute;
		left: 80%;
		width: 20%;
		height: 10%;
		border: 1px solid white
	}
 
 
h2
	{
		margin-left: 12px;
		margin-right: 12px;
		font-family: "Century Gothic", Arial;
		font-weight: bold;
		font-size: 12px;
		font-color: #000000;
		text-align: justify;
	}

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Bienvenue sur EasyComputer</title>
  <style type="text/css" media="screen"> @import url(http://perso.wanadoo.fr/easycomputer/style.css); </style>
</head>
<body style="background-color: rgb(153, 0, 0);">
<div id="conteneur">
<div id="top">
<center><b><font color="white"
 face="Century Gothic, Arial" size="5">Bienvenue sur
EasyComputer</font></b></center>
</div>
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="menu4"></div>
<div id="menu5"></div>
<div id="principal">
</div>
</div>
</body>
</html>

L'adresse de mon site : perso.wanadoo.fr/easycomputer/home.html

**spirou** · 29/08/2005, 23h28

Salut,

Dans ton css, j'ai déjà remarqué quelques erreurs :

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
 
#top
   {
      position:top;
      width: 100%
      heigth: 10%
      border: 1px solide white
      background-image:url(http://perso.wanadoo.fr/infocomputer/images/background_top.jpg};
   }
#principal
   {
      position:absolute;
      top: 20%;
      left: 0;
      height: 80%;
      width: 100%;
      border: 1px solid white
      background color:#FFFFFF;
      overflow:auto; 
  }

Il manque des points virgules, et le chemin de ton background-image est fermé, mais pas par une parenthèse.
Il manque aussi le tiret de background-color;

Peut-être que cela vient de ça...

:uc:

**neilbgr** · 29/08/2005, 23h48

En effet, il y a bien des fautes de syntax...
Pour avoir le nez dessus, rien de vaut un petit coup de validator :

http://jigsaw.w3.org/css-validator/

**Perceval** · 30/08/2005, 10h11

Pourrais tu nous dire ce qu'il s'affiche ? Si il ne s'affiche rien, nous filer l'URL de ton site pour voir ce qui ne va pas.

**lolo_the_fripouille** · 30/08/2005, 19h31

Bonsoir, bon ça avance un peu, j'ai validé ma feuille de style
j'ai tout de meme encore quelques pbs

Comment aligner verticalement mon titre au centre du top ?
Pourquoi l'image background ne s'affiche pas sur le fond du top ?
Voilà, ce sont les deux pbs auxquels je suis confronté pr le moment, un petit coup de main serait gentil

CSS : http://perso.wanadoo.fr/easycomputer/style.css
HTML: http://perso.wanadoo.fr/easycomputer/home.html

voilà merci !

**spirou** · 30/08/2005, 20h35

Je crois qu'en travaillant en pourcentage, tu vas vraiment avoir beaucoup de mal, surtout en ce qui concerne les hauteurs(à part celle du corps), tu devrais utiliser les pixels.

Ensuite pour ton menu, j'ai vu que tu avais mis un div pour chaque onglet, le mieux est d'utiliser les listes.

pour le centage vertical :

Code :

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

1
2
3
 
line-height: 10%; /* mieux vaut utiliser les pixels */
vertical: middle; /* a enlever, ne sert a rien */

Ensuite pour ton image, ce doit-être je pense un problème de chemin, es tu sûr qu'il pointe au bon endroit ?

Encore une remarque : Dans ton html, tu utilises les balises <font>, <center>, <b>.
Pourquoi ne les mets tu pas dans ton css, idem pour le background du body.

**lolo_the_fripouille** · 31/08/2005, 13h46

Bonjour,

bon ça avance, lentement certes, mais je ne demande qu'a continuer pour apprendre.
Et pour cela, j'ai encore besoin de votre aide (désolé!)
Feuille de style validée ! (http://perso.wanadoo.fr/easycomputer/style.css)

Alors voici ce que je souhaite faire, mais que je n'arrive pas à faire :
- Lorsque la souris passe sur #menu1 (ou #menu2, etc), j'aimerai que le fond passe de #8F8F8D à #C0C0C0
- Lorsque la souris passe sur le lien du #menu1 (ou #menu2, etc), j'aimerai que ce dernier se souligne d'un trait #32323CD et se colorise de la meme couleur
- J'aimerai que si par exemple je suis sur la page home, le #menu correspondant garde le fond #C0C0C0, que le lien reste souligné en #32323CD, de meme pour la couleur

Débutant : pb HTML & CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager