Sujet Précédent Sujet Suivant

Problème de superposition de deux divs HTML

cs_Herve007 Messages postés 10 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 21 avril 2008 - 2 avril 2008 à 12:21
cs_Herve007 Messages postés 10 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 21 avril 2008 - 18 avril 2008 à 10:52
Voila je ne savais pas ou poser ce sujet alors je l'ai lier à ce qui des fois l'utilise.

J'ai un soucis dans mon html qui fait que sous l'affichage Mozzila firefox :
1. l'entete est superposée sur la div conteneur, je ne peux pas la rabaisser avec des margin-top et autres et je ne vois vraimetn aucuns autres moyens.

Sur Ie  cette fois l'entete est bien placée mais le menu n'est plus centré (je sais que margin-left et right en auto n'est pas reconnu par ie c'est pourquoi j'ai centrer le site grace à text-align center)
masi dans ce cas présent cela ne marche pas.
J'aimerai de cette facon avoir l'entete un peu en dessous du conteneur et en dessous de l'entete un menu centré sur le conteneur.

http://marunooni.free.fr
Vous pouvez trouver un screen de ec problème sur ce site.

Si quelqu'un pouvait m'aider ce serait super car je suis à cours d'idées.
Hervé.

8 réponses

Réponse 1 / 8
neigedhiver Messages postés 2480 Date d'inscription jeudi 30 novembre 2006 Statut Membre Dernière intervention 14 janvier 2011 19
2 avril 2008 à 14:29
Salut,

Pourrais-tu donner le code HTML et le CSS de ta page ?

<hr size="2" width="100%" />Neige

N'hésitez pas à lire la doc de PHP avant de poser des questions triviales...
0
Réponse 2 / 8
cs_Herve007 Messages postés 10 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 21 avril 2008
2 avril 2008 à 15:03
Biensur,
mon fichier.html
 
   

   

   

       
       

            Entete
       

       
       

           
                <li class="current">[# Présentation]</li>
                <li>[# Produits]</li>
                <li>[# Service]</li>   
                <li>[# Notre équipe]</li>
                <li>[# Contacts]</li>   
           
       

       
   

   

       
       

       
        Patres colendissimi

            texte
       
       
       
        Tandem intellexisse

            texte
       
       

       
   


   

        Barre du bas
   

   

 

Mon css

body {
background: #123456;
text-align : center;
}

#conteneur
{
text-align : center;
width:800px;
min-height:1000    px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
}
/* ----------------------------- */
/*     BARRE DU HAUT      */
/* ----------------------------- */
#bh
{
width:800px;
min-height:300px;
background: url(bh.gif);
}

/* ----------------------------- */
/* CORPS DU SITE WEB */
/* ----------------------------- */

#centre
{
background : #FFFFFF;
width:800px;
min-height:500px;
background: url(ctr.gif) repeat-y top left;

}

#entete
{
margin : 30px;
margin-left:auto;
margin-right:auto;
width:600px;
height:150px;
background: url(entete.gif) top left;
}

#menu
{
width:622px;
height:50px;
margin-left:auto;
margin-right:auto;
}

#texte
{
padding-top:60px;
padding-bottom:40px;
text-align:justify;
margin-left:auto;
margin-right:auto;
width:600px;
min-height:400px;
}

/* ----------------------------- */
/*     BARRE DU BAS        */
/* ----------------------------- */
#bb
{
background: url(bb.gif) top left;
height:50px;
}

p
{

}

/* ----------------------------- */
/*     MENU DUHAUT        */
/* ----------------------------- */

.glossymenu{
    position: relative;
    padding: 0 0 0 14px;
    margin: 0 auto 0 auto;
    background: url(menur_bg.gif) repeat-x;
    height: 46px;
    list-style: none;
}

.glossymenu li{
    float:left;
}

.glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;   
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px;
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(menur_hover_left.gif) no-repeat;
    background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(menur_hover_right.gif) no-repeat right top;
}
0
Réponse 3 / 8
neigedhiver Messages postés 2480 Date d'inscription jeudi 30 novembre 2006 Statut Membre Dernière intervention 14 janvier 2011 19
2 avril 2008 à 16:57
Re,

Question bête... Quand tu parles de "entete" et de "conteneur", dans ton premier message, il s'agit bien des
portant ces id ?
Si c'est bien le cas, le
étant DANS
il est tout à fait normal que tu ne puisses pas le "sortir" de celui-ci.
La solution consiste à positionner l'entete en absolu dans ton css :
#entete {position: absolute}

Attention : comme ça, tu ne pourras plus positionner les autres balises par rapport à ton div entete.

Si je me plante, c'est que j'ai pas bien compris...

Les deux captures d'écran que tu mets présentent une différence... J'en déduis que l'effet obtenu sous IE est le bon et que celui avec FF non ?

J'ai un peu de mal à bien comprendre... (un seul des 2 neuronnes est branché aujourd'hui)

Essaie de rajouter un padding-top à ton conteneur :

#conteneur {
/* tes déclarations */
padding-top: 30px;
}

<hr size="2" width="100%" />Neige

N'hésitez pas à lire la doc de PHP avant de poser des questions triviales...
0
Réponse 4 / 8
cs_Herve007 Messages postés 10 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 21 avril 2008
2 avril 2008 à 21:16
Et bien le soucis c'est que si je passe entete en absolu je peux la positionner comme je veux mais après le problème est décallé et c'est menu qui ne se positiionne plus.

Je pourrais donc tout mettre en absolute mais d'un autre côté spa tip top non ?

Je ne veux pas l'enlever de conteneur mais simplement la décallée vers le bas un peu par exemple de 30 ou 40 px. Normalement je l'aurais fais avec un margin-top sur entete de 30px ou alors un padding-top sur conteneur, mais aucuns des deux ne marchent.

L'affichage d'en tete sur FF est mauvais (le reste du contenu est bien positionné) mais le menu est bien centré, le meme code sur IE donne le menu mal centré mais l'entete et le reste bien positionné verticalement.

:x

Niouf jene vois vraiment pas :x
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
neigedhiver Messages postés 2480 Date d'inscription jeudi 30 novembre 2006 Statut Membre Dernière intervention 14 janvier 2011 19
2 avril 2008 à 22:15
Ecoute... Je sais pas trop quoi te dire, parce que chez moi, ton code sans retouche me donne exactement le même résultat sous FF que sous IE.
Il ne me reste qu'une hypothèse à envisager : est-ce que tu modifies bien le bon fichier... ? C'est pas pour te prendre pour un abruti, mais ça m'arrive aussi, et des fois il me faut un certain temps pour m'en rendre compte...
0
Réponse 6 / 8
cs_Herve007 Messages postés 10 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 21 avril 2008
2 avril 2008 à 22:58
Ah ca marche nikel chez toi ?
Bizarre !
Je vais vérifier ca de ce pas !

Merci de tenter de m'aider c'est vraiment gentil.

(Mais je pense modifier le bon fichier car j'ai modifier avec absolute etc pr tester et quca mettait laffichage en bazar comme prévu).
0
Réponse 7 / 8
cs_Herve007 Messages postés 10 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 21 avril 2008
7 avril 2008 à 16:18
Et bien le problème n'a pas l'air d'etre réolus car pour pallier à se problème de positionnement j'ai passé mes div en position absolute, il me semblait que c'était mauvais mais je savais plus pourquoi.
Et finnalement en plein écran c'est super, mais si on passe d'une résolution à une autre rien ne va plus et si on réduis la fenetre c'est encore pire.

Je vous appelle de nouveau à l'aide :x.

Oscour ! :)
0
Réponse 8 / 8
cs_Herve007 Messages postés 10 Date d'inscription jeudi 7 décembre 2000 Statut Membre Dernière intervention 21 avril 2008
18 avril 2008 à 10:52
Un petit up en esperant que quelqu'un me répondra.

Ce code marche t'il chez vous ? Si non, en voyez vous la raison ?
0

Discussions similaires

exemple de page d'accueil avec la balise div et css
belkaiednaim -
belkaiednaim -

5 réponses
qu'est ce que le span en html?
cs_chris81 -
aurelien0306 -

1 réponse
Calculer le nombre de jour entre deux dates
Seamless -
bthivent -

5 réponses
interval entre deux date en mois seulement
infordelphi -
cantador -

10 réponses
Superposition d'images
aujeanfr -
mansray13 -

4 réponses
Rejoignez-nous