28173 sujets

CSS et mise en forme, CSS3

Image 1 fois sur 2 et pas de centrage [resolu]

Bonsoir,

Le CSS me rend fou, c'est dingue ça. Quelque choses d'aussi simple que ceci, je n'arrive pas à avoir le résultat que je pense avoir écrit.

<style type="text/css">
body
{
	background: #e6e6e8 url("/<?php echo("$prefixe_dossier"); ?>images/fond.gif") repeat-x fixed top left;
	color: #000000;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.t_titre {
	background: #C0C0C0 url("/<?php echo("$prefixe_dossier"); ?>images/t_titre.gif") repeat-x fixed top left;
	font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/
	text-align:center;
	width:30%;
}
</style>
</head>
<body>
<form name="login" id="login" method="post">
<p class="t_titre">Bienvenue sur</p>
<p align="center"><img src="images/logo_gestelle.png" alt="GESTELLE"></p>
<p class="t_titre">Identification :</p>


ma classe t_titre n'est pas centrée elle reste à gauche et l'image qui est en background ne s'affiche que sur le 1er t_titre.

ça va vous sautez aux yeux alors que je ne vois rien d'anormal.

Merci d'avance
Modifié par lodan (04 Nov 2006 - 14:59)
Salut

A priori, on dirait plutôt un problème de PHP que de CSS ... on peut avoir le code généré pour la première page et pour une autre ?
background: #C0C0C0 url("/<?php echo("$prefixe_dossier"); ?>images/t_titre.gif") repeat-x fixed top left;


C'est pas un peu contradictoire tout ça ?!

vire "fixed" et "top left". Ou si tu veux l'effet inverse met met "no-repeat".
Voici le code généré

<style type="text/css">
body
{
	background: #e6e6e8 url("/gestelle/images/fond.gif") repeat-x fixed top left;
	color: #000000;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.t_titre {
	background: #C0C0C0 url("/gestelle/images/t_titre.gif") repeat-x fixed top left;
	font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/
	text-align:center;
	width:30%;
}
</style>
</head>
<body>
<form name="login" id="login" action="login.php" method="post">
<input type="hidden" name="action" value="send">
<p class="t_titre">Bienvenue sur</p>
<p align="center"><img src="images/logo_gestelle.png" alt="GESTELLE"></p>
<p class="t_titre">Identification :</p>
J'ai oublié, tout ce passe dans le même script, il n'y en a pas 2.

<p class="t_titre">Bienvenue sur</p>

<p align="center"><img src="images/logo_gestelle.png" alt="GESTELLE"></p>

<p class="t_titre">Identification :</p>


Dans ce script, le 1er "t_titre" affiche une image, pas le 2ème.

Voir le 1er post pour le css correspondant.
noklio a écrit :
background: #C0C0C0 url("/<?php echo("$prefixe_dossier"); ?>images/t_titre.gif") repeat-x fixed top left;


C'est pas un peu contradictoire tout ça ?!

vire "fixed" et "top left". Ou si tu veux l'effet inverse met met "no-repeat".


La solution est par là...
J'ai retiré "fixed" et "top left", mais je ne suis toujours pas centré ?

Il faut que je laisse repeat-x car mon image fait 1px de large.
Il serait judicieux de "maniper" avec les propriétés background.

Vous devriez faire une petite maquette en éclatant la propriété racourcie :

background: #C0C0C0 url("/gestelle/images/t_titre.gif") repeat-x fixed top left;

devient :
background-color:#e6e6e8;
background-image:url("/gestelle/images/fond.gif");
background-repeat: repeat-x;
etc...

Ainsi, vous pouvez activer ou desactiver une propriété en la commentant avec /* et */

