Bonjour,
Je suis retraité et vraiment pas spécialiste de la création de pages internet, j'ai découvert qu'on pouvait apparemment facilement même en forme le contenu sans devoir a chaque fois écrire les pages htm avec les css. Je m'y suis essayé.
J'ai commencé à faire un site mais j'ai un problème. Mon petit fils m'a dit qu'il n'utilisait pas l'internet explorer mais le firefox et quand il regarde les pages que j'ai créé, alors là rien ne va plus...
les images ban1,2 et 3 sont placées correctement
les menus aussi
les illustrations à gauche ill1 et ill2 s'affiche correctement
par contre les titres eux ne sont pas mis en forme comme je croyais l'avoir demandé dans le css
les contenus eux apparaissent bien
J'ai sans doute fait une erreur, ce serait gentil si quelqu'un pouvait m'aider à la corriger. Je sais que vous avez sans doute des sujets bien plus intéressants mais si vous pouviez m'aider je vous en serais très reconnaissant.
Merci beaucoup,
Fabrice
66 ans, Laventie
Voici le code html de la page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<suite des meta tags à lister ici -->
<link href="site4FA3.css" rel="stylesheet" type="text/css" media="screen" /></head>
<div id="header"><img src="images\ban1.jpg"><img src="images\ban2.jpg"><img src="images\ban3.jpg"></div>
<div class="horizontal">
<a href="Accueil.htm" class="horizontal">Accueil
<a href="menu1.htm" class="horizontal">Mon menu 1
<a href=""menu2.htm" class="horizontal">Mon menu 2
<a href="menu3.htm" class="horizontal">Mon menu 3
<a href="rmenu4" class="horizontal">Mon menu 4
<a href="menu5.htm" class="horizontal">Mon menu 5
<a href="menu6.htm" class="horizontal">Mon menu 6
<a href="href="Menu7.htm" class="horizontal">Mon menu 7</a></div>
<div id="left1">
<img src="images\ill1.jpg" align="left"/></div>
<div id="left2">
<img src="images\ill2.jpg" align="left"/></div>
<div id="titre1" div class="titre1"><h1>Titre 1</h1></div>
<div id="contenutitre1" div class="contenutitre1"><br><h2>contenu titre 1 ligne 1
<br><br>ligne 2
<br><br>ligne 3</br></h2></div>
<div id="titre2" div class="titre2"><h1>Titre 2 :</h1></div>
<div id="contenutitre2" class="contenutitre2"><h2>Ligne 1 titre 2
<br>Ligne 2 titre 2
<br>Ligne 3 titre 3
<br>Ligne 4</h2></br></div>
</body>
</html>
Voici le code du fichier .css
body {
margin-top: 0px;
margin-left:0px;
overflow:hidden
min-width:603px;
background-color:#99FF66;
}
#header,#titre1,#titre2,#contenutitre1,#contenutitre2,#left1,#left2, {
overflow:hidden;
}
#header,#footer {width:100%}
#left1 {
position: absolute; top: 250px;
width: 192px;
}
#left2 {
position: absolute; top: 410px;
width: 192px;
}
#titre1 {
width:590px;
float:left;
position: absolute; top: 250px; left: 200px;
}
#titre2 {
width:590px;
float:left;
position: absolute; top: 430px; left: 200px;
}
#contenutitre1 {
width:600px;
position: absolute; top: 260px; left: 200px;
float:left;
}
#contenutitre2 {
width:600px;
position: absolute; top: 440px;left: 200px;
float:left;
}
a.horizontal {
color: white;
height:20px;
padding: 10px;
font-size: 14px;
font-display:bold;
background-color: green;
text-decoration: none;
font-family:arial;
font-weight: bold;
text-align: center;
display: inline-block;
width:80px;
}
a:hover{
background-color:#99FF66 ;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
color: #009900;
background-width:70%;
background-color:#F4F29C;
font-weight: bold;
text-align: left;
padding-left: -10px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: black;
text-align: left;
font-weight: normal;
margin-top : 0px;
padding-left: 10px;
width: 100%;
}
.titre1{
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
padding-left: 10px;
width: 100%;
}
.contenutitre1{
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
padding-left: 10px;
}
.titre2{
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
padding-left: 10px;
}
.contenutitre2{
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
padding-left: 10px
}
Je suis retraité et vraiment pas spécialiste de la création de pages internet, j'ai découvert qu'on pouvait apparemment facilement même en forme le contenu sans devoir a chaque fois écrire les pages htm avec les css. Je m'y suis essayé.
J'ai commencé à faire un site mais j'ai un problème. Mon petit fils m'a dit qu'il n'utilisait pas l'internet explorer mais le firefox et quand il regarde les pages que j'ai créé, alors là rien ne va plus...
les images ban1,2 et 3 sont placées correctement
les menus aussi
les illustrations à gauche ill1 et ill2 s'affiche correctement
par contre les titres eux ne sont pas mis en forme comme je croyais l'avoir demandé dans le css
les contenus eux apparaissent bien
J'ai sans doute fait une erreur, ce serait gentil si quelqu'un pouvait m'aider à la corriger. Je sais que vous avez sans doute des sujets bien plus intéressants mais si vous pouviez m'aider je vous en serais très reconnaissant.
Merci beaucoup,
Fabrice
66 ans, Laventie
Voici le code html de la page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<suite des meta tags à lister ici -->
<link href="site4FA3.css" rel="stylesheet" type="text/css" media="screen" /></head>
<div id="header"><img src="images\ban1.jpg"><img src="images\ban2.jpg"><img src="images\ban3.jpg"></div>
<div class="horizontal">
<a href="Accueil.htm" class="horizontal">Accueil
<a href="menu1.htm" class="horizontal">Mon menu 1
<a href=""menu2.htm" class="horizontal">Mon menu 2
<a href="menu3.htm" class="horizontal">Mon menu 3
<a href="rmenu4" class="horizontal">Mon menu 4
<a href="menu5.htm" class="horizontal">Mon menu 5
<a href="menu6.htm" class="horizontal">Mon menu 6
<a href="href="Menu7.htm" class="horizontal">Mon menu 7</a></div>
<div id="left1">
<img src="images\ill1.jpg" align="left"/></div>
<div id="left2">
<img src="images\ill2.jpg" align="left"/></div>
<div id="titre1" div class="titre1"><h1>Titre 1</h1></div>
<div id="contenutitre1" div class="contenutitre1"><br><h2>contenu titre 1 ligne 1
<br><br>ligne 2
<br><br>ligne 3</br></h2></div>
<div id="titre2" div class="titre2"><h1>Titre 2 :</h1></div>
<div id="contenutitre2" class="contenutitre2"><h2>Ligne 1 titre 2
<br>Ligne 2 titre 2
<br>Ligne 3 titre 3
<br>Ligne 4</h2></br></div>
</body>
</html>
Voici le code du fichier .css
body {
margin-top: 0px;
margin-left:0px;
overflow:hidden
min-width:603px;
background-color:#99FF66;
}
#header,#titre1,#titre2,#contenutitre1,#contenutitre2,#left1,#left2, {
overflow:hidden;
}
#header,#footer {width:100%}
#left1 {
position: absolute; top: 250px;
width: 192px;
}
#left2 {
position: absolute; top: 410px;
width: 192px;
}
#titre1 {
width:590px;
float:left;
position: absolute; top: 250px; left: 200px;
}
#titre2 {
width:590px;
float:left;
position: absolute; top: 430px; left: 200px;
}
#contenutitre1 {
width:600px;
position: absolute; top: 260px; left: 200px;
float:left;
}
#contenutitre2 {
width:600px;
position: absolute; top: 440px;left: 200px;
float:left;
}
a.horizontal {
color: white;
height:20px;
padding: 10px;
font-size: 14px;
font-display:bold;
background-color: green;
text-decoration: none;
font-family:arial;
font-weight: bold;
text-align: center;
display: inline-block;
width:80px;
}
a:hover{
background-color:#99FF66 ;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
color: #009900;
background-width:70%;
background-color:#F4F29C;
font-weight: bold;
text-align: left;
padding-left: -10px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: black;
text-align: left;
font-weight: normal;
margin-top : 0px;
padding-left: 10px;
width: 100%;
}
.titre1{
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
padding-left: 10px;
width: 100%;
}
.contenutitre1{
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
padding-left: 10px;
}
.titre2{
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
padding-left: 10px;
}
.contenutitre2{
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
padding-left: 10px
}
