28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Voila j a parcouru les tutoriaux de alsacreations, pompage.... Je suis en train de construire un site mais j ai des problemens pour ma mise en page et mon positionnement.
Pour voir le probleme aller sur
http://angelus63.free.fr/Philippe/divhtm.htm

D accor le nom du lien est pas genial!
Si vous regardez la page (j utilise firefox) j ai plusieurs pb qui se posent
Tout d abord je ne sais pas si mes positionnement sont corrects, j ai un global en relative, un center en absolu (car le menu horizaontal est deroulant et il pousserait le center si il etait pas en absolu)
et j ai mon footer en absolu aussi.
Deja mon fichier flash sort du center, et j ai aussi le footer qui est mal place.
De plus mon arriere plan de global qui est blanc ne prend pas en compte le center sous dreameweaver, a cause du positionnement absolu je crois.
Bref svp je cale maintenant, pouvez m aider a avoir un css plus clair?
Merci beaucoup



/* CSS Document */

html, body {
	height: 100%;
	margin: 0;
	padding:0;
	background-image:url(../html.png);
	
}


div#global {
	position: relative;
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	background: url(../global2.png) center repeat-y; /*il manque pas une couleur ????*/
	
	
}

/*-------------------------
------- HEADER ------------
---------------------------*/
div#header {
	width: 750px;
	height:120px;
	margin:0;
	padding:0;
	/*overflow:auto;???*/
	
	
}

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman,  http://www.stopdesign.com/articles/css/replace-text/  */
#header h1{
	background: transparent  url(../logo.png) no-repeat top left;
	/*margin-top: 10px; */
	width: 135px; 
	height: 120px; 
	border:1px dotted red;
	float :left;
	margin:0;
	padding:0;
	

}

#header h2{
	/*margin-top: 10px;*/
	width: 600px; 
	height: 120px; 
	float:right;
	border:1px dotted red;
	background-color:pink;
	margin:0;
	padding:0;
}


#header h1 span{
	display:none;
}


/*-------------------------
------- TOP MENU ----------
---------------------------*/


#topmenu {
	clear:left;
	/*position:absolute;*/
	margin: 0;
	padding: 0;
	width:750px;
	height:25px;
	background: #FFF url(../topmenu.png) no-repeat;
	z-index:100;
	
}

#topmenu dt {
	cursor:pointer;
	text-align: center;
	font-size:13px;
	font-weight: bold;
	/*border:1px solid blue;*/
	height:20px;
	margin:	5px 0 0 0;
	padding: 0;
	
}

#topmenu dl {
	float:left;
	/*border: 1px solid black;*/
	margin: 0;
	padding: 0;
	
}

#top1 {
	width:120px;
	float:left;
	
	
}

#top2, #top3{
	width:200px;
}

#top4 {
	width: 200px;
}

/*a corriger*/
#topmenu dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	
	
	
}

#topmenu dd {
	list-style: none;
	/*border:1px solid blue;*/
	background-color:#000066;
	
}

#topmenu ul {
	/*position:absolute;*/
	list-style: none;

}

#topmenu li {
	margin: 0;
	padding: 0;
	text-align: center;
	border:1px solid black;

}

#topmenu dt a {
	color:#FFFFFF;
	text-decoration: none;
	display:block;
	height:100%;
}

#topmenu li a {
	color:	white;
	text-decoration: none;
	display:block;
	height:100%;
}

#smenu1, #smenu2, #smenu3 {
	display:none;	
}

#topmenu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
color:red;
}


/*-------------------------
------- CENTRE ------------
---------------------------*/
div#center {
	position:absolute; /*a cause des ss menus du menu deroulant qui poussent center*/
	z-index:1;
	width:750px;
	top:150px;
	padding-bottom: 50px; 
	/*overflow: auto;*/

}

div#sidebar {
	float: left;
	border: 1px solid black;
	width: 200px;
	margin: 0;
	padding: 0;
	
	}
	
#menu li, ul, a {
	margin: 0;
	padding: 0;
	}

#menu li a{
	text-decoration:none;
}

/*????????????????????*/
#menu ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

div#content {
	float:right;
	width: 530px;
	border: 1px solid black;
	margin: 0;
	padding: 0;
}


/*-------------------------
------- FOOTER ------------
---------------------------*/
#footer {
	position: absolute;
	width: 750px;
	bottom: 0;
	background:  url(../footer2.png) repeat-x;
	height: 20px;
}
	
[/url]
Ton code m'a l'air un peu fouilli mais je vais essayer de répondre point par point à tes questions :

* ton center ne devrait pas être en absolu, pour empecher tes sous menus de le pousser, il faut mettre tes sous menus en absolu !

* je n'ai vu le problème avec le fichier flash

* pour ton footer, je pense qu'il faut que tu mettes les margin de p à 0

