J'apprends en force tout à la fois le HTML, Javascript et les CSS en partant de zéro. Ca fait deux semaines que je cherche dans tous les forums et tutos une réponse à un problème sur lequel je bute.
Je cherche à réaliser une page d'accueil comprenant un bandeau supérieur et un bandeau inférieur, entre lesquels se trouvent 2, 3,... "colonnes" ("cadre1", "cadre2", "cadre..N") se marquant chacune par une image de fond différente. Comme un tableau central, mais sans recourir aux tableaux html, intitulé "#main" dans le fichier CSS et de dimensions générales 900/612 px.
Ces "colonnes" ("cadre1", "cadre2" dans l'exemple ici) doivent constituer l'image de fond sur lesquelles les menus et les zones rédactionnelles devront s'afficher, comme des calques se superposant.
J'ai vu pas mal de tutos proposant des exemples utilisant les <DIV> et les CSS.
J'ai réalisé deux fichiers: un CSS et celui de la page d'accueil en html.
A l'affichage je n'ai qu'une fine bande grise en haut de la fenêtre. Tout se passe comme si le CSS ne s'exécutait pas, car même en reproduisant texto certaines routines de tutos cela ne fonctionne pas. Les images de fond se trouvent dans un dossier Images_fond.
J'y ai encore passé les deux dernières nuits à comprendre ce que j'aurais mal rédigé mais je ne vois pas. Enfin, c'est comme çà qu'on apprend. Alors je fais appel aux expérimentés... quelqu'un peut-il m'expliquer... très très très didactiquement..? Un grand merci d'avance !
Les codes:
1) le CSS
#bandeauH, #cadre1, #cadre2, #bandeauB
{
padding:1px 0;
}
#bandeauH
{
background-color:#CCCCCC;
text-align:center;
}
#main
{
max-width:900px;
min-height:612px;
background-color:#FFFFFF;
margin:auto;
position:relative;
}
#cadre1
{
max-width: 150px;
height: 612px;
position: absolute;
background-image: url(Images_fonds/1-DSC01158-150-clair80pc.jpg);
background-repeat:no-repeat;
background-position: center center;
white-space: nowrap;
z-index: 1;
}
#cadre2
{
max-width: 100px;
height: 612px;
position: absolute;
background-image: url(Images_fonds/2-dsc01158-100-clair80pc.jpg);
background-repeat:no-repeat;
background-position: center center;
white-space: nowrap;
z-index: 1;
}
#bandeauB
{
background-color:#CCCCCC;
text-align: center;
clear: both;
}
2) la page d'accueil en HTML
<!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="fr" xml:lang="fr-be">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="feuilles1.css" type="text/css" media="screen" />
<title>PageAccueil</title>
<meta name="author" content="PB" />
</head>
<body>
<div id="bandeauH"></div>
<div id="cadre1"></div>
<div id="cadre2"></div>
<div id="bandeauB"></div>
</body>
</html>
