Léa-Linux & amis :   LinuxFR   GCU-Squad   GNU
Conversation precedente ou suivante
Les sections > Les forums de cette section > Les messages de ce forum > Ce thread >
Problème de CSS
Envoyé par: phenix

Boujour

Voulant creer une page perso, je tente d'utiliser css pour la mise en forme.

[phenix1.ath.cx]

Mon problème:
Sous firefox ou konqueror le fond de la zone de texte reste gris comme le fond de la page, le pire c'est que sous IE ca passe bien.

J'appelle la zone de texte, la partie au millieu, le site n'occupe pas toute la largeure de la page.

Voila ma css [phenix1.ath.cx]


J'ai declarer que je veux du blanc dans 

#conteneur { 
/*position: relative; */
z-index: 1;

margin-left: auto;
margin-right: auto;

width: 980px;
background: #ffffff;

}


Et toute les autres "div" sont dans un <div id=conteneur>

$ uptime
19:28:06 up 12 days, 20:46,  2 users,  load average: 213.96, 212.37, 208.44

Poste le Friday 27 October 2006 19:23:02
Répondre     Citer    
Re: Problème de CSS
Envoyé par: AlSim

Il me semble que la propriété correcte pour la couleur du fond est background-color et non background.
En tout cas, là, ce n'est pas le problème mais plutôt l'utilisation des positions. Ta position étant relative, le conteneur a une hauteur nulle ...

Je pense que ceci règlera le problème : 

#conteneur { 
z-index: 1;
position: absolute;
right:50%;
margin-left: auto;
margin-right: -490px;
width: 980px;
height: 100%;
background-color: #ffffff;
}

[catwell.info]

Poste le Saturday 28 October 2006 10:53:18
Répondre     Citer    
Re: Problème de CSS
Envoyé par: phenix

je te remercie pour ce conseil, le résultat est meilleur. Pour que ce passe même sur les longues
pages j'ai supprimé le height: 100%

Maintenant je dois chercher pourquoi ce fichu IE me met tout au centre. Je dois sans doute dire explicitement quelque part que je veut le texte à gauche.

$ uptime
19:28:06 up 12 days, 20:46,  2 users,  load average: 213.96, 212.37, 208.44

Poste le Saturday 28 October 2006 18:35:42
Répondre     Citer    
Re: Problème de CSS
Envoyé par: phenix

c'est bon, j'ai trouvé, merci text-align:left; 


$ uptime
19:28:06 up 12 days, 20:46,  2 users,  load average: 213.96, 212.37, 208.44

Poste le Saturday 28 October 2006 18:40:36
Répondre     Citer    
Re: Problème de CSS
Envoyé par: chromosome

J'ai trouve quelques erreurs dans ta page.
Ci-joint des corrections (ps: J'ai inclus le css dans la page pour des raisons de facilites sur ma machine)
Voici donc la page nettoye avec les corrections (tu avais un gros probleme dans les DL/DT) des positions absolute ou relative poru rien, etc... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[www.w3.org];
<html>
<head>
  <title>phenix1.ath.cx</title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" type="text/css" href="style.css">
  <style type="text/css">
  * { font-size: 10pt ; font-family:sans-serif; }
  body {font-family:arial,sans-serif;margin: 0px;background : #eaeaea ;}
  img { border:0px ; }
  strong{color: #00000;font-size: 20pt;font-weight:bold;}
  h1 {color: #7898ff;font-size: 15pt;font-weight:bold;}
  h2 {color: #7898ff;font-size: 13pt;}
  h3 {color: #7898ff;font-size: 12pt;}
  warn {color: red;background: #ffeeee;font-weight:bold;}
  titre{color: #7898ff;font-size: 11pt;font-weight:bold;text-transform:uppercase;}
  a {text-decoration: none ;  color: blue;}
  a:hover {color: blue;}
  hr {color: black;background-color: black;height: 2px;border: 1px;}
  hr {color: #7898ff;background-color: #7898ff;height: 2px;border: 1px;}
  code,span.code {font-weight: bold ;	font-family: courier, monospace ;}
  #menu {height: 32px ;width: 100% ;}
  #menu dt {float: left ;margin: 0;width: 25% ;display: inline;cursor: pointer;text-align: center;font-weight: bold;background-color: #bad1ff;border: 0px solid black;height: 32px ;}
  #menu dt a {color: #000000;text-decoration: none;display: block;height: 100%;border: 0;height: 32px;}
  #menu dt a:hover {background-color: #0066FF;}
  #header {color: #000;height: 100px;}
  #site {float: left;width: 800px ;color: #000;padding: 5px;background: transparent ;text-align:left;}
  #menu_droit {float: right ;width: 160px ;padding: 5px;background: transparent ;}
  #conteneur {z-index: 1;right:50%;margin-left: auto;margin-right: auto;width: 980px;background-color: #ffffff;}
  
  .center {text-align: center;}
  </style>
</head>
<div id="conteneur">
		<div id="menu">
			<dl>
        <dt><a href="index.php?page=index" >Acceuil</a></dt>
        <dt><a href="index.php?page=copy" >Copyright</a></dt>
        <dt><a href="/blog" >Blog</a></dt>
        <dt><a href="mailto: phenix arobase vfemail point net" >Mon e-mail</a></dt>
      </dl>
		</div>

		<div id="menu_droit">
			<h3>Linux</h3>
      <hr />
      <a href="index.php?page=therm">Thermometre PC</a><br />
      <a href="index.php?page=rsync">Sauvegarde</a><br />
      <!-- temperature -->
      <p class="center">
        <a href="[www.noiseless-linux.fr.eu.org];
          <img src="/images/therm/therm.png" width="86" height="196" border="0" alt="" />
          <br />
          <strong>12.3°C</strong>
        </a>
      </p>
		</div>
		
		<div id="site">
			<h1>Bienvenue sad smiley</h1>
      Vous avez le malheur d'être tombé sur cette médiocre page personnelle.
      <h2>Présentation</h2>
      <p>De tant en temps j'écris quelques petites documentations autour de l'informatique, 
      plus particulier sous système linux. En plus d'être bourré de fautes d'orthographe, 
      les informations que vous trouverez ici sont sans doute erronées et obsolètes.</p>
      <p>Je manque tellement d'inspiration que je n'est même pas réussit a trouver 
      une adresse intéressante pour cette page, il n'y a même pas dans le logo.</p>

      <h2>C'est pas ma faute !</h2>
      Libre a vous des suivre les informations que vous trouverez ici ! 
      <br />Mais je ne m'engage pas sur les conséquences: je veux dire
      par là que je ne promets pas que vous n'allez pas creer une panne 
      informatique grave ou des pertes de données vous faisant 
      perdre votre emploi voir faire couler une multinationale.<br>
      <b>Donc ne suivez les informations que vous trouverez sur ces pages que 
      si vous les comprenez !</b>
      
      <h2>Blog</h2>

      Les blogs sont a la mode, la plus part n'ont aucun intérêt, le mien fait partie du lot:<br />
      <a href="[phenix1.ath.cx] rien d'autre a faire</a> 
		</div>
    <br clear="all" />
  </div>
</body>
</html>

Poste le Tuesday 31 October 2006 09:30:43
Répondre     Citer    

Veuillez vous authentifier auparavant pour commenter.

 

Moi !
General
Ce forum !
Problème de CSS
Pour poser vos questions sur les scripts shell, le Perl, le C, etc... Attention : nous ne sommes pas des spécialistes du dev, ce forum est juste pour de petites aides ponctuelles concernant le développement et les outils de développement.

Sauf mention contraire, les documentations publiées sont sous licence Creative-Commons