* Pour l'arrière plan, sur firefox et ie7, tu n'auras pas de problèmes car ils comprennent le min height, pour ie6, il faut que tu mettes un height: 100% (utilisent les commentaires conditionnels d'ie). Sinon, si tu veux laisser tomber la hauteur 100%; il faudra mettre une div en clear: both avant de fermer ton global.

Je pense que tu devrais revoir le code de ton menu qui m'a l'air bien compliqué pour pas grand chose, pk avoir une id diff pour chaque sous menu ? Et dans l'état actuel, les non javascript n'ont aucun acces à tes sous menus qui sont en display none par défaut... En plus ton menu ne disparait pas qd on le quitte... Autre chose, ton image de fond ne correspond pas à la couleur de fond, si bien qu'avant son chargement, les gens ont un menu blanc sur fond blanc !!
Il y a de très bon tutoriel pour faire des menus déroulant, essaie de revoir ton code avec ces tutoriels.

J'espère que j'ai pu un peu t'aider.
Pourquoi pas faire l'inverse ? les menus en absolute et pas le reste.
Sinon, en l'état actuel c'est non navigable sous ie6 (comme c'est étonnant Smiley ravi )
Bonsoirà tous,

je suis nouveau sur ce forum, je remercie dejà les personnes qui pourront m'en venir en aide.

Voilà j'utilise dreamweaver mx, je suis occupé a créer un site en mise en page centrale. la resolution de mon espace de travail (ecran) est 1280*1024. Lors de l'apperçu dans l'exploreur avec une résolution courante qui est 1024*768, mon site se trouve complètement deplacer sur la droite, donc pas centrer du tout. je ne sais que faire.

Merçi a tous de votre aide Smiley ohwell
Bonjour,
Merci pour les réponses, à force d'en mettre dans tous les sens je voyais plus rien. J'ai amélioré les choses j'espère que c'est bon maintenant, j'ai juste le footer qui me pose souci mais je devrais une solution a cela.
jettez un oeil pour m apporter vos critiques merci


De plus j ai construit le site avec une largeur de 750px pour qu il soit lisible en 800*600, mais je trouve ca serre, j aimerais agrandir la taille mais je ne sais pas apres comment faire pr q ce soit lisible en 800*600 sans la barre de défilement horizontale.
Ha oui aussi je trouve pr le moment mon style Css moche, pas facile qd on démarre de faire preuve de grande créativite.

merci

/* CSS Document */

html, body {
	height: 100%;
	margin: 0;
	padding:0;
	background-image:url(../html.png);
	
}


div#global {
	position: relative;
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	background: url(../global.png) center repeat-y;/*il manque pas une couleur ????*/
	overflow:auto;

}

/*a corriger?*/
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a, li a{
text-decoration:none;
}
/*-------------------------
------- HEADER ------------
---------------------------*/
#header {
	width: 750px;
	height:120px;
	margin:0;
	padding:0;
}

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman,  http://www.stopdesign.com/articles/css/replace-text/  */
#header h1{
	background: transparent  url(../logo.png) no-repeat top left;
	width: 135px; 
	height: 120px; 
	border:1px dotted red;
	float :left;
	margin:0;
	padding:0;
}

#header h2{
	width: 600px; 
	height: 120px; 
	float:right;
	border:1px dotted red;
	background-color:pink;
	margin:0;
	padding:0;
}


#header h1 span{
	display:none;
}


/*-------------------------
------- TOP MENU ----------
---------------------------*/

#topmenu {
	clear:left;
	/*position:absolute;????*/
	margin: 0;
	padding: 0;
	height:25px;
	background: #000066 url(../topmenu2.png) no-repeat;
	z-index:3px;
}

#topmenu dt {
	cursor:pointer;
	text-align: center;
	font-size:13px;
	font-weight: bold;
	height:20px;
	margin:	5px 0 0 0;
	padding: 0;
}



/*pour reduire la taille de accueil*/
#top1 {
	width:50px;
}

#topmenu dl {
	float:left;
	width:180px;
}

#topmenu dd {
	background-color:#000066;
	width:180px;
}


#topmenu li {
	text-align: center;
	border:1px solid black;
}

#topmenu dt a, #topmenu li a{
	color:#FFF;
	display:block;
	height:100%;
}


#smenu1, #smenu2, #smenu3 {
	position:absolute;
	display:none;	
}

#topmenu li a:hover, #topmenu li a:focus, #topmenu dt a:hover, #topmenu dt a:focus {
	color:red;
}


/*-------------------------
------- CENTRE ------------
---------------------------*/
div#center {
	z-index:1;
	width:750px;
	top:150px;
	padding-bottom: 50px; 
	overflow: auto;
	margin: 0;
	padding: 0;
}

div#sidebar {
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	background-color: #E2E2E2;
	/*background: #E2E2E2 url(../sidebar.png) no-repeat 0 100%;*/ /*probleme!!!*/
}

#quisommesnous, #dptspecialises, #activitesspecialistes, #methodes{
	margin-bottom:20px;
}

#sidebar h4 {	
	background: url(../sidebarzone.png) no-repeat;
	margin:0;
	padding-left:5px;
}

#sidebar h4 a{	
	color:	#330033;
	display:block;
	height:100%;
}

#sidebar li {
	font-size:12px;
	font-weight: bold;
	margin-left:2em;
}

#sidebar ul {
	margin-top:10px;
}

#sidebar li a {
	color:	#009999;
	display:block;
	height:100%;
}

div#content {
	float:right;
	width: 550px;
	/*border: 1px solid pink;*/
	margin: 0;
	padding: 0;
	z-index:1px;
}


/*-------------------------
------- FOOTER ------------
---------------------------*/
#footer {
	position: absolute;
	width: 750px;
	bottom: 0;
	background:  url(../footer2.png) repeat-x;
	/*height: 20px;*/
}

#footer p {
	margin:0;
}