Tom's Guide > Forum > Programmation > Centrer un div dans un div .... [Résolu]

Centrer un div dans un div .... [Résolu]

Forum Programmation : Centrer un div dans un div .... [Résolu]

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

Bonjour,

J'ai recherché une réponse à mon problème pendant un moment sans trouver la réponse
Voilà je cherche un centrer un div dans un div (Illustration)

Voici le code de la page !

Code :

<div id="contenu">
Bla Bla Bla !!!
</div>
<div id="menu">
<ul id="menuDeroulant">
<li>
<a href="#">Les castors</a>
<ul class="sousMenu">
<li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
<li><a href="#">Ils confectionnent des barrages !</a></li>
<li><a href="#">Ils ont des grandes dents</a></li>
</ul>
</li>
<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
</div>

Et le CSS qui va avec :

Code :

body {
font: 11px verdana, sans-serif;
background: #AFA99B;
padding: 0;
}
#contenu {
top: 0;
background-color: #00ffff;
width: 750px;
border-left: solid 5px #F00;
border-right: solid 5px #F00;
margin-left: auto;
margin-right: auto;
}
#menu {
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 21px;
text-align: center;
font: 11px verdana, sans-serif;
background: transparent url(fondTR.png) repeat;
}
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
width: 750px;
height: 21px;
list-style-type: none;
margin: auto;
padding: 0;
border: 0;
position: absolute;
top: 0;
text-align: center;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #ff0000; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url(fondTR.png) repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #ff0000;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

Mon problème, c'est que je n'arrive pas à centrer le menu déroulant
Une aide serait la bienvenue !

Merci d'avance !!
Bye !

Message édité par doudou the vip le 25-03-2009 à 13:43:24

------------------------------ Mon Site Consacré A L'ElectroO'

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

margin: auto
suffit pour centrer

------------------------------ En Restaurant, le coeur de breizh
Répondre à Tybbow

J'ai essayer, sa ne marche pas :s

D'ailleurs il y est déjà ...

Message édité par doudou the vip le 23-03-2009 à 20:48:37

------------------------------ Mon Site Consacré A L'ElectroO'
Répondre à doudou the vip

Code :

#menuDeroulant
{
width: 750px;
height: 21px;
list-style-type: none;
margin: auto;
border: 0;
top: 0;
text-align: center;
font: 12px verdana, sans-serif;

------------------------------ En Restaurant, le coeur de breizh
Répondre à Tybbow

Merci en effet sa centre bien =)
Mais pourquoi il y a t-il un décalage ??

------------------------------ Mon Site Consacré A L'ElectroO'
Répondre à doudou the vip

Code :

#menuDeroulant
{
width: 750px;
height: 21px;
list-style-type: none;
margin: auto;
padding: 0;
border: 0;
position: absolute;
top: 0;
text-align: center;
margin: auto auto auto 152px;
}

Essaie avec ça.

------------------------------ En Restaurant, le coeur de breizh
Répondre à Tybbow

Mreci de regarder mon problème ! =)

Mais ta solution ne fonctionne pas (enfin presque) => il y a toujours un décalage selon la taille de la fenêtre ...

------------------------------ Mon Site Consacré A L'ElectroO'
Répondre à doudou the vip

Code :

#menuDeroulant
{
width: 750px;
height: 21px;
list-style-type: none;
margin: auto;
padding: 0;
border: 0;
position: absolute;
top: 0;
text-align: center;
margin: auto auto auto 194px;
}

C'est mieux?

------------------------------ En Restaurant, le coeur de breizh
Répondre à Tybbow

J'ai finalement réussit ç solutionner mon problème !
En enlevant

Code :

position: absolute;

Pour que les cadres bougent avec la fenêtre !

Et en ajoutant :

Code :

margin: auto auto auto auto;

Car

Code :

margin: auto;

Seul ne fonctionne pas !

Merci d'avoir prit de votre temps pour vous pencher sur mon problème car vous m'avez mit sur la bonne piste
Byye !

------------------------------ Mon Site Consacré A L'ElectroO'
Répondre à doudou the vip

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > Centrer un div dans un div .... [Résolu]

Aller à :

Aide |
Règles du forum

Il y a 996 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,242 secondes

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler

Liens