Problème dans la superposition de balises DIV

Clementinou -  
rescue Messages postés 1039 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Je commence à créer mon propre site Internet et je viens à peine de commencer que j'ai déjà des soucis. Je travaille sur Dreamweaver CS5 et j'apprends le logiciel en même temps que de faire le site. J'ai cherché dans pas mal de sites et je n'ai rien trouvé qui résoudent mon problème.
Le voici : J'ai insérer deux balises pour l'instant, l'un comprend la bannière (entete) et l'autre le menu. Dans cee balise Menu, j'ai inséré une image qui va me servir de fond pour ce menu. Et maintenant, ce que je veux faire, c'est insérer des bboutons au dessus de cette barre qui renverront à d'autres pages du site. Est-ce que quelqu'un saurait résoudre mon problème svp ? Est-ce que j'ai été assez clair ?

D'avance, merci pour vos réponses


5 réponses

Réponse 1 / 5
rescue Messages postés 1039 Date d'inscription   Statut Contributeur Dernière intervention   136
 
Bonjour,

Montre nous ton fichier css.
Le problème vient surement de là.

@+
0
Réponse 2 / 5
Clementinou54
 
Voici le CSS ( je n'ai mis que l'essentiel d'après moi). En rajoutant que j'aimerai obtenir une barre de menus comme sur le site de jeuxvideo.com, dans le même genre.

#menu {
height: 50px;
width: 1000px;
background-image: url(images/fond.jpg);
position: relative;
}
#entete {
height: 280px;
width: 1000px;
background-image: url(images/bann.png);
}
#contenu {
background-image: url(images/fond.jpg);
background-repeat: repeat-y;
height: 750px;
width: 1000px;
}
-->
</style></head>

<body>
<div id="coming">
<table width="1000" border="0" cellpadding="0" cellspacing="0" style="background-image: url(images/background2.jpg);">
</table>
<div id="entete"></div>
<div id="menu"><img src="images/fond_boutons2.jpg" alt="barre menus" width="800" height="50" vspace="0" /></div>
<div id="contenu"></div>
<div id="bas_de_page"></div>
</div>
</body>
</html>
0
Réponse 3 / 5
rescue Messages postés 1039 Date d'inscription   Statut Contributeur Dernière intervention   136
 
Re,

Je pensais qu'on allais corriger le css pour t'aider.
Mais là tu demande de coder le style css à ta place, c'est pas la même chose.

Pour t'aiguiller un peu il faudra ajouter les balises ul et li dans ta page html et appliqué le css dessus pour réaliser tes boutons.

Il existe des tutos pour réaliser des menus css. Penche toi plus là dessus.

Bon courage.
0
Réponse 4 / 5
Clementinou
 
Voici mon CSS, j'ai réussi à bien faire mon menu mais maintenant, je voudrai qu'il se superpose sur la balise.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ClemGraphism' : Communication visuelle pour les professionnels et les particuliers</title>
<style type="text/css">
<!--
body,td,th {
font-family: Marker Felt Wide;
font-size: 36px;
color: #FFF;
}
#bas_de_page {
background-image: url(images/bas_de_page.png);
height: 60px;
width: 1000px;
}
body {
background-image: url(images/fondsite.jpg);
background-repeat: repeat-x;
margin:0;
text-align:center;
}
#coming {
width: 1000px;
height: 2000px;
margin:0 auto;
}
a {
font-size: 16px;
color: #060;
}
a:visited {
color: #F90;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 16px;
}
#apDiv1 {
position:absolute;
width:1001px;
height:42px;
z-index:1;
left: 208px;
top: 290px;
}
#apDiv2 {
position:absolute;
width:998px;
height:41px;
z-index:1;
}
#apDiv3 {
position:absolute;
width:131px;
height:50px;
z-index:2;
left: 111px;
top: 297px;
}
#apDiv4 {
position:absolute;
width:128px;
height:49px;
z-index:2;
left: 314px;
top: 295px;
}
#apDiv5 {
position:absolute;
width:235px;
height:50px;
z-index:1;
top: 300px;
}
#apDiv6 {
position:absolute;
width:890px;
height:50px;
z-index:2;
left: 208px;
top: 300px;
}
#apDiv7 {
position:absolute;
width:885px;
height:50px;
z-index:2;
top: 227px;
left: 200px;
}
#apDiv8 {
position:absolute;
width:894px;
height:50;
z-index:2;
top: 300px;
}
#apDiv9 {
position:absolute;
width:200px;
height:50px;
z-index:3;
top: 300px;
}
#apDiv10 {
position:absolute;
width:240px;
height:30px;
z-index:1;
top: 303px;
}
#entete {
height: 280px;
width: 1000px;
background-image: url(images/bann.png);
}
#menu {
height: 50px;
width: 1000px;
background-image: url(images/fond.jpg);
position: relative;
}
#contenu {
background-image: url(images/fond.jpg);
background-repeat: repeat-y;
height: 1000px;
width: 1000px;
}
#apDiv11 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 310px;
top: 280px;
}
#navigation {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#navigation li{
display: inline;
color: #fff;
margin-right: 10px;
}
#navigation li a{
background: #000 url(images/bouton_rollover.jpg) left top no-repeat;
color: #fff;
font: 0.7em "karabinE.";
texte-align: center;
text-decoration: none;
padding: 1px 10px;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active{
background: #666 url(images/bouton_rollover.jpg) right top no-repeat;
texte-decoration: underline;
}
-->
</style></head>

<body>
<div id="coming">
<table width="1000" border="0" cellpadding="0" cellspacing="0" style="background-image: url(images/background2.jpg);">
</table>
<div id="entete"></div>
<div id="menu"><img src="images/fond_boutons2.jpg" alt="barre menus" width="800" height="50" vspace="0" /></div>
<ul id="navigation">
<li><a href="#" title="aller à la section 1">accueil</a></li>
<li><a href="#" title="aller à la section 2">le site</a></li>
<li><a href="#" title="aller à la section 3">news</a></li>
<li><a href="#" title="aller à la section 4">réas</a></li>
<li><a href="#" title="aller à la section 5">projets</a></li>
<li><a href="#" title="aller à la section 6">livre d'or</a></li>
<li><a href="#" title="aller à la section 7">contact</a></li>
</ul>
<div id="contenu"></div>
<div id="bas_de_page"></div>
</div>
</body>
</html>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
rescue Messages postés 1039 Date d'inscription   Statut Contributeur Dernière intervention   136
 
Bonjour,

C'est mieux ainsi.

Alors voilà l'erreur :

#menu {
height: 50px;
width: 1000px;
background-image: url(images/fond.jpg);
position: absolute;
}
Tu as mis relative.

et ici :
#navigation {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}

@+


Mieux vaut paraitre 'CON' 5mn, que de le rester toute sa vie.
0

Discussions similaires

Superposer 2 fichiers PDF
alexbarre -
morg -

6 réponses
Superposition d'application impossible Miu
Pls_jpp -
Pls_jpp -

2 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Superposition de deux fichiers PDF
Lucien Monnom -
alexbarre -

2 réponses
superposer 2 fichiers pdf
poisson1980 -
poisson1980 -

2 réponses