28220 sujets

CSS et mise en forme, CSS3

Bonsoir,

j'aimerais avoir quand j'ai un blockquote un fond gris mais aussi une image

actuellement voici ma css
.post-content blockquote	{
	padding: 5px;
	font-family: Georgia, serif;
	font-style: italic;
	border: 1px dashed #ccc;
	background: #F0F0F0;
	}

blockquote	{
	background: url(dotclear/themes/GuizBlogTheme/img/quote/quote.gif) top left no-repeat;
	}


mais ça fonctionne pas Smiley decu

merci de votre aide Smiley biggrin
Modifié par GuizBizet (22 Jul 2005 - 21:48)
Euh... rien d'incompatible entre un blockquote et une image de fond, ça devrait fonctionner.

Je penche pour une erreur dans le chemin vers l'image Smiley cligne
Pour dotclear, tu dois mettre ta feuille de style dans le dossier GuizBlogTheme et donc les url dans la feuille de style pointent vers img/quote/quote.gif et non dotclear/[ bordel ]/img/quote/quote.gif

@+
Nonon Smiley cligne

Il n'y a pas que le pb éventuel d'url :

C'est un conflit de propriétés : l'un des deux background annule l'autre (ils ne se cumulent pas, contrairement à ce qu'on pourrait penser).

Il faut utiliser par exemple background-color: #F0F0F0; pour éviter le conflit.
Modifié par Laurent Denis (22 Jul 2005 - 21:33)
malgré vos explication ça marche toujours pas/

il y aurait pas un ordre de déclaration des position et du repeat pour FF ?
non olivier l'url est pas mauvaise et j'ai fais ça car j'ai eu des soucis avec mon blog

sur tu mets
img/quote/quote.gif
au lieu de
dotclear/[ bordel ]/img/quote/quote.gif
et bien ça marche sur la page d'accueil du blog mais quand tu cliques sur un billet plus d'images.

ça m'est surtout arrivé avec les images pour les titres calendrier, catégories, syndication etc ... Smiley cligne

problème résolu

merci
Le code suivant fonctionne pourtant très bien Smiley cligne

blockquote {
background: url(test.png)[b] top left[/b] no-repeat
}
.post-content blockquote{
padding: 5px;
font-family: Georgia, serif;
font-style: italic;
border: 1px dashed #ccc;
[b]background-color[/b]: #F0F0F0;
}

et

<div class="post-content">
  <blockquote>
    <p>Typi non habent claritatem insitam...</p>
  </blockquote>
</div>

Modifié par Laurent Denis (22 Jul 2005 - 21:50)
Olivier a écrit :

En effet, left top et non top left

Euh non !

top left est aussi bon que left top Smiley decu

Avec les mots-clés, il n'y a pas d'ambiguité possible...

Quand on utilise les mots-clés, on peut écrire top left ou left top, ça signifie toujours en haut à gauche (à gauche en haut). C'est quand on utilise des valeurs en pourcentage ou en longueur que la première valeur correspond à la position horizontale.

Recommandation CSS2 du W3C a écrit :

top left et left top
Identique à '0% 0%' ;

top, top center et center top
Identique à '50% 0%';

right top et top right
Identique à '100% 0%' ;

left, left center et center left
Identique à '0% 50%' ;

center et center center
Identique à '50% 50%' ;

right, right center et center right
Identique à '100% 50%' ;

bottom left et left bottom
Identique à '0% 100%' ;

bottom, bottom center et center bottom
Identique à '50% 100%' ;

bottom right et right bottom
Identique à '100% 100%'.

http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background-position
Administrateur
Stephan a écrit :
top left est aussi bon que left top Smiley decu

Avec les mots clés : pas d'ambiguité possible en effet, mais ce n'est pas le cas lorsqu'on utilise des valeurs, donc il vaut mieux prendre l'habitude :
W3C a écrit :
Quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celle-ci ne concerne que la position horizontale, la position verticale sera 50%. Quand on donne deux valeurs, la première concerne la position horizontale. Les combinaisons de valeurs de pourcentage et de longueur sont admises (ex. '50% 2cm').
(même lien)
Ahh vui c'est vrai, mais je fais comme ça pour la raison qu'évoque Raphaël Smiley smile
Ca me revient maintenant Smiley langue

Etrange ton problème par rapport au chemin des images avec dotclear Smiley ohwell
Chez moi ça roule nickel :s

T'aurais pas enlevé le <?php dcInfo('theme'); ?>/ (avec le slash) dans le chemin de la feuille de style
<?php dcInfo('theme'); ?>/style.css

?
GuizBizet a écrit :
sur tu mets
img/quote/quote.gif
au lieu de
dotclear/[ bordel ]/img/quote/quote.gif
et bien ça marche sur la page d'accueil du blog mais quand tu cliques sur un billet plus d'images.

ça m'est surtout arrivé avec les images pour les titres calendrier, catégories, syndication etc ... Smiley cligne


Cela peut indiquer également un problème de réécriture d'url (pour simuler des url sympas sans ?... ou sans index.php?..., blog.php?..., etc.)