Code HTML CSS

Bonjour à tous.

Je débute dans la programmation et j’essai d’apprendre toute seul cependant je me rend compte de mes limites…
J’aimerais réaliser un site internet qui présenterait mon cv. Chaque page détaillerais mon parcour pro et universitaire.
Mais je rencontre plusieurs problèmes :

1er page du site web en question:

1) Mes onglet devrais bouger quand la souris passe deçu et en fait il n’y a que le texte qui bouge.
2) L’image que je souhaite faire apparaitre n’apparait que sur Gmail et Mozilla (pas sur internet explorer).
3) Impossible de positionner cette image là où je veux (même en changeant la taille des marges etc..)
4) Mon fond blanc (derrière l’image n’apparait pas)
5) Quand je Zoom ou dézoom l’affichage change totalement, mon menu change de position en fonction du zoom et idem pour l’image…

Bref, je suis vraiment en galère.

Pouvez vous s'il vous plait m'aider à trouver la solution et SURTOUT m'expliquer afin que je ne refasse plus les même erreurs SVP!!!

Merci beaucoup.

MON CODE HTML !!

Code:

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
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="fr">
 
<!--corps du site-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> Portfolio Julitalia</title>
 
<!--lien entre CSS et HTML-->
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<!--Menu et conteneur-->
<div id="conteneur">
<div id="menu"> azerty 
<!--Onglets-->
<ul>
<li><a href="http://www.google.fr" class="bouton1">point 1</a></li>
<li><a href="http://www.google.fr" class="bouton2">point 2</a></li>
<li><a href="http://www.google.fr" class="bouton3">point 3</a></li>
<li><a href="http://www.google.fr" class="bouton4">point 4</a></li>
<li><a href="http://www.google.fr" class="bouton5">point 5</a></li>
</ul>
 
 
 
<div id="contenu">
 
<!--Image com com web page d'acceuil-->
<SPAN style="position: absolute; top: 0px; left: 0px; width: 794px; height: 794px">
<img src="images/comindex.png" alt="comindex"/> 
</SPAN>
</div>
</div>
<div id="contenu"> du texte du du du dud u dud udud ud uddud du du </div>
</div>
</body>
</html>

VOICI CI DESSOUS MON CODE CSS !!

Code:

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
/* image de fond */ 
body{
background :url(images/fond.jpg) no-repeat top center #8A8A8A;
margin:0 ;
padding:0 ;
font-family :Arial, Verdana, sans-serif ;
font-size : 9px ;
}
 
/* carre qui contient onglet et haut carre blanc */
/* Problème ici peut etre */
#conteneur{
width:640px;
margin: 200px 820px;
}
/* Carre blanc du fond partie haute */
/* Problème ici peut etre */
#menu{
background:url(images/cbh.png) no-repeat bottom left;	
height:75px
}
 
/* liste du texte des onglets */
/* Problème ici peut etre */
#menu ul li{
list-style:none;
float:left;
padding:0;
}
/* couleur texte onglet et caracteristiques onglets */
/* Problème ici peut etre */
#menu ul li a{
height:46px;
width:118px;
font-size:14px;
text-decoration:none;
text-align:center;
display:block;
background:no-repeat left;
line-height:60px;
color:#FFFFFF;
}
/* fair bouger le texte et les onglet quand la souris passe deçu */
/* Problème ici peut etre */
#menu ul li a:hover{
background-position:bottom left;
line-height:46px;
}
#menu ul li a.bouton1{
background:url(images/bouton1.png) no-repeat bottom left;
}
#menu ul li a.bouton2{
background:url(images/bouton2.png) no-repeat bottom left;
}
#menu ul li a.bouton3{
background:url(images/bouton3.png) no-repeat top center;
}
#menu ul li a.bouton4{
background:url(images/bouton4.png) no-repeat top center;
}
#menu ul li a.bouton5{
background:url(images/bouton5.png) no-repeat top center;
}
 
 
/* Carre blanc contenu central */
#contenu{
background:url(images/carreblancm.png) repeat-y left;
padding: 0 20px
}

CORDIALEMENT

JULITALIA !! :-) !! (-: !!

Bonjour Julitalia

Pourrais tu mettre une démo en ligne ? parce que sans les images c'est un peu plus chiant de voir le résultat escompté !

Cependant, pour l'affichage en css d'une image en background, de memoire il me semble qu'IE veut des ' '
du genre

Code:

background :url('images/fond.jpg') no-repeat top center #8A8A8A;

mais avec un test en ligne ce sera plus simple de t'aider à debugger.

Citation:

Envoyé par Rafapouf

Cependant, pour l'affichage en css d'une image en background, de memoire il me semble qu'IE veut des ' '
du genre

Code:

background :url('images/fond.jpg') no-repeat top center #8A8A8A;

je confirme la syntaxe ;)