28173 sujets

CSS et mise en forme, CSS3

Bonsoir et Joyeux Noel

Je gratte un peu le Css mais la je m'en remet a vous, je n'y arrive pas!

Je voudrais centrer mon site internet,qu'il sadapte a la résolution du visiteur.

je vous joins la feuille style.css


body {
	background-color:#E5F3FB;
	margin:0;
	padding:0;
	font-family:Tahoma, Verdana, Arial, Sans-serif;
	font-size:12px;
	width: 930px;
	height: 0px;
	float: left;
}
/* OP:LINKS */
a, a:link, a:visited {
	color:inherit;
	font-weight:bold;
	text-decoration:underline;
}
a:hover {
	text-decoration:none;
	color:inherit;
}
/* OP:STRUCTURE */
div#header {
	background:#e6f3fb url(images/header_bg.gif) repeat-x;
	width:950px;		height:267px;
}
div#content, div#h-content {
	width:950px;
	margin:2px auto;
}
div#h-content {
	margin:0 auto;
}
div#middle {
	width:444px;
	float:left;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0px;
}
* html div#middle {
	width:950px;
}
div#left, div#right {
	float:left;
	width:243px;
	padding:0;
	margin:0;
	background-color:#ffffff;
}
div#right {
	float:right;

}
* html div#right {
	float:right;
}


div#footer {
	background:#000 url(images/footer_bg.gif) repeat-x;
	height:19px;
	padding: 20px;
	color:#fff;
	font-weight:bold;
	width: 913px;
	float: left;
}
	
div .clear {
	clear:both;
	height: 0px;
	float: left;
	width: 950px;
}
/* OP|HEADER */
div#date {
	float:right;
	margin:32px 5px 0 0;
	height:15px;
	font-weight:bold;

}
div#nav {
	float:right;
	padding-top:0;
	height:38px;
	color:#FFF;
	text-transform:uppercase;
	font-weight:bold;
	width: 910px;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0;
}
div#nav img {

	width: 0;

	margin-top: 0;

	margin-right: 20px;

	margin-bottom: 0;

	margin-left: 20px;
}
div#overlap {
	float:left; 
	margin-top:0;
	background:#000000 url(images/banner.gif) no-repeat;
	width:264px;	height:131px;
	padding:60px 0 0 20px; 
	font-size:1.5em;
	font-style:italic;
	text-transform:uppercase;
	color:#000000;
}
* html div#overlap {
	padding-top:80px;
	width:254px;	height:111px;	
}
div#overlap li {
	list-style-image:url(images/bullet.gif);
	margin-bottom:10px;
}
div#overlap li a {
	font-weight:normal;
	color:#000;
}
#h-img {
	margin:21px 0 0 0;
	float:right;
}
* html #h-img {
	width: 950px;
	margin-top: 19px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	float: left;
}
/* OP|MIDDLE */
div#middle div#wrap {
	margin:0 auto;
	width:100%;
	font-size:11px;
}
div#middle h1 {
	width:937px;
	height:27px;
	margin:0;
	background:#000 url(images/center_h1.gif) repeat-x;
	color:#fff;
	font-size:12px;
	text-transform:uppercase;
	padding-top: 12px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 10px;
}
div#middle h2 {
	background-color:#89C8EB;
	color:#FFFFFF;
	width:938px;
	font-size:12px;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 10px;
}
div#middle p {
	width:938px;
	padding:3px;
	line-height:normal;
	margin-top: 4px;
	margin-right: auto;
	margin-bottom: 4px;
	margin-left: auto;
	float: left;
}
/* OP:LEFT OP:RIGHT */
div#left div.box, 
div#right div.box {
	width:auto;
	padding:0 2px;
	background-color:#FFF;
}
div#left h1, div#right h1 {
	background:#000 url(images/side_h1.gif) no-repeat;
	margin:2px 0 0 0;
	padding:12px 0 0 12px;
	color:#FFFFFF;
	font-size:12px;
	text-transform:uppercase;
	width:228px;
	height:25px;
}
div#left ul, div#right ul, 
div#left li, div#right li {
	list-style-image:none;
	list-style-type:none;
	margin:0;
	padding:0;
	font-weight:bold;
	text-transform:uppercase;
}
div#left li, div#right li {
	background:#000 url(images/side_list_bg.gif) no-repeat;
	width:229px;
	height:21px;
	padding:8px 0 0 10px ;
	margin:0;
}
#left a, #right a {
	color:#000;
}	
.small-red {
	color:#FF0000;
	font-size:11px;
	text-transform:capitalize;
}

#left .small-red a, #left .small-red a:link, #left .small-red a:visited,
#right .small-red a, #right .small-red a:link, #right .small-red a:visited  
{
	color:#FF0000;
}

#nav a:link, #nav a:visited {
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
}
#nav a:hover {
	text-decoration:underline;
	color:#FFF;
}
#footer a {
	color:#fff;
}
#overlap a {
	text-decoration:none;
}

/* OP:FORMS source unknown */
	form {  
	  margin: 0;  
	  padding: 0;
	  font-size:11px; 
	  width: 100%; 
	}
	
	form fieldset {
	  border:1px solid #666;
	  padding: 10px;      
	  margin: 5px;
	}
	
	form fieldset legend {font-weight:bold; }
	
	form label { 
		display: block;  
		float: left; 
		width: 150px; 
		padding: 0; 
		margin: 5px 0 0;
		text-align: right; 
	}
		
	form input, form textarea {
		width:auto;     		
		margin:5px 0 0 10px; 	
		border: 1px solid #89C8eB;
		background-color:#b3e3ff;
		color:#000;
		font-family:  Tahoma, Verdana, Arial, Sans-serif;
		padding:3px;
	}
	form textarea { font-size:11px}
	form input#reset {margin-left:0px;}
	textarea { overflow: auto; }
	form .required{font-weight:bold;} 
	form br {clear:;}





et la feuille middle_full.css




/* CSS Document */



div#middle {

	width:auto;

	margin:0 5px;

	float:center;

}

* html div#middle {

	width:auto;

}



Aidez Moi je vousss en prieeee LOL

Merci

Contact : freestylemoto63@hotmail.com
Modifié par freestyler63 (25 Dec 2006 - 22:50)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Sinon avec un titre plus pertinent tu aurais probablement plus de réponses.

Bonne continuation Smiley smile

upload/1-code.gif
Modifié par Igor (26 Dec 2006 - 00:25)
un margin:auto sur le conteneur principal suffit logiquement. Maintenant si tu as un exemple sur le web, ce serait plus facile....