[CSS] vignette à gauche, titre centré : comment faire ?
Le
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 :( )
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 :( )
Poser une question
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...
"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>
<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
Frédéric Momméja
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 :( )
Pierre Goiffon
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 :( )
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
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
[snip]
[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.