28220 sujets

CSS et mise en forme, CSS3

Aide pour mise en forme CSS

upload/3306-indexnb.jpg
Bonjour,

Je galere un peu pour avoir une mise en page CSS comme celle que j'ai réalisée en maquette. En gros, pas grand chose, un titre pour la photo,une photo centrée et qui n'a jamais la meme taille. Je voudrais que mon texte au dessus et celui en dessous de la photo soient calés sur le bord droit de la photo. Mon pb, c'est surtout cette largeur d'image qui n'est pas fixe....

Help please. Smiley smile
tu met le titrre, la photo et le texte dans un grand div au quel tu donne un text-align: right.

-- Aenario --
bonjour, a ta place je commencerais a faire les tutos du site qui t'explique tout cela
et si tu ne trouve toujours pas fait ce de : [URL supprimé par Stephan]
[Tant que l'information XHTML/CSS qui y est publiée ne sera pas corrigée (nombreuses erreurs et approximations), on évitera de diriger un nouveau droit dans le mur]
et si tu ne trouve toujours pas quelqu'un du forum t'aidera peut être moi Smiley cligne
tu pourais commencais par ca si tu a les bases : Centrer les éléments ou un site web en CSS
Merci de faire de vrais liens pour ne pas déformer le forum -- Igor
Modifié par moe (05 Sep 2011 - 12:26)
Bonjour pierrot et bienvenue sur ce forum.

Pourrais-tu nous montrer les essais que tu as fait jusqu'à maintenant pour effectuer cette mise en page ? Parce qu'il faut partir sur la base de quelque chose pour qu'on puisse t'aider.

Ta page en ligne ou du moins quelques codes HTML + CSS seraient un atout pour toi.

À tout hasard, je te recommande la lecture de : Centrer les éléments ou un site web en CSS
Modifié par Stephan (10 Sep 2005 - 20:00)
bonsoir tout le monde.
Merci pour vos réponses si rapides.
Je vais lire les tutos.
J'ai une question puisque je vous tiens.
Je fais une balise div générale, ok, si je veux utiliser des formats différents pour mes textes d'en haut et d'en bas,je fais appel à d'autres classes de style via un div aussi?...j'imbrique des div c ca?
C'est bon, mes div imbriqués fonctionnent, mais j'ai encore un pb, je vais mettre ca en ligne pour vous montrer...
a écrit :
Mon pb, c'est surtout cette largeur d'image qui n'est pas fixe....

Est-ce que la hauteur de l'image est fixe?
pierrot a écrit :

Je fais une balise div générale, ok, si je veux utiliser des formats différents pour mes textes d'en haut et d'en bas,je fais appel à d'autres classes de style via un div aussi?...j'imbrique des div c ca?

Si ton HTML est bien construit, tu peux facilement t'en sortir sans surtaxer ton CSS avec des sélecteurs par class inutiles.

Par exemple :

<div id="conteneur"
	<h4>Un titre</h4>
	<img src="" ... />
	<p>info additionnelle</p>
</div>

que tu pourras styler de la façon suivante :

#conteneur {
}

#conteneur h4 {
}

#conteneur img {
}

#conteneur p {
}
b'soir mathmax. Non, pour répondre à ta question, les dim des la photo sont variables en fait.
Je t'invite à aller voir, c'est par la...
http://pierrenavarra.free.fr/
Pas de secret, c'est récupéré de chez pixelpost mais je voudrais me faire mon propre style.
Voila ce que j'essaye de faire :
- une image centrée qqs soient ses dimensions.
- deux textes formatés et qui devraient etre toujours alignés sur le bord droit de l'image.

voici un extrait de mon CSS :
a écrit :

body {
background-color:#FFFFFF;
font-family: arial, helvetica, sans-serif;
}

.image-title{
font-size: 11pt;
text-align: right;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 10px;
}

.image-image {
text-align: right;
padding-right: 30px;
}

.image-image a{
color: #FFFFFF;
}

.image-commentsnbre{
text-align: right;
color: #6E6E6E;
font-size: 14pt;
padding-right: 30px;
}

.image-commentsnbre a{
color: #6E6E6E;
font-size: 14pt;
text-decoration: none;
}

.image-comments {
color: #000000;
font-size: 6px;
letter-spacing: 2px;
}


