28172 sujets

CSS et mise en forme, CSS3

Problème placement superposé h1 en z-index

Salut à tous,

je n'arrive pas à placer un bloc h1 en superposition sur mes blocs images

avec l'attribut z-index

bloc qui me servira de titre / lien

le bloc h1 est caché par les images et pousse même celles ci

quelqu'un pourrais t il me donner une piste ?

Merci !!!!


la page :

<body>
<div id="hg"><img src="img/EFG01.png"></div>
<div id="mg"><img src="img/EFG02.png"></div>
<div id="md"><img src="img/EFG03.png"></div>
<div id="m2g"><img src="img/EFG04.png"></div>
<div id="m2d"><img src="img/EFG05.png"></div>
<div id="bg"><img src="img/EFG06.png"></div>
<div id="bd"><img src="img/EFG07.png"></div>
<div id="titre"><img src="img/titre01.png"></div>
<h1>Accueil</h1>
</body>


le css :

body {  
    padding:0;
    margin:0;
    background-color:#00aeef;
}
img{ border:none; }

#hg{
    position:absolute;
    height:515px;
    width:103px;
}
#mg{
    position:absolute;
    height:515px;
    width:193px;
    top:103px;
}
#md{
    position:absolute;
    height:493px;
    width:193px;
    top:103px;
    left:515px;
}   
#m2g{
    position:absolute;
    height:515px;
    width:208px;
    top:296px;
}
#m2d{
    position:absolute;
    height:493px;
    width:208px;
    top:296px;
    left:515px;
}
#bg{
    position:absolute;
    height:515px;
    width:216px;
    top:504px;
}
#bd{
    position:absolute;
    height:493px;
    width:216px;
    top:504px;
    left:515px;
}

#titre{
    position:absolute;
    top:170px;
    left:260px;
    z-index:1;
}
    
 h1
{
    color: White;
    font-style:normal;
    font-family: Verdana;
    background-color:Black;
    margin-left: 10px;
    margin-top:100px;
    z-index:2;
    }

Modifié par Fee (08 Apr 2008 - 16:10)
Bonjour Smiley smile

Tu as une image à proposer pour illustrer ce que tu veux faire ?

J'ai l'impression que tu te compliques un peu la chose...
ci joint la partie haute de la page

h1 concerne le menu texte en blanc

que me suggèrerai tu ?

merci à toi upload/9576-Exemple.png
Un <h1> pour un menu ? Smiley eek

Je pense qu'un peu de lecture s'impose...

Pour ton design, c'est bien ce qu'il me semblait : tes 8 <div> sont parfaitement inutiles. De plus, tu places les images via la balise <img>. Celles-ci sont strictement décoratives, elles devraient être gérées par la feuille de style, via la propriété background.

Encore un peu de lecture (la partie sur les images non significatives)...

Mais pourquoi 8 images au fait ? Une simple <div> positionnée absolument en haut à gauche avec l'image (légèrement transparente) du rouleau compresseur devrait faire l'affaire.
Modifié par BeliG (03 Apr 2008 - 14:01)
Sujet clos
Aller à