Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 6 sur 6
  1. #1
    Invité de passage
    Homme Profil pro
    Inscrit en
    février 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Cher (Centre)

    Informations forums :
    Inscription : février 2013
    Messages : 3
    Points : 0
    Points
    0

    Par défaut Mise en page, arrière plan, header

    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.
    Images attachées Images attachées

  2. #2
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 294
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 294
    Points : 5 006
    Points
    5 006

    Par défaut

    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.

  3. #3
    Invité de passage
    Homme Profil pro
    Inscrit en
    février 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Cher (Centre)

    Informations forums :
    Inscription : février 2013
    Messages : 3
    Points : 0
    Points
    0

    Par défaut

    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

  4. #4
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 294
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 294
    Points : 5 006
    Points
    5 006

    Par défaut

    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.

  5. #5
    Invité de passage
    Homme Profil pro
    Inscrit en
    février 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Cher (Centre)

    Informations forums :
    Inscription : février 2013
    Messages : 3
    Points : 0
    Points
    0

    Par défaut

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

    Code html :
    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>

  6. #6
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 294
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 294
    Points : 5 006
    Points
    5 006

    Par défaut

    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.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •