Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP [CSS] vignette à gauche, titre centré : comment faire ?

[CSS] vignette à gauche, titre centré : comment faire ?

8 réponses
Avatar
Pierre Goiffon
Bonjour tous. Voici un petit soucis que je n'arrive pas à résoudre...

Alors voilà, je veux obtenir ceci en tête de mes pages :

------------
|mavignette| titre centré
------------

L'idée est d'avoir la vignette collée contre le coin gauche, et le titre
centré verticalement au milieu de la vignette, et horizontalement centré
entre la bordure droite de la vignette et la limite droite de la
fenêtre.

Pour l'instant je suis arrivé au mieux au code ci dessous - le prb est
que je n'arrive pas à centre le titre entre la limite de l'image et le
bord de la fenêtre. En utilisant des float, je n'arrive pas à centre le
titre verticalement sur le milieu de l'image... Bref, AU SECOURS !!! (je
précise que les dimensions de la vignette sont connues)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
h1 {
width: 100%;
border: 1px solid black;
margin-left: 80px;
text-align: center;
}

h1 img {
position: absolute;
margin-left: -80px;
vertical-align: middle;
text-align: left;
}
-->
</style>
</head>

<body>

<h1><img src="image.jpg">
blablablablabla</h1>

<p>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla </p>

</body>
</html>


--
..::: Pierre GOIFFON :::..

Un grand merci à OE Quote Fix pour rendre OE utilisable :)
=> http://home.in.tum.de/~jain/software/quotefix.php

(email temporairement supprimé pour cause de déferlante Swen :( )
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Frédéric Momméja
In article (Dans l'article) <3fcf5660$0$29077$,
"Pierre Goiffon" wrote (écrivait) :

Alors voilà, je veux obtenir ceci en tête de mes pages :

------------
|mavignette| titre centré
------------

L'idée est d'avoir la vignette collée contre le coin gauche, et le titre
centré verticalement au milieu de la vignette, et horizontalement centré
entre la bordure droite de la vignette et la limite droite de la
fenêtre.



Je suis loin d'être un spécialiste, mais ce qui suit semble fonctionner,
bien que ce ne soit cerainement pas la meilleure façon de procéder...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
h1 {
position: absolute;
padding: 0;
width: 100%;
border: 1px solid black;
text-align: center;
top: 30px; /* régler suivant hauteur image */
left: 0;
}

zolimage {
position: absolute;
padding: 0;
top: 0;
left: 0;
}
-->
</style>
</head>

<body>

<div id="zolimage"><img src="image.jpg"></div>
<h1>
blablablablabla</h1>

<p>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla </p>

</body>
</html>



HTH

--
Frédéric Momméja
Avatar
Pierre Goiffon
Dans le message:,
Frédéric Momméja a écrit:
Alors voilà, je veux obtenir ceci en tête de mes pages :

------------
mavignette| titre centré


------------



Je suis loin d'être un spécialiste, mais ce qui suit semble
fonctionner, bien que ce ne soit cerainement pas la meilleure façon
de procéder...

h1 {
position: absolute;
padding: 0;
width: 100%;
border: 1px solid black;
text-align: center;
top: 30px; /* régler suivant hauteur image */
left: 0;
}

zolimage {
position: absolute;
padding: 0;
top: 0;
left: 0;
}

<div id="zolimage"><img src="image.jpg"></div>
<h1>
blablablablabla</h1>



Merci de la réponse !

Cette solution m'ennuie un peu car, si j'ai bien compris, je dois créer
:
- une div pour l'image,
- une div pour le contenu en-dessous afin qu'il n'apparaisse pas
en-dessous du titre

J'aimerai autant que possible ne pas modifier mon HTML en fonction de la
forme désirée... Mais enfin, c'est déjà une piste. Merci encore milles
fois !

--
..::: Pierre GOIFFON :::..

Un grand merci à OE Quote Fix pour rendre OE utilisable :)
=> http://home.in.tum.de/~jain/software/quotefix.php

(email temporairement supprimé pour cause de déferlante Swen :( )
Avatar
Pierre Goiffon
Dans le message:3fcf5660$0$29077$,
Pierre Goiffon a écrit:
Alors voilà, je veux obtenir ceci en tête de mes pages :

------------
mavignette| titre centré


------------



Je viens d'essayer une autre méthode : sortir l'image du HTML, et
l'insérer en tant que background.

h1
{
height: 80px;
padding-left: 100px;
text-align: center;
background: url(images/bblove.jpg);
background-repeat: no-repeat;
background-position: left;
}

Mais à ce moment là je n'arrive pas à centrer le texte verticalement (je
ne comprend pas pourquoi le vertical-align ne fonctionne pas ??) -
sachant que ce texte n'a pas de dimensions connues contrairement à
l'image...

--
..::: Pierre GOIFFON :::..

Un grand merci à OE Quote Fix pour rendre OE utilisable :)
=> http://home.in.tum.de/~jain/software/quotefix.php

