28172 sujets

CSS et mise en forme, CSS3

salut à tous,
voice le code de ma page index.php

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page">

  <div id="header">
   <?php
    include 'header.php';
   ?>
  </div>

  <div id="conteneur">
    <div id="gauche">
   <?php
   // include 'gauche.php';
   ?>
    </div>
  
    <div id="centre">
   <?php
    include 'centre.php';
   ?>
    </div>
  </div>

  <div id="footer">
   <?php
    include 'footer.php';
   ?>
  </div>

</div>

</body>
</html>



j'associe a cette page la feuille de style styles.css dont voici le code:

body {width:100%; background-color:#0033FF;}

#page { margin-left:1px; margin-right:1px; width:90%; background-image:url(../images/bkground.gif);}
#conteneur{overflow:hidden;}
#gauche { background:#FFFFFF; float:left; width:170px;}
#centre {margin-left:170px;}



h1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #0225C2;
	
}
h2{
	color: #FF9900;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bolder;
}


.copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.copyright a{ }
.content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.upper {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0000CC;
	font-weight: bold;
	text-decoration:none;
}
.upper:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FF9900;
	font-weight: bold;
	font-size: 36px;
	color: #000066;
	font-weight: bold;
	text-decoration:none;
}
.biggest{
	
	font-family: Arial, Helvetica, sans-serif;
}
.navbar{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding:5px;

}
.navbar:hover{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding:5px;
	background-color: #7D86F2;
	
}
.bground{
	background-attachment: inherit;
	background-image: url(bkground.gif);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-position: top;
}
.navigation{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #000099;
	text-decoration: none;

}
.navigation:hover{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #0066FF;
	text-decoration: underline;

}
.content{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}


.puce{ list-style-image:url(arrow_b_r_small.gif);}


seulemnt je constate a chaque fois qu'il y a toujours un espace sur le cote droit a l'affichage de la page , un peu comme si j'avais mis un ' margin_right '
comment est que je peux resoudre ce probleme svp ?
cordialemnt
Modifié par letatus (17 Apr 2009 - 19:22)
Bonjour,

Déjà essayer de centrer #page parce que là est elle collée par défaut à gauche et prends 90% de la largeur donc logique qu'il existe un espace à droite


#page {
width:90%;
[b]margin: 0 auto;[/b]
background-image:url(../images/bkground.gif);
}


Mais une page en ligne serait quand même mieux pour se faire une idée.
Modifié par knarf (15 Apr 2009 - 22:43)
ok , ça marche , merci,,,

PS: en passant est que j'ai besoin de signaler que mon probleme a ete resolu ? si oui commnt ? j'ai fouillé partout.

meci.

j'oubliais : ça marche uniquement avec mozilla mais avec internet explorer 6 rien n'a change
Modifié par letatus (16 Apr 2009 - 16:44)
excuser moi, mais je viens de verifier finalement ça ne marche qu'avec mozilla mais avec internet explorer, ma page est toujours cole a gauche et j'ai toujours un espace a droite.
merci de bien vouloir m'aider.
letatus a écrit :
excuser moi, mais je viens de verifier finalement ça ne marche qu'avec mozilla mais avec internet explorer, ma page est toujours cole a gauche et j'ai toujours un espace a droite.
merci de bien vouloir m'aider.


Bonjour,

Tout y est dit y compris pour IE6: Centrer les éléments ou un site web en CSS
Cette syntaxe ne pose aucun problème à partir d'IE6 et supérieures.

Une page en ligne comme demandé précédemment serait donc la bienvenue.
Modifié par knarf (16 Apr 2009 - 18:22)