28173 sujets

CSS et mise en forme, CSS3

Problème de paragraphe centré dans un site centré

Bonjour,

J'essaye de centrer un paragraphe sur mon site sans que ce dernier ne se modifie lorsque la page du browser est redimenssioner manuellement par le visiteur. J'aimerais que ce paragraphe reste centré avec le reste de la page tel que vue en résolution 1024 x 768. Pour faire un test http://www.socam.net/exemple

Css:
body{
    padding : 0;
    margin : 0;
    background-image : url(background1.gif);
	background-position: center;
    background-repeat : repeat-y;	
}	
html{
    min-width:780px;/* pour FF */
}
#top{
    min-width:780px;
    text-align:center;
	margin-left: auto; 
    margin-right: auto; 
}
#photo{
    min-width:780px;
    text-align:center;
	margin-left: auto; 
    margin-right: auto; 
}
#boutons{
    min-width:780px;
    text-align:center;
	margin-left: auto; 
    margin-right: auto; 
}
#titre{
    min-width:780px;
    text-align:center;
	margin-left: auto; 
    margin-right: auto; 
}
#content{
   padding-top : 10px;
   padding-left : 20%;
   padding-right : 20%;
}
#content h1{
      font-family : "Trebuchet MS", Georgia, Times, serif;
	  font-style: italic;
      font-size : 100%;
      font-weight : normal;
      color : #993300;
}   
#content h2{
      font-family : "Trebuchet MS", Georgia, Times, serif;
	  text-decoration : underline;
      font-size :  110%;
      font-weight : normal;
      color : #993300;
} 
#content p{
      font-family : "Trebuchet MS", Georgia, Times,serif;
      font-size : 80%;
      font-weight : normal;
      color : #993300;
      background-color : transparent;
      line-height : 140%;
}


html:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="site.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="top"><img src="feuilles_g.gif" width="66" height="128" alt=""/><img src="logo.jpg" width="132" height="128" alt=""/><img src="socam.jpg" width="178" height="128" alt=""/><img src="com_atik.jpg" width="94" height="128" alt=""/><img src="kamekw.jpg" width="193" height="128" alt=""/><img src="mic_g.jpg" width="59" height="128" alt=""/><img src="mic_d.gif" width="55" height="128" /></div>
<div id="photo"><img src="feuilles_gb.gif" width="66" height="105" /><img src="photo1.jpg" width="163" height="105" alt=""/><img src="photo2.jpg" width="164" height="105" alt=""/><img src="photo3.jpg" width="164" height="105" alt=""/><img src="photo4.jpg" width="164" height="105" /><img src="space_d.gif" width="56" height="105" /></div>
<div id="boutons"><img src="plume_g1.gif" width="66" height="37" alt=""/><img src="nouvelles_over.jpg" width="94" height="37" alt=""/><img src="infosursocam.jpg" width="102" height="37" alt=""/><img src="reseau.jpg" width="79" height="37" alt=""/><img src="radio_live.jpg" width="93" height="37" alt=""/><img src="prog.jpg" width="120" height="37" alt=""/><img src="contacts.jpg" width="87" height="37" alt=""/><img src="liens.jpg" width="81" height="37" alt=""/><img src="spaced_boutons.gif" width="54" height="37" alt=""/></div>
<div id="titre"><img src="plume_g2.gif" width="66" height="46" alt=""/><img src="nouvelles.jpg" width="656" height="46" alt=""/><img src="spaced_nouvelles.gif" width="54" height="46" alt=""/></div>
<div id="content">
  <h1>8 août 2007</h1>
  <h2>Harper dans le Grand Nord </h2>
  <p>Le premier ministre canadien Stephen Harper est à Fort Simpson, dans les Territoires du Nord-Ouest, où il entame une tournée de trois jours dans l'Arctique, une deuxième depuis le début de l'été. Il profitera de ce voyage pour faire valoir la souveraineté du Canada dans le Nord.</p>
</div>
</body>
</html>


Merci,

Alec
Modifié par Alec Effeil (09 Aug 2007 - 03:15)
Heu... en gros il faut que ton bloc qui contient le paragraphe (div#content) ait une largeur fixe en pixels, non?
#content {
width: 600px;
margin:0 auto;
padding-top:10px;
}
Sujet clos
Aller à