Propriété Class non pris en compte

Salut à tous !

J'ai un petit problème étrange mais je ne trouve pas la solution...

voici mon code html :

<div style="position:relative;">

<div class="box" style="position:relative; width:550px; height:270px; margin:0 40px;">
<p class="boxTitre">Simple comme 1-2-3 !</p>
<p style="background:url(images/step1.png) bottom left no-repeat; height:58px; line-height:58px; padding-left:100px;"><span>Envoyez</span>-nous vos rushes</p>
<p style="background:url(images/step2.png) bottom left no-repeat; height:58px; line-height:58px; padding-left:100px;"><span>Controlez</span> la qualité de votre film</p></li></ul>
<p style="background:url(images/step3.png) bottom left no-repeat; height:58px; line-height:58px; padding-left:100px;"><span>Recevez</span> par internet ou par courrier votre film monté</p>
</div>

<div class="box" style="position:absolute; right:0; top:0; width:300px; height:270px; margin-right:40px;">
<p class="boxTitre">Nos priorités</p>
<p style="background:url(images/quality_small.png) bottom left no-repeat; height:64px; line-height:64px; padding-left:100px;">La qualité</p>
<p style="background:url(images/piggy_small.png) bottom left no-repeat; height:64px; line-height:64px; padding-left:100px;">Le prix</p>
<p style="background:url(images/delay_small.png) bottom left no-repeat; height:64px; line-height:64px; padding-left:100px;">Les délais</p>
</div>

</div>

et mon CSS :

.box {
border-right:solid 1px #FCE90A;
border-bottom:solid 1px #FCE90A;
border-left:solid 1px #FCE90A;
}

.boxTitre {
text-align:center;
height:40px;
line-height:40px;
font-size:1.2em;
margin-bottom:30px;
background:#FCE90A url(images/box_40px_up_bg.png) repeat-x;
}

Alors, concernant le .boxTitre, le line height, height, background fonctionne bien mais impossible de centrer le texte ni d'appliquer le font-size.
Pourtant lorsque j'applique ces propriétés dans le code HTML, là ça marche...

Y'a qqchose que je dois pas voir... et vous ?

Merci d'avance.
Modifié par Ollivier (20 Mar 2008 - 14:23)

Hello,

Déjà tu devrais commencer par mieux séparer ton code HTML et tes styles.

Et à vu de nez tu devrais plutôt avoir un code dans ce genre:

<div id="menu">
	<div id="menu-box-1">
		<h2>Simple comme 1-2-3 !</h2>
		<ul>
			<li><span>Envoyez</span>-nous vos rushes</li>
			<li><span>Contrôlez</span> la qualité de votre film</li>
			<li>etc.</li>
		</ul>
	</div><!-- #menu-box-1 -->
	<div id="menu-box-2">
		<h2>Nos priorités</h2>
		<ul>
			<li>etc.</li>
		</ul>
	</div><!-- #menu-box-2 -->
</div><!-- #menu -->

Ensuite tu gères le reste côté CSS. À la rigueur, il te faudra peut-être des classes "item1", "item2", "item3", "item4", etc., sur les li des menus.

Autre chose: ne pas figer la hauteur des contenus, sauf si on sait très exactement ce que l'on fait (remarque: on sait rarement ce que l'on fait ).

Bref, ça serait bien de partir d'une base saine (code HTML valide, bonne utilisation de la sémantique HTML -- cette dernière n'étant pas bien compliquée --, CSS externe et validé, etc.).

En passant: il n'y a pas de propriété «class», ni en HTML ni en CSS. Attention à bien utiliser les bons mots.

Merci !

En fait c'est une des grosses question que je me pose :

Y'a toujours 80% des pages web qui sont identique donc on peut les "styler" en CSS

Mais qu'en est t-il du contenu ? Faut t-il toujours créer une nouvelle classe pour chaque nouveau paragraphe ou élément graphique ?

Bon, je suis encore novice en CSS et je me doute bien que je dois me compliquer la vie la plupart du temps...

Bonjour Ollivier

J'avoue ne pas trop comprendre tes questions dans le dernier post

De quoi parles-tu quand tu dis que 80% des pages Web sont identiques ?

Quand à la suite, je ne suis pas sur que tu ais bien compris le fonctionnement d'une class

80% des pages d'un seul et même site web ! désolé...

Ben, pour styler le contenu d'une page web, (donc forcément différent de page en page), que fais tu toi par exemple ? Quelle est la méthode a suivre ?
Modifié par Ollivier (25 Mar 2008 - 13:31)

J'espère que j'ai bien compris...

Le contenu est bien évidemment différent en tant que contenu mais pas forcément dans sa nature. Ce que je veux dire c'est que les mêmes éléments (titres, textes, images, etc.) seront présentés avec les mêmes balises, les mêmes "id" et les mêmes "class" quelque soit la page, sinon le site n'est plus cohérent

Est-ce que ça répond à ta question ?

Oui, c'est ça qui est dur après, faire en sorte que le site soit cohérent...

Ollivier a écrit :
Oui, c'est ça qui est dur après, faire en sorte que le site soit cohérent...

Ben le principe c'est que tu fais tes styles pour les paragraphes, les listes, les blockquote, les titres (différents niveaux), etc. Tu peux prévoir quelques classes pour donner ponctuellement un style précis à un paragraphe par exemple. On peut imaginer une classe «avertissement» qui passe le texte en rouge sombre et place une bordure autour du paragraphe, une classe «note» qui passe le paragraphe (ou peut-être le span auquel la classe sera attribuée) en gris et en italiques, ce genre de chose. Ça va dépendre de ton contenu et de tes besoins.

Une fois que ceci sera fait, tu n'auras plus qu'à composer des contenus en HTML correctement balisé (les titres comme des titres, les listes comme des listes, les paragraphes comme des paragraphes, etc.), et éventuellement à ajouter ponctuellement une classe parmi le jeu de classes que tu as défini.

Ensuite, il se peut que sur certaines pages précises tu aies des besoin de mise en page différents. À toi de voir s'il faut:
- créer un template différent (avec une structure HTML et un code CSS partiellement différent de ceux des autres pages) pour ce type de page;
- placer juste quelques styles sur certains éléments du contenu de certaines pages précises, en passant alors par l'attribut style côté HTML;
- placer un identifiant (attribut id) spécifique sur certains éléments, et prévoir leurs styles dans la feuille de styles.