28173 sujets

CSS et mise en forme, CSS3

[Résolu] Div Id/Class : besoin d'un peu d'ordre

Bonjour,

Une fois encore, je me tourne vers les spécialistes, puisque ce Forum et le Site m'ont déjà beaucoup aidé...

Depûis que j'ai découvert les balises DIV (je n'utilisais avant que des calques), j'en mets partout. Du coup je me perds et j'ai l'impression de faire un peu n'importe quoi !

Voilà la page qui témoigne de mes errements...

Le problème se situe du côté de la partie ou je mets mes photos. Comme je voulais cette mise en forme là, j'ai emboité les images dans deux DIV, l'une pour la barre grise, l'autre pour l'image-texte. Je n'ai pas trouvé le moyen de combiner ces deux objets de style en un seul, d'où les deux DIV. Par ailleurs, j'utilise les ID, et j'ai cru voir sur le Forum que ça ne servait pas à ça normalmement...?

<div id="RemonteesPhotosHier">
        <div id="RemonteesPhotos2"> ... </div>
      </div>


Voilà le bout de code CSS associé :


#RemonteesPhotosHier {
	padding-left: 30px ;
	background-image:url(RPhotoHier.jpg);
	background-repeat:no-repeat;
	}
#RemonteesPhotos2 {
	border-left: 3px solid #9B9A9A ;
	padding-left: 15px ;
	}


J'utilise d'ailleurs la même méthode barbare pour citer du texte avec la guillemet à gauche :

<div id="RemonteesAvis">
          <div id="RemonteesAvis2">
            ...
          </div>
        </div>


#RemonteesAvis {
	padding-left: 40px ;
	padding-right: 50px ;
	background-image:url(Images_Actualites/Citation.jpg);
	background-repeat:no-repeat;
	}
#RemonteesAvis2 {
	border-left: 3px solid #9B9A9A ;
	padding-left: 15px ;
	}


Il y a-t-il moyen de faire quelque chose de propre ?

Merci d'avance pour votre aide !

;)
Modifié par ARGo (15 Jan 2008 - 19:22)
ARGo a écrit :
Il y a-t-il moyen de faire quelque chose de propre ?

Oui.

Déjà, il serait logique que l'élément blockquote soit limité à ce que tu présentes visuellement comme une citation, non?

Donc on fera:
[b]HTML:[/b]
<blockquote>
	<p>Sur les téléskis bla bla...</p>
	<p class="auteur">– R.G.</p>
</blockquote>

[b]CSS:[/b]
blockquote {
	padding-left: 58px ;
	padding-right: 50px ;
	background-image: url(Images_Actualites/Citation.jpg);
	background-repeat: repeat-y;
}

Mais heu, où est passée la bordure? Ben c'est simple, on va la dessiner dans l'image Citation.jpg (qui gagnera à priori à être un PNG-8 indexé à 4 ou 8 couleurs...).

En gros il faut faire une image avec à gauche les guillemets graphiques, et à droite une barre grise de 3px de haut et répétée... sur 2000px de haut si on veut prendre large. Au delà, le repeat-y joue et on retrouve des guillemets graphiques et la suite de notre barre. Si on veut faire des citations de trois pieds de long, rien n'empêche de faire une image de dix mille pixels de haut, en PNG-8 ça ne pèsera pas bien lourd (prédiction rapide: 2ko).

Ah tiens, en fait non, ça ne fait même pas un ko pour une image de 46x10000px. Je viens d'essayer de l'envoyer sur le forum mais ça fait planter le script d'envoi d'images à cause de la hauteur excessive. Donc voilà l'image en 5000px de haut (612 octets):

upload/2043-bqtest.png

Et voilà. Smiley smile
Merci de ta réponse.
Mais je ne vais pas faire des images de hauteurs diférentes à chaque fois que je dois citer un truc...

?
ARGo a écrit :
Mais je ne vais pas faire des images de hauteurs diférentes à chaque fois que je dois citer un truc...

Hein?

Ben le principe de l'image de fond, c'est que si le bloc fait 200px de haut on affiche 200px de haut de l'image de fond, s'il fait 50px de haut on affiche 50px, s'il fait 3000px de haut on affiche 3000px... et tout ça se fait automatiquement.

À la rigueur on précisera background-position: left top, mais bon c'est les valeurs par défaut.

Je crois que tu n'as pas tout à fait saisi la solution que je te propose. Je te recommande donc de la tester. Smiley cligne
Sujet clos
Aller à