28173 sujets

CSS et mise en forme, CSS3

Positionnement d'un élément avec menu déroulant

Bonjour en espérant que sa compte pas pour un re-post puisque j'ai travailler sur le cas depuis ma dernière demandes.

Bon quand je passe sur mon menu mon bloc main décale vers le bas on mavais sugérer de ne pas utiliser le float pour mon main c'est ce que j'ai fait.
Maintenant il se positionne seul dans le flux.
J'ai même essayer de mettre en position absolute mais mon menu ne voulait plus descendre.

http://www.agrobiopole.ca/agrobiopole/test/portail2.php

Donc comment faire pour que mon bloc main reste la et que le menu passe par dessu sans tout chamboulé.

En firefox ses moin pire le bloc main reste la mais le texte bouge lui.

Voici mon code

css:
body {
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "ARIAL" ;
	background: #003a62 ;
} 

dl, dt, dd, ul, li 
{
margin: 0;
padding: 0;
list-style-type: none;
}



div#conteneur
{
position:relative;
	width: 780px ;
	height: 1100px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ab4 ;
	background: #fff ;
}




h1#header_fr
{
	height: 184px;
	margin: 0 auto ;
	background: url(banniere.png) no-repeat ;
	background-position: top left ;
}

h1#header_en
{
	height: 184px;
	margin: 0 auto ;
	background: url('banniere.png') no-repeat ;
	background-position: top left ;
}


#menu {
	height: 45px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	

}
#menu dl {
float: left;
text-align: center ;

}
#menu dt {
cursor: pointer;
	background: url('menu1.png') repeat-x 0 0px ;
	width: 150px ;
	line-height: 45px ;
	font-size: 8pt;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
}

#menu li {
text-align: center;
background: #fff;
display: inline;

}
#menu li a, #menu dt a {
	background: url('menu1.png') repeat-x 0 0px ;
	width: 150px ;
	line-height: 45px ;
	font-size: 8pt;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus 
{
background: url('menu2.png') repeat-x 0 0px ;
}


div#main
{


	width: 530px ;
	height: 694px ;
	//margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	background: url('background.png') no-repeat ;
	//float: left;
	
	
}


div#main h2
{
	padding-left: 30px ;
	
	line-height: 28px ;
	font-size: 1.4em ;
	background: url('becher2small.gif') no-repeat ;
	color: #AD6200 ;
	border-bottom: 1px solid #003a62 ;
	
}


div#main h3
{
	margin-left: 15px ;
	padding-left: 15px ;

	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
	
}


div#main p
{
	padding-left: 15px ;
	
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;

}


div#main ul
{
	padding-left: 15px ;

	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;

}


div#partenaire
{

	position:absolute;
	left:535px;
	top:193px;
	width: 240px ;
	height: 210px ;
	//margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	//float: right;
	
	
}

div#evenement
{
	position:absolute;
	left:535px;
	top:410px;
	width: 240px ;
	height: 300px ;
	//margin: 2 auto ;
	text-align: left ;
	border: 2px solid #614700 ;
	//float: right;
	
	
}


div#pied {
clear : both; 
padding : 2px; 
text-align : center; 
border-color : white; 
/*border-style : solid; 
border-width : 1px; */
} 
div#pied p {
height : 8px; 
}


Merci a l'avance
Modifié par frafro (21 Mar 2007 - 15:44)
Et pourtant, pourtant, la solution de passer ton menu en absolute est bien la bonne.
j'ai testé avec le CSS edit de FF et ça marche (j'ai juste les images qui disparaissent mais ça vient du prog apparemment).
Ses koi sa css edit et comment tu la fait car quand je mes pu de float left sur mon menu ben sa marche pu.

moi en fire fox sa marche mes pas en IE
frafro a écrit :
Ses koi sa css edit et comment tu la fait car quand je mes pu de float left sur mon menu ben sa marche pu.

moi en fire fox sa marche mes pas en IE



Smiley eek Oupssssssss ! frafro Tu utilises quelle langue là ?

Peux-tu, corriger ton dernier post et le rendre lisible, s'il te plait ?

Smiley cligne Merci d'avance !
Modifié par dominique (21 Mar 2007 - 17:06)
frafro a écrit :
Désolé s'utilisé le jargon québécois . Le problème est résolu.

Mais ses quoi css édit

Le jargon québécois n'est pas en cause. C'est plutôt l'écriture phonétique, pas évidente à déchiffrer, qui peut poser des problèmes de compréhension.

S'il faut lire ta phrase comme « C'est quoi CSS Edit ? », il me semble qu'il s'agit d'une extension de Firefox. À moins qu'il ne s'agisse de la propriété d'édition à la volée des styles CSS que propose l'extension Web Developer Toolbar.
Oui oui tout à fait Florent, je parlais de l'outils intégré au plug-in "web developer" ... très efficace pour observer de petite modifs en temps réel et encore plus pour aider les gens Smiley cligne
RaGe a écrit :
plug-in "web developer" ... très efficace pour observer de petite modifs en temps réel et encore plus pour aider les gens Smiley cligne

La version francophone est d'ailleurs disponible ici :
http://joliclic.free.fr/mozilla/webdeveloper/

Pour le « debugging CSS », l'extension Firebug est encore plus précise (Web Developer est très bien pour se faire une idée générale de la structure d'un document, tandis que Firebug est très efficace lorsqu'il s'agit de dénicher un problème précis).
http://extensions.geckozone.org/FireBug
Oui effectivement ... je l'ai d'ailleurs, mais il est tellement discret que je l'oublie à chaque fois Smiley smile faut le faire tout de même !
Sujet clos
Aller à