Merci d'avance à vous tous.
Merci stephan, je vais modifier ca...
Modifié par pierrot (10 Sep 2005 - 20:14)
Moi j'ai l'idée de faire comme Stephan pour le html. Tu définis la largeur de ta boite égale à celle de l'image. Tu la centre horizentalement avec margin auto, puis verticalement avec une margin-top négative et tu mets tes textes en {text-align: right;}
Maintenant avec cette technique, si tu veux changer d'image, il te faudra redéfinir la largeur de ta boite et la recentrer verticalement.
Je ne sais pas comment faire pour que la boite prenne automatiquement exactement la largeur de l'image. Si quelqu'un sait, je suis preneur. Smiley ravi Cela t'éviterais de redéfinir la largeur de ta boite à chaque fois que tu change d'image.
Pour le centrage vertical, il serait interessant de savoir si il est possible de centrer verticalement des élément blocs sans connaître leur hauteur (un peu comme le margin:auto pour le centrage horizontale). Cela éviterais la encore d'avoir à remodifer ta page négative à chaque changement d'image. Là aussi, si quelqu'un a une idée, ça m'interesse.
Bonjour,
si les dimensions de la nouvelle image ne sont pas connues, il est possible les récupérer via javascript une fois celle-ci chargée dans le navigateur. Le nouveau positionnement pourra se faire à ce moment seulement Smiley biggrin
Bonjour,

J'ai réussi à faire ce que je voulais, simplement, je suis passé par des <table> et j'en suis pas fier.
Peut-etre qu'en vous montrant le code, qq1 pourra me dire comment tout faire (si possible) avec un CSS car la, je colle...
Au passage, j'ai updloadé ca chez l'hebergeur pour que vous puissiez vous rendre compte du résultat. D'avance merci et bonne journée à vous, de mon côté, je lache pas l'affaire et essaye de trouver...d'autant que mon texte-decoration marche pas....

http://pierrenavarra.free.fr


<div align="center" style="padding-left: 22px;font-family: arial, helvetica, sans-serif;">
<table>
<tr>
<td><div align="right" style="font-size: 11pt;padding-top: 50px;padding-bottom: 20px;"><IMAGE_TITLE>, <IMAGE_DATETIME></div></td>
</tr>
<tr>
<td><a href="index.php?showimage=<IMAGE_PREVIOUS_ID>">
<img style="color: #FFFFFF;padding-bottom: 20px;" id="image" src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_PREVIOUS_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" />
</a></td>
</tr>
<tr>
<td><div align="right" style="color: #6E6E6E; font-size: 14pt;text-decoration: none;"><IMAGE_COMMENTS_NUMBER> <span style="color: #000000;font-size: 6px;letter-spacing: 2px;">COMMENTS</span></div>
</td>
</tr>
</table>
</div>
[code]
Modifié par pierrot (11 Sep 2005 - 09:05)
a écrit :
si les dimensions de la nouvelle image ne sont pas connues, il est possible les récupérer via javascript une fois celle-ci chargée dans le navigateur. Le nouveau positionnement pourra se faire à ce moment seulement

Est-on obligé de recourir a cette solution Javascript:
-pour qu'une boite s'adapte en largeur à son contenu?
-centrer verticalement des élément blocs dont les heuteurs peuvent varier en fonction du contenu?
Pour faire un centrage de trois éléments alignés à droite, il faut connaître la largeur occupée par ces trois éléments. Une façon de faire est de prédéfinir des sélecteurs pour différentes largeurs (il doit bien y avoir moyen de limiter celles-ci à quelques unes).

Le CSS :

.cover {
	position: absolute;
	left: 50%;
	text-align: right;
}

.small {
	width: 400px;
	margin-left: -200px; /* la moitié de la largeur de l'image */
}

.medium {
	width: 500px;
	margin-left: -250px;
}

.large {
	width: 600px;
	margin-left: -300px;
}

Le HTML :

<div class="cover small">
	<h4>Un titre</h4>
	<img src="koln_at_night.jpg" width="400" height="300" alt"" />
	<p>info additionnelle</p>
</div>

<div class="cover medium">
	<h4>Un titre</h4>
	<img src="ala_turk.jpg" width="500" height="400" alt"" />
	<p>info additionnelle</p>
</div>
Salut stephan,

Ma méthode fonctionne avec les <table>, ce qui me semble contraignant avec ta méthode (si je puis me permettre) c'est que si ma photo fait une taille différente, ce qui est le cas, comment rendre la valeur de la largeur dynamique?....

Sinon, tant pis, je fais avec les table mais j'aime po ca...enfin, si vous, en tant que pro, ca ne vous choque pas....
bah... Si tu veux faire un tableau, autant le faire proprement : Au tableau !

Parce qu'un tableau à trois lignes ne causera pas de problèmes d'accessibilité s'il est bien conçu.
Modifié par Stephan (12 Sep 2005 - 23:15)
Sujet clos
Aller à