[Résolu] Aide positionnement menus par sobrienti - page 1

Salut,

Voilà je rencontre un petit problème dans la construction d'un futur site.
J'ai 3 éléments horizontaux qui doivent être côte à côté.
Le problème est que le troisième élément (celui tout à droite) se place en dessous des deux autres élements. Vous pouvez voir plus end etail le problème : http://www.spipmanager.net/fm/index2.html

Je vous passe le CSS + XHTML :

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>FootballManager–fr.net | Bonne visite |</title>
<link rel="stylesheet" href="css2.css" type="text/css" />
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1">
</head>
<body>
<div id="header">
</div>
<br />
<div id="menug">

<div class="titre_menu">SpipManager.net</div>
<div class="sous_menu">Football Manager 2006</div>
<div class="menu">
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a>

</div>

</div>
<div id="centre">
<div class="titre_menu">News</div>
<div class="titre_news">Première news ! </div>
<div class="texte_news">
Lorem ipsum dolor sit amet‚ consectetuer adipiscing elit. Nullam luctus nisl quis nisl. Morbi mi lectus‚ placerat vitae‚ facilisis ut‚ adipiscing eget‚ orci. Suspendisse sed magna ac mi porta iaculis. Phasellus egestas‚ neque ac sagittis tempus‚ quam ipsum vehicula dolor‚ non congue diam arcu blandit lacus. Integer ut est eget erat euismod sagittis. Curabitur purus nisi‚ luctus et‚ porta quis‚ aliquet quis‚ sem. Maecenas eget risus eget libero pellentesque tempus. Maecenas facilisis massa sed urna. Suspendisse arcu. Vivamus dignissim. Suspendisse ornare aliquet neque. Aliquam erat volutpat. Morbi tempus‚ est ut lobortis malesuada‚ diam magna cursus diam‚ in ultricies odio mauris vel augue. Cras magna. Nulla facilisi. Vestibulum posuere metus et velit. Lorem ipsum dolor sit amet‚ consectetuer adipiscing elit.

Phasellus pellentesque ante vel nunc. Donec vehicula ligula blandit odio auctor dignissim. Aliquam aliquam pulvinar est. Phasellus tempus lacus eget purus aliquam pharetra. Integer ornare. Curabitur placerat nisl a mi. Nunc lobortis blandit elit. Mauris sed lacus et ligula vehicula sollicitudin. Integer convallis. Quisque massa quam‚ fringilla nec‚ dictum sit amet‚ pellentesque egestas‚ magna. Ut aliquet risus. Nulla facilisi. Phasellus et eros eget eros imperdiet fringilla. Donec sit amet ante id dolor sodales luctus. Morbi malesuada‚ massa sit amet dapibus gravida‚ risus dui pulvinar sapien‚ a dignissim felis massa sed nunc. Cras aliquam semper orci. Etiam nulla arcu‚ volutpat consectetuer‚ gravida in‚ sagittis at‚ enim. Etiam facilisis viverra risus. Morbi sollicitudin vulputate nisi. Nulla facilisi.

Aenean a quam vel enim fringilla dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra‚ per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes‚ nascetur ridiculus mus. Phasellus lobortis posuere ligula. Duis faucibus aliquet felis. Nunc et nisl et nisi euismod mollis. Sed arcu. Cras adipiscing. Aliquam ipsum turpis‚ tincidunt non‚ interdum at‚ interdum eget‚ nunc.

</div>

</div>

<div id="menud">

<div class="titre_menu">SpipManager.net</div>
<div class="sous_menu">Football Manager 2006</div>
<div class="menu">
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a><br />
• <a href="http://www.test.com">Test</a>

</div>

</div>

<!––
<div id="bas">Site crée et modifié en div par Tilux</div> ––>
</body>
</html>

Et le CSS :

/*
Feuille de style CSS 2
*/

body
{
/*
margin–top:1%;
margin–left:2%;
margin–right:2%;
margin–bottom:3%;
*/
background–color: #F1F1FF;
font–family : Verdana‚ Arial‚ Helvetica‚ sans–serif;
}

#header
{
text–align:center;
background–color : #ffffff;
border : 1px solid #0087ff;
background–color : #8bc5ff;
margin:auto;
}

#abc
{
/*background–color : #ffffff; */
background–color : #8bc5ff;
border : 1px solid #0087ff;
margin:auto;
height:10%;
}

#abc p
{
margin–left:1%;
margin–right:1%;
}

#abc .texte_gauche
{
text–align:left;
}

#abc .texte_droite
{
text–align:right;
}

#menug
{
border : 1px solid #0087ff;
background–color : #ABD5FE;
width:16%;
float:left;

}

#menug .titre_menu
{
text–align:center;
background–color : #8bc5ff;
color:white;
font–size : 11px;
font–weight : bold;
color : #ffffff;
height:16px;
border : 1px solid #0087ff;
}

#menug .sous_menu
{
   font–weight : bold;
font–size : 10px;
color : #000000;
   margin–left:2%;
}
#menug .menu
{
font–size : 10px;
color : #000000;
}

#menug .menu a
{
color : #025D8F;
text–decoration : none;
}

#menug .menu a:hover
{
color : #ffffff;
text–decoration : none;

}

#centre
{
background–color : #ABD5FE;
border : 1px solid #0087ff;
width:50%;
margin–left:17%;
}

.titre_news
{
text–decoration : none;
font–weight : bold;
font–size : 11px;
color : #025D8F;
}

.texte_news
{
   font–size : 10px;
   color : #000000;
}

#menud
{
border : 1px solid #0087ff;
background–color : #ABD5FE;
width:16%;
float:right;
display:inline;
}

#menud .titre_menu
{
text–align:center;
background–color : #8bc5ff;
color:white;
font–size : 11px;
font–weight : bold;
color : #ffffff;
height:16px;
border : 1px solid #0087ff;
}

#menud .sous_menu
{
   font–weight : bold;
font–size : 10px;
color : #000000;
   margin–left:2%;
}
#menud .menu
{
font–size : 10px;
color : #000000;
}

#menud .menu a
{
color : #025D8F;
text–decoration : none;
}

#menud.menu a:hover
{
color : #ffffff;
text–decoration : none;
}

#centre .titre_menu
{
text–align:center;
background–color : #8bc5ff;
color:white;
font–size : 11px;
font–weight : bold;
color : #ffffff;
height:16px;
border : 1px solid #0087ff;
}

#bas
{
background–color : #63b4ff;
font–size : 10px;
color : #000000;
margin:auto;
height:20%;
border : 1px solid #fffff;
width:10%;
}

Si quelqu'un pouvait m'aider, ce serait très gentil

Merci.

sobrienti

5 mars 2006 à 13:05:38

Hawks

5 mars 2006 à 13:33:05

Lut

Il me semble qu'à moins que tu lui donne une position particulière, tu es obliger de mettre ton float avant l'élément auquel il doit "flotté"...
C'est à dire, ton menu de droite doit être avant l'élément centre dans le code HTML, sinon il faut que tu change sa position...

5 mars 2006 à 13:36:28

C'est parfait, ça fonctionne impec'. Sujet resolu, merci

Aide positionnement menus

Aide positionnement menus

Supprimer

Modérer

Signaler le message aux modérateurs