Mise en page, arrière plan, header

GuillaumeH · 26/02/2013, 19h22

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.

rodolphebrd · 26/02/2013, 19h41

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.

GuillaumeH · 26/02/2013, 19h53

Voilà la portion de code concernant le fond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

rodolphebrd · 26/02/2013, 21h19

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.

GuillaumeH · 26/02/2013, 21h55

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

rodolphebrd · 26/02/2013, 22h56

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.

26/02/2013, 19h41	#2
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 591 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 591 Points : 895 Points : 895	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.
	00

26/02/2013, 21h19	#4
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 591 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 591 Points : 895 Points : 895	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.
	00

26/02/2013, 22h56	#6
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 591 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 591 Points : 895 Points : 895	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email