(email temporairement supprimé pour cause de déferlante Swen :( )
Avatar
Bruno Lintermans
Pierre Goiffon wrote:
Bonjour tous. Voici un petit soucis que je n'arrive pas à résoudre...

Alors voilà, je veux obtenir ceci en tête de mes pages :

------------
|mavignette| titre centré
------------

L'idée est d'avoir la vignette collée contre le coin gauche, et le titre
centré verticalement au milieu de la vignette, et horizontalement centré
entre la bordure droite de la vignette et la limite droite de la
fenêtre.





j'ai déjà fait quelque chose du genre sur
http://www.cecstone.com/pierrenaturelle.php
(cliquez sur un item du menu à droite)

j'avais résolu ce problème en mettant un align="absmiddle" dans la
balise <img...>

c'est pas du css, mais je me suis déja assez tiré les cheveux comme ca ;-)

autre problème, quand le texte se place sur plusieur lignes, parce que
trop long, il passe en dessous de l'image, mais je ma suis arrangé pour
ne pas avoir des textes trop longs.

m'enfi, ca dépanne ;-)

Bruno
Avatar
Bruno Lintermans
Frédéric Momméja wrote:
In article (Dans l'article) <3fcf5660$0$29077$,
"Pierre Goiffon" wrote (écrivait) :


Alors voilà, je veux obtenir ceci en tête de mes pages :

------------
|mavignette| titre centré
------------

L'idée est d'avoir la vignette collée contre le coin gauche, et le titre
centré verticalement au milieu de la vignette, et horizontalement centré
entre la bordure droite de la vignette et la limite droite de la
fenêtre.




Je suis loin d'être un spécialiste, mais ce qui suit semble fonctionner,
bien que ce ne soit cerainement pas la meilleure façon de procéder...



[snip]

h1 {
position: absolute;
padding: 0;
width: 100%;
border: 1px solid black;
text-align: center;
top: 30px; /* régler suivant hauteur image */
left: 0;
}



[resnip]

dans ce cas, le résultat sera fort influencé par la taille de la police
attribuée à h1. Qui, comme chacun sait est variable.
Avatar
Pierre Goiffon
Dans le message:3fcf6372$0$3245$,
Bruno Lintermans a écrit:
Alors voilà, je veux obtenir ceci en tête de mes pages :

------------
mavignette| titre centré


------------



j'ai déjà fait quelque chose du genre sur
http://www.cecstone.com/pierrenaturelle.php
(cliquez sur un item du menu à droite)



Je suis allé voir mais pas bien compris : le texte ne me parait pas
centré ? Il est aligné à gauche sur l'image ou quelques chose m'échappe
??

--
..::: Pierre GOIFFON :::..

Un grand merci à OE Quote Fix pour rendre OE utilisable :)
=> http://home.in.tum.de/~jain/software/quotefix.php

(email temporairement supprimé pour cause de déferlante Swen :( )
Avatar
Pierre Goiffon
Dans le message:3fd180be$0$6982$,
Christophe <pas_ré a écrit:
Pour remplacer votre attribut align="absmiddle", vos pouvez
normalement utiliser vertical-align: middle appliqué sur l'image
directement.



mais cela ne marche que dans un tableau, non ?



Non ! Extrait de la doc
(http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align) :

"Applies to: inline-level and 'table-cell' elements"

"This property affects the vertical positioning inside a line box of the
boxes generated by an inline-level element. The following values only
have meaning with respect to a parent inline-level element, or to a
parent block-level element, if that element generates anonymous inline
boxes; they have no effect if no such parent exists."

--
..::: Pierre GOIFFON :::..

Un grand merci à OE Quote Fix pour rendre OE utilisable :)
=> http://home.in.tum.de/~jain/software/quotefix.php

(email temporairement supprimé pour cause de déferlante Swen :( )
Avatar
Pierre Goiffon
Dans le message:3fd181fd$0$6982$,
Christophe <pas_ré a écrit:
Les pb de centrage vertical sont merdiques en CSS. Vertical-align
(fonction CSS) ne marche d'ailleurs que dans un tableau.



Euh, ce n'est pas tout à fait vrai, cf ma réponse plus haut.

Je pense qu'il vaut mieux
utiliser ce qui marche le mieux. En l'occurence un tableau.



La solution du line-height me satisfait assez pour ce besoin précis (pas
plus d'une seule ligne)

--
..::: Pierre GOIFFON :::..

Un grand merci à OE Quote Fix pour rendre OE utilisable :)
=> http://home.in.tum.de/~jain/software/quotefix.php

(email temporairement supprimé pour cause de déferlante Swen :( )