Sujet Précédent Sujet Suivant

Assemblage d'images de fond via <DIV> & CSS

Fermé
red_chile Messages postés 7 Date d'inscription jeudi 29 septembre 2011 Statut Membre Dernière intervention 30 septembre 2011 - 30 sept. 2011 à 00:17
 erto - 30 sept. 2011 à 01:33
Bonjour,

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>

1 réponse

Réponse 1 / 1
erto
30 sept. 2011 à 01:33
Bonsoir,
Evitez les noms avec tirets(-) pour les fichiers CSS, si je me trompes pas(pas sûr là) ils ne peuvent être utilisés car ils sont réservés aux noms de propriétés CSS(comme background-image, no-repeat...).

Images_fonds/2-dsc01158-100-clair80pc.jpg

Autre chose(je viens de voir) vous indiquez un position:absolute; (positionnement absolu) sans indiquer la position que doivent avoir les cadres en question. Je pense que si on n'indiques rien (et ça doit être le but du tuto que vous avez) ils vont prendre la position 0 à partir du coin en haut de l'écran et à gauche, donc vont se superposer sauf que si cadre1 et cadre2 ont le même z-index ils ne peuvent pas.

Enfin il y a plus simple pour ça, positionnez vos div en leur donnant des dimensions fixes et en float de façon à ce qu'il soient adjacents.
Ca devrait marcher ça: 

<div style="width:960px;border:1px solid red;padding:0;">
    <div style="width:33%;float:left;border:1px solid orange;margin:0;">
Il faut rajouter background-image bien sûr
    </div>
    <div style="width:66%;float:right;border:1px solid yellow;margin:0;">
Un peu à la sauvage avec le css dans l'attribut, remplacez par vos id et class dans votre fichier .css
    </div>
    
</div>
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Fond d'écran rogné et zoomé
DeeJay-TheBot -
DeeJay-TheBot -

2 réponses