28173 sujets

CSS et mise en forme, CSS3

Bonjours a tous.

J'aimerais super poser des div ( bouton ) sur un autre. mais il se met a chaque fois sur le coter ou en dessous...


/* CSS Document */

body {
	background-color: #cdcdcd;
}

.page {
	margin-left: auto;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	width: 1024px;
	height: 768px;
	}

.banniere {
	background-image: url('banniere.jpg');
	height: 180px;
	width: 750px;
	}
	
.menu {
	background: url('menu.jpg');
	height: 433px;
	width: 207px;
	margin-top: 20px;
	margin-left: 10px;
	float: left;
	}
	
.milieu {
	background: url('milieu.jpg');
	height: 431px;
	width: 755px;
	margin-top: 20px;
	margin-right: 10px;
	float: right;
	}
	
.boutonliens {
	background-image: url(boutonliens.jpg);
	width: 207px;
	height: 32px;
	float: left;
}

.boutonliens:hover {
	background-image: url(boutonliens3.jpg);
}

.boutonmenu {
	background-image: url(boutonmenu.jpg);
	width: 207px;
	height: 32px;
	float: left;
	position:absolute;
}

.boutonmenu:hover {
	background-image: url(boutonmenu2.jpg);
}

.boutoncircuit {
	background-image: url(boutoncircuit.jpg);
	width: 207px;
	height: 32px;
	float: left;
}

.boutoncircuit:hover {
	background-image: url(boutoncircuit3.jpg);
}

.boutoncontact {
	background-image: url(boutoncontact.jpg);
	width: 207px;
	height: 32px;
	float: left;
}

.boutoncontact:hover {
	background-image: url(boutoncontact2.jpg);
}

.boutonphotos {
	background-image: url(boutonphotos.jpg);
	width: 207px;
	height: 32px;
	float: left;
}

.boutonphotos:hover {
	background-image: url(boutonphotos2.jpg);
}


Voici mon code.
( mes div a super poser son les bouton qui doive aller sur le div menu )

J'espere que vous avez compris.

Merci beaucoup!
Salut,

Pour commencer, pourquoi ne pas utiliser une liste non ordonnée pour faire un menu de navigation plutôt que de créer tous ses div?

@++
pour pas te mentir,

je suis vraiment un debutant et je sais pas ce qu'est une liste non ordonnee Smiley smile

merci de m'aider.

EDIT:

Je viens de regarder sur google, je viens de voir ce que c'est.
Je vais essayer et je te tens au courant Smiley smile
Modifié par Mamdien (27 Mar 2006 - 18:01)
Voila, j'ai fait avec se que tu ma dit:

/* CSS Document */

body {
	background-color: #cdcdcd;
}

.page {
	margin-left: auto;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	width: 1024px;
	height: 768px;
	}

.banniere {
	background-image: url('banniere.jpg');
	height: 180px;
	width: 750px;
	}
	
.menu2 {
	background: url('menu.jpg');
	height: 433px;
	width: 207px;
	margin-top: 20px;
	margin-left: 10px;
	float: left;
	}
	
.milieu {
	background: url('milieu.jpg');
	height: 431px;
	width: 755px;
	margin-top: 20px;
	margin-right: 10px;
	float: right;
	}


ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0 0 5px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 207px ;
	line-height: 32px ;
	color: #000 ;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url('bouton.jpg') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 1px solid #dbd ;
}

ul#menu li a:hover
{
	background: url('bouton2.jpg'); /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}



mais mon probleme reste le meme... impossible de les superpose.
ben j'ai trouver.... C'etait tout con.
J'avais deja fermer le DIV menu2 donc du coup, il savais pas rentrer dedans!

Merci, bonne soiree.