28220 sujets

CSS et mise en forme, CSS3

Sur ma page d'accueil, j'ai un div qui reprend 4 paragraphes qui sont configurés de la meme facon :


<div id="PrincipalSsFond"> 

<div class="BlocsAccueil2">
<a  href="/apprentissage.php"> 
<div class="TitresAccueil2">
Mon titre du premier paragraphe
</div>
<div class="TextesAccueil2">
mon texte du premier paragraphe
</div>
</a> 
</div>

....x4

</div>

Et voici ma CSS :

#PrincipalSsFond {
	float:left;
	max-width:625px;
	margin-bottom: 10px;
}
.BlocsAccueil2{
	min-height:45px;
	background-color: #E6EAE8;
	margin-bottom: 7px;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
}
.BlocsAccueil2 a{
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
}
.TitresAccueil2{
	background-image:  url(/image/titredesparagraphes.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: italic;
	color: #FFFFFF;	
}
.TextesAccueil2{
	margin:0px 3px 3px 3px;
}

Le problème ne se fait qu'avec firefox, et qu'avec le dernier de mes 4 paragraphes.
Aléatoirement, lorsque je recharge la page, le titre de mon dernier paragraphe devient noir alors qu'il est configuré blanc.
Si je rafraichis, il reste noir ou il redevient blanc.

J'ai l'impression que mon code est correct.
S'agit-il d'un bug de firefox?
Modifié par gabnico (28 May 2005 - 12:02)
gabnico a écrit :

J'ai l'impression que mon code est correct.


Non, tu te retrouves avec (je simplifie)



<a>
<div></div>
<div></div>
</a>


soit donc des balises bock insérées dans des balises inline

au passage si tu à des titres utilises les balises adéquates --> h1, h2,...,h6

++
Ok j'ai donc remplacé mon TitreAccueil2 par h2.
Et ca a l'air de fonctionner.
Je laisse tombé parce que je suis à la bourre mais c'est toujours pas très correct puisque j'ai toujours :

<a>
<h1>
</h1>
<TexteAccueil2>
</TexteAccueil2>
</a>

mais je vois de toute facon pas comment je pourrais faire si je veux toujours avoir tout mon bloc qui soit clicable et deux types de mise en page du texte à l'intérieur du bloc.

d'ailleurs, vu que mon a soit transformé en display block
cela ne m'autorise il pas a mettre d'autres type block à l'intérieur ?

En tout cas merci Smiley cligne
hum...

La meilleure façon de remercier serait de tenir compte des conseils et de produire du code correct

La propriété css appliquée à une balise change son comportement et pas sa nature. si elle est inline elle le reste c'est évident.
Modifié par clb56 (26 May 2005 - 13:35)
Tu ne m'aides pas.
Si c'est juste pour souligner mes erreurs sans me donner de pistes ca ne sert à rien.
donc, est -ce possible d'avoir un bloc dont toute la zone du bloc est un lien, donc clicable, avec a l'intérieur deux mises en forme de texte différentes???
Modérateur
Au contraire, il t'aide pour que tu en apprenne un peu plus. Respecter les normes de codage est un très bon début pour éviter des bugs d'affichage. C'est bon de savoir qu'il ne faut pas mettre de balises blocs dans des balises inlines. Déjà, ca t'annonce que tu ne peux pas mettre un simple lien autour d'une balise DIV. Le fait que tu ne produise pas un code correcte peut être une très bonne raison pourquoi ca ne fonctionne pas dans Firefox et que tu considère que c'est peut-être un bug de Firefox. Commence par faire un code valide, après tu pourras douter du navigateur. Smiley cligne

Malheureusement, je n'ai pas le temps d'en dire plus, faut je bosse maintenant !
a écrit :
est -ce possible d'avoir un bloc dont toute la zone du bloc est un lien, donc clicable, avec a l'intérieur deux mises en forme de texte différentes???


Oui, en mettant plusieurs liens :
<h1><a href="URL">Titre</a></h1>

<p><a href="URL">Texte</a></p>
La confusion est entrée dans les esprits. Il ne faut pas mélanger :
- le respect de la DTD XHTML
- les problématiques CSS de présentation/postionnement

le problème posé est relatif au second point alors que les réponses concernaient le premier.
Comme cela a été dit, pour être correct il ne faut pas introduire d'élément <div> dans un éléments <a> (par respect pour la DTD). En revanche cette remarque n'a rien à voir la présentation des éléments utilisés, si bien qu'il est complètement possible conformément au besoin exprimé, d'inclure dans un élément <a> un élément figurant une "boite block".
En voici un exemple :
a, span {display:block}

<a href="">
<span>...</span>
<span>...</span>
</a>
En fait si on met un peu d'ordre dans ce que tu dois faire et dans ce que tu veux obtenir on obtient ceci :

html



<div class="BlocsAccueil2">

<h2 class="TitresAccueil2">
Mon titre du premier paragraphe
</h2>
<p class="TextesAccueil2">
mon texte du premier paragraphe
</p>
<a href="/apprentissage.php">Apprentissage</a>
</div>



css


div.BlocsAccueil2 {
position:relative;
}

div.BlocsAccueil2 a {
display:block;
position:absolute;
top:0;
left:-20%;/* valeur au hasard */
width:120%;
height:100%;
font-size:1px;
}


Note 1 : J'ai repris tes classes mais il me semble qu'il vaudait mieux utiliser des id.

Note 2 : à l'avenir si tu souhaites que l'on t'aide il serait bon que tu t'astreignes au principe de rigueur intellectuelle qui régit ce forum.
C'est donc la solution des deux liens qui a été retenue.
clb, j'ai essayé comme tu disais mais ca ne marchais pas.
pour les class, vu que j'ai 4 paragraphes, ca doit bien rester des classes, non?
je met le code au cas ou ca interesserait quelqu'un.

<div class="BlocsAccueil2">
<h2><a href="/apprentissage.php">Apprentissage</a></h2> 
<p><a href="/apprentissage.php"><?php echo $para1 ?></a></p> 
</div>

la CSS:

.BlocsAccueil2{
	background-color: #E6EAE8;
	margin-bottom: 7px;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;}
.BlocsAccueil2 h2 a {
	display:block;
	text-decoration:none;
	color: #FFFFFF;}
.BlocsAccueil2 p{
	margin:0px 3px 3px 3px;
	margin-top:0px;}
.BlocsAccueil2 p a{
	min-height:45px;
	text-decoration:none;
	display:block;}

C'est déja plus propre.Ca a l'air correct?
Et désolé j'avais besoin d'un petit réapprentissage XHTML,j'ai fait un
petit validator pour me raffraichir les idées. Smiley biggrin
Désolé si j'étais un peu nerveux mais je dois rendre mon travail la semaine prochaine, il me reste la mise en page apres un long développement PHP et j'ai mal estimé le temps que ca allait prendre.