Le titre + 1 image, en CSS

francoisch · 13 Août 2007

bonjour

J'ai actuellement en tête d'une de mes pages:

- un titre de type H1

- une image 160*120

dans deux cellules d'une table, 75% pour l'un, 25% pour l'autre.

Je voudrais décrire à peu près exactement ça en CSS pour pouvoir ensuite créer une Div id= en tête de chacune de mes pages.

L'image reste la même mais le libellé du titre change à chaque page.

Je souhaite éviter les dimensions en pixels dans la CSS pour que mes pages s'adaptent à chaque résolution.

Par avance merci de votre aide.

Francois

Gibou · 13 Août 2007

A mon avis, tu seras obligé d'avoir quelque chose du type :


<div id="header">
  <table class="whole">
    <tr>
      <td class="s75">Titre en h1</td>
      <td>Image</td>
    </tr>
  </table>
</div>

Et le css :


#header
{
width:100%;
height:120px; // en supposant que le header ait pour hauteur la hauteur de l'image
}

table.whole
{
width:100%;
}

table.whole td.s75
{
width:75%;
font-size:22px; // A peu près, je ne sais pas exactement la taille du h1
text-align:center;
}

Sinon, je ne sais pas

Modifié 13 Août 2007 par Gibou

ghost · 13 Août 2007

Bonjour,

Bien que ce soit assez déconseillé d'avoir une image qui s'adapte à la résolution (il vaudrait mieux une image fixe avec un background qui lui s"étirera)

Alors sans table, ça devrait donner un truc comme ça:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
#header{
width: 100%;
border: 1px solid black;
text-align: center;
overflow: hidden;
}

#header img{
display: block;
width: 75%;
float: left;
}

header p{
width: 25%;
}

</style>
</head>
<body>
<div id="header">
<img src="image.jpg" alt="" />
<p> texte qui change</p>
</div>
</body>
</html>

Gibou · 13 Août 2007

Pour plus de sûreté pour tous les navigateurs, ne vaut-il pas mieux préciser un margin-left:75% dans le #header p {} ?

ghost · 13 Août 2007

Re,

Non nécessaire, le texte sera toujours repoussé même sans margin. Par contre, il doit y avoir un problème sous Konqueror qui ne doit pas garder la proportionnalité de l'image automatiquement en ne lui indiquant que le width (pas testé)

francoisch · 14 Août 2007

bonjour et merci à tous pour vos réponses.

Voila où j'en suis après qqes petites modifs personnelles:

------------------CSS-------------------
#header{
width: 100%;
border: 1px solid black;
text-align: left;
overflow: hidden;
}

#header img{
display: block;
width: 25%;
float: right;
}

#header h1{
width: 75%;
}
------------------Html-------------------
<div id="header">
<h1> Des aides au Maintien à Domicile des personnes dépendantes</h1>
<img src="fde50.bmp" alt="PA" width="160" height="120" />
</div>

Il me manque encore qqechose puisque:

- the texte H1 apparaît au dessus de l'image (l'un à gauche et l'autre à droite)

- l'image est compressée / étendue en largeur en fonction de la dimension de la fenêtre

Je voudrais vraiment que le texte et l'image apparaissent côte à côte, patrtageant la largeur, 75% pour l'un, 25% pour l'autre.

Merci à tous pour votre support.

Francois

ghost · 14 Août 2007

Salut,

Ton image est en float: right, elle doit se présenter en premier dans le code html avant ton <h1>

<div id="header">
<img src="fde50.bmp" alt="PA" width="160" height="120" />
<h1> Des aides au Maintien à Domicile des personnes dépendantes</h1>
</div>

Ca devrait aller mieux

Image en bmp , ne vaudrait il pas mieux la compresser en jpg?

Modifié 14 Août 2007 par ghost

francoisch · 14 Août 2007

bonjour Ghost et merci de ta réponse.

Modification faite, effectivement, ça marche, merci à toi.

Une petite chose toutefois: comme mon image occupe tout l'espace accordé (25%), elle est déformée.

Y a t il une déclaration possible pour que l'image ne cherche pas à occuper tout son espace?

Par avance merci.

Sinon, pour l'image, tu veux dire qu'elle serait plus petite, et plus rapide à charger, en Jpg?

Francois

-------------------------------------------Mercredi------------------------------------------------

bonjour

J'ai obtenu à peu près ce que je voulais après qqes tentatives, sans être vraiment sûr que ce soit un bon code; voici:

------------------ CSS ------------------ 
#header{
width: 100%;
border: 0px solid black;
text-align: left;
overflow: hidden;
background: #ECECEC; 
}

#header p{
display: block;
width: 160px;
height: 120px;
float: right;
border: 0px;
background-image: url(Rfde50.jpg);
background-repeat: no-repeat;
}

#header h1{
width: 80%;
}
------------------ Html------------------ 
<div id="header">
<p> </p>
<h1> Des aides au Maintien à Domicile des personnes dépendantes</h1>
</div>

Qu'en pensez vous? Des modifications utiles?

Par avance merci de votre aide.

Francois

Modifié 15 Août 2007 par francoisch

Connexion

Le titre + 1 image, en CSS

Sujets conseillés

francoisch

Gibou

ghost

Gibou

ghost

francoisch

ghost

francoisch

Veuillez vous connecter pour commenter

Parcourir

Activité