IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mise en page, arrière plan, header


Sujet :

CSS

  1. #1
    Nouveau Candidat au Club
    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 : 1
    Points
    1
    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
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    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.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  3. #3
    Nouveau Candidat au Club
    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 : 1
    Points
    1
    Par défaut
    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

  4. #4
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    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.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  5. #5
    Nouveau Candidat au Club
    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 : 1
    Points
    1
    Par défaut
    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>

  6. #6
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    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.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

Discussions similaires

  1. Arrière plan & Mise en page
    Par Platypus22 dans le forum Word
    Réponses: 1
    Dernier message: 16/12/2013, 19h35
  2. Page mise en arrière plan au chargement
    Par beeeeeennnnnn dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 10/11/2010, 01h05
  3. [CS4] Problème de mise à jour Modèle / Pages enfants (arrière plan)
    Par jalexd dans le forum Dreamweaver
    Réponses: 4
    Dernier message: 02/05/2009, 00h47
  4. Réponses: 1
    Dernier message: 01/03/2006, 12h27
  5. mise en page (Header and Footer) en XML-XSL.
    Par christine dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 01/03/2004, 17h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo