18041 sujets

Questions générales et questions de débutants

Probleme pour menu ajustable

Bonjour,

Je chercche a faire une barre de menu arondie sur les coté (a partir d'image créée sous photoshop) avec 3 elements:

un bloc global : toute la largeur du menu avec une image d'arriere plan en repeat-x
de chaque coté (gauche et droite): deux elements pour fermé le menu

Mais j'ai un probleme d'affichage pour le bloc de droite (float:left) qui s'affiche bien a droite mais m'ajoute une ligne en dessous.

A mon avis il est donc impossible d'utiliser float:left et float:right si l'on veut que les deux element s'affichent à la meme hauteur, donc la question c'est comment faire?

D'avance Merci
Administrateur
Bonjour et bienvenue,

as-tu un exemple en ligne à nous montrer? C'est un peu difficile de te répondre là comme ça Smiley smile

Qu'est-ce qu'<<une ligne en dessous>> ?
- le bloc de droite est plus haut que les autres
- quelque chose passe sur une 2ème ligne, à gauche
- quelque chose passe sur une 2ème ligne, à droite sous ce bloc de droite
?

Je dirais que ton conteneur n'est pas assez large pour accueillir tout le monde mais c'est une supposition ...
Modifié par Felipe (27 Mar 2008 - 22:09)
Salut,

Alors il faudrai que tu nous montre un exemple en ligne pour qu'on puisse mieu comprendre, néanmoin je te propose de tester plusieur chose :

Applique ceci, pour tes images :
1) margin:0px / padding:0px
2) vertical-align: bottom;

Si cela ne marche pas tu peu essayer de jouer sur les margin et padding
3) padding-bottom:-2px; // valeur qui peu changer en fonction de ton image
4) ou margin-bottom:-2px;


PS : je crois que le sujet n'est pas dans la bonne section , je la voit plus dans la section CSS
Modifié par FunK (27 Mar 2008 - 23:26)
Bonjour,

voici donc la page de test, on voi la fin de les barre (petit rectangle 10*30) qui se place en dessous:

http://darass.free.fr/test.php

voici le code de la page de test:

<head>
<style>
#menu {
position:relative;
width:930px;
height:30px;
background-image:url(img/menu.jpg);
background-repeat:no-repeat;
}
#menu_block {
position:relative;
height:30px;
margin:auto;
background-image:url(img/menum.jpg);
background-repeat:repeat-x;
}
#menu_block_g {
position:relative;
float:left;
width:10px;
height:30px;
background-image:url(img/menug.jpg);
background-repeat:no-repeat;
}
#menu_block_m {
position:relative;
height:30px;
background-image:url(img/menum.jpg);
background-repeat:repeat-x;
}
#menu_block_d {
position:relative;
float;right;
width:10px;
height:30px;
background-image:url(img/menud.jpg);
background-repeat:no-repeat;
}
#menu_block a {
margin-top:5em;
font-family:verdena;
font-size:17px;
color:#747c70;
text-decoration:none;
}
#menu_block a:hover {
margin-top:5px;
font-family:verdena;
font-size:17px;
color:#747c70;
text-decoration:underline;
}
#menu_block a:visited {
margin-top:5px;
font-family:verdena;
font-size:17px;
color:#747c70;
text-decoration:none;
}

</style>
</head>
<body>
<div id="menu">
<div id="menu_block">
<div id="menu_block_g"></div>
<div id="menu_block_m"><center>
<a href="index.php">Accueil</a>
<a href="#">    -    </a>
<a href="index.php">Lien 1</a>
<a href="#">    -    </a>
<a href="index.php">Lien 2</a>
<a href="#">    -    </a>
<a href="index.php">Lien 3</a>
<a href="#">    -    </a>
<a href="acces.php">Plan d'accès</a>
<a href="#">    -    </a>
<a href="contact.php">Contact</a></center></div><div id="menu_block_d"></div>
</div>
</div>
</body>
Salut,

J'ai pas tres bien regarde mais il me semble que ta div qui contient ton menu ne soit pas assez grande.

++
oui mais la largeur total correspond a 930px;


#menu {

position:relative;

width:930px;

height:30px;

background-image:url(img/menu.jpg);

background-repeat:no-repeat;

}
la div #menu c'est la largeur du site, le menu comme on le vois avec la modif que je viens de faire, a pour conteneur #menu_block qui lui peut tres bien faire 500px de large (tous les liens passent sur 500px de large.

Je viens d'enlever la div #menu, donc toute la largeur de la page peut etre utilisé par #menu_block, et pourtant on a tjours le meme probleme...
Re,

Pourrai tu exposer ta methode pour les autres membres qui pourrait avoir le meme probleme.
Mettre aussi le titre en [résolu].

PS: je trouve sa bizare que tarrive a place ton block de droite en faisant float:left xD
Sujet clos
Aller à