Mise en page, arrière plan, header

2 pièce(s) jointe(s)

Bonjour, je rencontre un problème avec la création de mon site internet, j'ai un peu de mal à l'expliquer mais je vais essayer, les photos jointes vous l'expliqueront sans doute mieux. En fait j'ai le le fond de mon site qui passe par dessus mon header, de chaque côté de ce dernier j'ai ajouté un logo, malheureusement lorsque j'actualise le site le logo se trouve derrière le motif de fond. Je le parviens pas à faire repasser le header au premier plan. Voyez plutot : sur la première image, on voit ce que je souhaiterais obtenir, sur la seconde ce que j'obtiens (par chance j'ai du sans le vouloir décaler de deux ou trois pixels et ca m'a permis de voir que les sumos sont cachés derrière le fond rose) je voudrais "simplement" qu'ils soient au dessus. Pourriez vous m'aiguiller SVP ?

Cordialement.

Bonsoir,

Avec du code on peut y voir plus clair;

Il semblerait qu'avec une position:relative et en jouant avec top vous pourriez repositionner votre header.

Voilà la portion de code concernant le fond :
Code:

1 2 3 4 5 6 7 8 html,body { margin:0; padding:0; background:#3a4652 url("images/fond.gif") repeat-x; font-family:arial,sans-serif; font-size:small; color:#ffffff; }
Et voilà la portion de code qui concerne le haut de mon site :
Code:

1 2 3 4 5 6 div#header { position: relative; padding:0em; height:442px; background: url(images/fond_haut.gif) top no-repeat; }
J'espère que ça pourra vous aider à m'aider :)

Et le html car là en l'état il n'y a pas de logique à votre problème (la position relative ne servant à rien au vue de ce que vous postez).

Votre css ne justifie pas ce chevauchement.

Ca risque de faire un pâté mais j'essaie quand même

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blabla</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="pages.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/AC_RunActiveContent.js"></script>
<script src="js/jquery142.js" type="text/javascript"></script>
<script src="js/sound.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
 
<link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="js/lightbox/js/prototype.js" type="text/javascript"></script>
<script src="js/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox/js/lightbox.js" type="text/javascript"></script>
<style>#free-flash-header a,#free-flash-header a:hover {color:#b9b9b9;}#free-flash-header a:hover {text-decoration:none}</style>
</head>
 
<body>
<div id="header">
  	<div id="logo"><span class="logoBlanc">PLANET'R</span><span class="logoBleu">LOISIR</span><br /><span class="sloganBlanc">&nbsp;Parc de loisir en plein air et base nautique</span> <img src="images/puce5.gif" width="12" height="12" /></div>
  	<div id="menu_haut"><img src="images/spacer.gif" width="1" height="50" /><br /><a href="javascript:showPage('_faq.htm', '');" class="lienHaut">FAQ</a>  |  <a href="javascript:showPage('_about.htm', '');" class="lienHaut">ABOUT US</a>  |  <a href="javascript:showPage('_contact.htm', '');" class="lienHaut">CONTACT</a></div>
	<div id="menu_img">
    <img src="images/spacer.gif" width="100" height="5" />
  	         <div id="header_id"></div>
						<script type="text/javascript">
                                                        var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
                                                        if(hasRightVersion) {
                                                                myFlashHeader('flash/header',820,230,'#B9C6D2','header_id','custom.xml','transparent');
                                                        } 
                                                        else {
                                                                alert("Your version of Flash player is rather old. We suggest you to upgrade your Flash player to version "+requiredMinorVersion+" (at least).The latest version  can be downloaded here : http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash.");
                                                        }
                                                </script>
    </div>
    <div id="menu">
      <ul id="navigation">
   	    <li style="width: 20px;"></li>
        <li style="background: url(images/b1.gif) no-repeat; background-position: 0px 12px;"><a class="m1" href="javascript:showPage('_home.htm', '');" title="aller à la section 1"><br />HOME</a></li>
        <li style="background: url(images/b2.gif) no-repeat; background-position: 0px 12px;"><a class="m2" href="javascript:showPage('_enfants.htm', '');" title="aller à la section 2"><br />JEUX ENFANTS</a></li>
        <li style="background: url(images/b3.gif) no-repeat; background-position: 0px 12px;"><a class="m3" href="javascript:showPage('_adultes.htm', '');" title="aller à la section 3"><br />JEUX ADULTES</a></li>
        <li style="background: url(images/b4.gif) no-repeat; background-position: 0px 12px;"><a class="m4" href="javascript:showPage('_classiques.htm', '');" title="aller à la section 4"><br />LES CLASSIQUES</a></li>
        <li style="background: url(images/b5.gif) no-repeat; background-position: 0px 12px;"><a class="m5" href="javascript:showPage('_services.htm', '');" title="aller à la section 5"><br />SERVICES</a></li>
        <li style="background: url(images/b6.gif) no-repeat; background-position: 0px 12px;"><a class="m6" href="javascript:showPage('_anim.htm', '');" title="aller à la section 6"><br />ANIMATIONS</a></li>
        <li style="background: url(images/b7.gif) no-repeat; background-position: 0px 12px;"><a class="m7" href="javascript:showPage('_autour.htm', '');" title="aller à la section 7"><br />AUX ALENTOURS</a></li>
      </ul>
    </div>   
 
  </div>
  <div id="content" class="dynamicContent">
 
  </div>
  <div id="footer"><p class="copy">&copy; Copyright 2013 - blabla</p></div>
</div>
</body>
</html>

J'ai testé votre code mais je n'ai pas assez d'éléments pour vous répondre car ça ne correspond pas aux images postées dans votre premier post.

Postez vos css en zip ou le lien vers votre site.