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 :

Superposer deux DIV


Sujet :

CSS

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Mai 2003
    Messages
    38
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2003
    Messages : 38
    Points : 22
    Points
    22
    Par défaut Superposer deux DIV
    Bonjour,

    Ma page est composé d'un tableau principale centré sur celle-ci.

    Sur la premiere ligne du tableau j'ai le bandeau de mon site ( une image)

    Et sur cette image il y a trois zone qui me servent de menu.
    Donc je souhaite quand on pointe sur l une des trois zone qu'un menu s affiche en dessous de l image.

    J ai essayé plein de choses mais sans reussite.
    J ai mon bandeau dans un div et j ai mes 3 div avec mes menus, mais quand je les place dans mon <td> ca me creer un espace blanc en dessous du div du bandeau ( ce qui est logique puisqu il prend la hauteur des div menu)
    mais le hic c que j aimerais que les divs menu soit au dessus de l image et pas coller en dessous.
    J arrive a le faire mais l autre prob c'est que j utilise absolute et donc si on change la resolution de l ecran mes menus seront pas placé au bon endroit.

    j espere etre clair , voici le code pour le moment , si qqun a une idee pour m'aider, une autre solution, merci d avance:
    Code : 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
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    <style type="text/css">
    <!--
    #Layer1 {
    	left:285px;
    	top:203px;
    	width:93px;
    	height:54px;
    	z-index:2;
    	background-color: #0d9fec;
    	visibility: hidden;
    }
    #Layer2 {
    	position:absolute;
    	left:472px;
    	top:203px;
    	width:102px;
    	height:59px;
    	z-index:3;
    	background-color: #0d9fec;
    	visibility: hidden;
    }
    #Layer3 {
    	position:absolute;
    	left:580px;
    	top:203px;
    	width:97px;
    	height:59px;
    	z-index:4;
    	background-color: #0d9fec;
    	visibility: hidden;
    }
    #Layer4 {
    	left:0px;
    	top:-5px;
    	width:770px;
    	height:156px;
    	float:left;
    }
    #bandeau {position: relative;zoom: 1;
    width: 770px; height: 156px;top:50px;}
     
    -->
    </style>
     
    <div id="Layer1" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers('Layer1','','hide')" >
          <table width="93" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="10">&nbsp;</td>
              <td width="83" class="headerNavigation2"><a href="index.php?cPath=10">Mattia</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td class="headerNavigation2"><a href="index.php?cPath=11">KL</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td class="headerNavigation2"><a href="index.php?cPath=12">New Marine</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td class="headerNavigation2"><a href="index.php?cPath=13">Virus Boat</a></td>
            </tr>
          </table>
        </div>
     
     
        <div id="Layer2" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
          <table width="93" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="10">&nbsp;</td>
              <td width="83" class="headerNavigation2"><a href="index.php?cPath=32">Accastillage</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td class="headerNavigation2"><a href="index.php?cPath=33">Cordage</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td class="headerNavigation2"><a href="index.php?cPath=34">V&ecirc;tement</a></td>
            </tr>
          </table>
        </div>
    <div id="Layer3" onmouseover="MM_showHideLayers('Layer3','','show')" onmouseout="MM_showHideLayers('Layer3','','hide')">
          <table width="93" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="10">&nbsp;</td>
              <td width="83" class="headerNavigation2"><a href="index.php?cPath=14">Zieglermayer</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td class="headerNavigation2"><a href="index.php?cPath=15">Topper</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td class="headerNavigation2"><a href="index.php?cPath=12">New Marine</a></td>
            </tr>
          </table>
        </div>
    <table border="0" width="770"  height="156" cellspacing="0" cellpadding="0" align="center">
    <tr><td height="50">&nbsp;</td></tr>
      <tr class="header">
          <td><div id="bandeau"><div id="Layer4"><img src="images/bandeau.jpg"  usemap="#Map" border="0"></div></div></td>
      </tr>
    </table>

  2. #2
    Membre chevronné Avatar de Oluha
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    2 183
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 183
    Points : 1 967
    Points
    1 967
    Par défaut
    Il n'aurait pas fallu utiliser un tableau pour la mise en forme de ton site

Discussions similaires

  1. Superposer deux divs
    Par Leehan dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 23/10/2014, 13h50
  2. [css]superposer deux DIVs / opacity
    Par narkhor dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/03/2006, 02h38
  3. [CSS] Utilisation de deux div avec float
    Par Ditch dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/10/2005, 15h48
  4. superposer deux images ?
    Par terminoz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 20/08/2005, 09h04
  5. FOP: Superposer deux <fo:external-graphic>
    Par JeanLeDébutant dans le forum XML/XSL et SOAP
    Réponses: 7
    Dernier message: 14/06/2005, 15h44

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