De plus, (en attendant les précision de Bison Smiley lolol ) vous avez tout le loisir de lire et imprimer la page (française, s'il vous plaît) du w3c sur la question.

http://www.yoyodesign.org/doc/w3c/css2/colors.html#background-properties

Pour une fois, ce n'est pas écrit en chinois, et vous allez voir, la lumière va fuser...
Merci de m'avoir aidé, mais j'abandonne le css.

Je dois être trop nul.

Je vais faire un tableau et terminé.

Merci encore.
ça fonctionne très bien comme cela et pardon pour les grincheux, mais je vois pas l'intérêt des heures perdues autour de si peu.


Je ne sais pas en quoi il faut être calé pour réussir ses css, mais bon.

Oui je vais me calmer
<style type="text/css">
body
{
	background: #e6e6e8 url("/<?php echo("$prefixe_dossier"); ?>images/fond.gif") repeat-x fixed top left;
	color: #000000;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.t_titre {
	background-color:#C0C0C0;
	background-image:url("/<?php echo("$prefixe_dossier"); ?>images/t_titre.gif");
	background-repeat: repeat-x;
	font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/
	text-align:center;
	width:30%;
}

</style>
</head>
<body>
<form name="login" id="login" action="login.php" method="post">
<input type="hidden" name="action" value="send">
<table width="100%" >
<tr align="center">
	<td >
		<p class="t_titre" align="center">Bienvenue sur</p>
	</td>
</td>
<tr align="center">
	<td >
		<p ><img src="images/logo_gestelle.png" alt="GESTELLE"></p>
	</td>
</td>
<tr align="center">
	<td >
		<p class="t_titre">Identification :</p>
	</td>
</tr>
</table>
Administrateur
lodan a écrit :
J'ai retiré "fixed" et "top left", mais je ne suis toujours pas centré ?

Sans avoir suivi le sujet, je dirais que pour centrer l'image de fond, il faudrait sans-doute employer "center", non ? Donc quelque chose comme "left center" devrait convenir.

a écrit :
ça fonctionne très bien comme cela et pardon pour les grincheux
Dans ce cas, pas de soucis, personne ne va grincher puisque tout va bien Smiley cligne

a écrit :
, mais je vois pas l'intérêt des heures perdues autour de si peu.
Bah c'est toujours une question de savoir si apprendre les méthodes modernes est du temps perdu ou non.
Pour ton problème, tu l'as résolu à l'ancienne. Ce n'est pas grave du tout. Mais un jour, il faudra bien se passer de ton vieux grammophone pour passer au lecteur MP3 Smiley langue même si rien ne t'y oblige.

a écrit :
Je ne sais pas en quoi il faut être calé pour réussir ses css, mais bon.
Là au-moins je connais la réponse, elle est très simple : prendre du temps, encore du temps et toujours du temps pour connaître vraiment toutes les bases.
Inutile de vouloir brûler les étapes et essayer des constructions complexes sans maîtriser complètement les choses simples.
Il y'a une liste de choses à maîtriser absolument en CSS avant de se lancer dans le bain :
- les différents sélecteurs (éléments, id, class, sélecteurs d'enfants, adjacents, d'attribut, etc.) ainsi que le poids des sélecteurs et leur hierarchie
- les différents types de balises (principalement bloc et en-ligne) et le comportement qui en découle
- le flux courant et le positionnement naturel des éléments, ainsi que le positionnement relatif
- les positionnements hors-flux, très spécifiques, tels que le positionnement absolu, fixe et flottant (lui-même étant le plus complexe)
- les différentes propriétés CSS pour le média screen (c'est un minimum) et les caractéristiques spécifiques de chacune

Je pense avoir résumé les bases minimales nécessaires. Sans ces bases, chaque essai sera empirique, maladroit, plus complexe que nécessaire, voire incompatible ou non fonctionnel.

Bref : du temps, du temps et encore du temps.
Merci Raphael,

Je livre la semaine prochaine, alors c'est vrai que je suis un peu sous pression.

Je fini mon projet avec le CSS.

Je sais maintenant que dans un autre projet, le CSS fera partie intégrante de la définition au début des normes de programmation.

Mais bon c'est mon 1er projet, je suis qu'en même assez content du résultat.

Merci pour ce mot qui m'appaise.

Je reviendrai donc.
Sujet clos
Aller à