28173 sujets

CSS et mise en forme, CSS3

Bonjour à tout le monde, c'est la première fois que je fais une demande sur ce site car a présent j'ai toujours trouvé ce qu'il me fallait avec la fonction recherche...sauf aujourd'hui Smiley murf (sauf si j'ai mal cherché... Smiley confused )


Bon j'ai le contenu de mon site qui est centré sur la page avec une largeur de 574px et une longueur d'a peu près 900px.

A côté de ce contenu, je souheterai rajouté un mini-menu de navigation d'une dimension de 200px de largeur sur 500px de hauteur. Mon problème est que je n'arrive pas à réaliser cette idée...

j'ai essayé de cette manière :

div#right_bloc { 
	margin-left:565px;
	width: 200px;
	background:url(../images/design/rightmenu.jpg) no-repeat;
	position:relative;

}


...mais ça ne marche pas. sous firefox l'image est toute tassée en haut à droite à l'extérieur de mon contenu et avec I.E6 l'image est tout tassé en bas a droite Smiley confus


vous auriez une idée ?


ps : mon code CSS si dessous.



body {
	background-image:url(../images/design/background.jpg);
	font: 13px/1.1em Trebuchet MS, Trebuchet, Arial, Helvetica, Verdana, Georgia, sans-serif;
	color:#E1E1E1;
	margin: 0 auto 0;
	position: relative;
	width: 725px;
	margin-top:30px;

}

/*Menu du site*/

ul {
	position:relative;
	list-style-type:none;
	padding:0;
	margin:0;
	width:574px;
	height:338px;
	background:url(../images/contenu/blocsup.jpg)
}


a {
	color:#FF6600;
	text-decoration:none;
	font: bold 9px Verdana,Arial,Helvetica,sans-serif;

}

.menu a {
	position:absolute;
	display:block;
 	width:80px;
  	height:29px;
	text-decoration:none;
	font: bold 9px Verdana,Arial,Helvetica,sans-serif;
 	color:#FF6600;

}

.menu a:hover {
	font-size:18px;
	color:#FF6600;
  	width:169px;
  	height:45px;


}

iv#left_bloc {
	float: left;
	width: 574px;
	padding-top:2px;
	background:url(../images/design/mainpage.jpg) repeat-y;
	text-align:justify;
	
}

div#titre_site {
	font:Geneva, Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#FF6600;
	font-weight:bold;
	margin:20px 5px 5px 57px;
	text-decoration:overline;
	letter-spacing: 0.2em; 
	word-spacing: 0.2em;
}


div#titre_article {
	font:Geneva, Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#FF6600;
	font-weight:bold;
	margin:20px 5px 5px 57px;

}


.nobord {

	border:0px;

}


.aligntext {

	margin: -29px 0px 0px 25px ;

}


div#contenu {
	margin: 0px 25px 15px 60px;

}


.commentaire {
	font-weight:bold;
	font: bold 9px Verdana,Arial,Helvetica,sans-serif;
 	color:#FF6600;
	margin:10px 5px 5px 315px;
}


div#left_bloc_fin {
	background-image:url(../images/design/gallerytop.gif);
	height:35px;
}


div#left_bloc_2 {
	float: left;
	width: 574px;
	padding-top:2px;
	background:url(../images/design/galleryback.gif) repeat-y;
	text-align:justify;
	
}

div#contenu_2 {
 	margin: 0px 25px 15px 60px;

}

div#left_bloc_3 {
	float:left;
	width: 574px;
	height:27px;
	padding-top:2px;
	background:url(../images/design/gallerybottom.gif) repeat-y;

}

div#left_bloc_fin_2 {
	float: left;
	width: 574px;
	background:url(../images/design/footer.jpg) repeat-y;
	text-align:justify;
	height:39px;
	margin-bottom:30px;

Modifié par metaboly (10 Oct 2006 - 19:38)
salut

a écrit :
Bon j'ai le contenu de mon site qui est centré sur la page avec une largeur de 574px et une longueur d'a peu près 900px.


là déjà, çà coince.longueur = hauteur.je sais, c'est un détail mais bon..

.menu a {
	position:absolute;
	display:block;
 	width:80px;
  	height:29px;
	text-decoration:none;
	font: bold 9px Verdana,Arial,Helvetica,sans-serif;
 	color:#FF6600;

}


positionnement absolu, donc, il manque top et left.mais je suis d'avis que c'est là que çà ne và pas, la position devrait plutôt être pour le div.

background-image:url(../images/design/background.jpg);


çà oui

background:url(../images/design/background.jpg);


çà oui mais tu prends le risque des propriétés par défaut.
oups Smiley rolleyes je crois que y'a eu mal entendu car la tu me dis des choses qui concerne le menu de navigation tout en haut de mon site...et ce menu tout en haut fonctionne très bien. Donc je prends en considération tes remarques même si ce n'était pas la réponse que j'attendais.

pour faire simple je vous fais un shéma :

http://img276.imageshack.us/img276/1808/image2me1.jpg

donc j'aimerais savoir comment créer ce rectangle vert qui contiendra une image de background + du contenu que je me chargerai de mettre. Smiley cligne

comment le crée en prenant en compte ce premier "float" que j'ai déjà crée qui lui concerne le menu que j'ai tout en haut ?


div#left_bloc {

	float: left;
	width: 574px;
	padding-top:2px;
	background:url(../images/design/mainpage.jpg) repeat-y;
	text-align:justify;

}



pour le créer j'ai fais ça :


div#right_bloc { 
	margin-left:565px;
	width: 200px;
	background:url(../images/design/rightmenu.jpg) no-repeat;
	position:relative;

}



mais cela ne fonctionne pas...



j'espere que je me suis mieux fais comprendre Smiley cligne
Modifié par metaboly (11 Oct 2006 - 00:45)
a écrit :
j'espere que je me suis mieux fais comprendre


avec un minimum d'infos, c'est déjà plus clair!

perso, placerais le div contenu en relatif avec un div imbriqué en absolu en n'oubliant pas les top et left.


.contenu {
position: relative;
le reste
}

.blocsupplementaire {
position: absolute;
 top: ?px;
 left: ?px;
}


on imbrique blocsupplementaire dans contenu et çà roule.


<div class="contenu">
<div class="blocsupplementaire">
</div>
</div>