Aller au contenu

Le titre + 1 image, en CSS

francoisch

Par francoisch
dans (X)HTML et CSS

 Partager

Sujets conseillés

francoisch

francoisch

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Gibou

Gibou

Posté
Posté (modifié)

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é par Gibou
Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté

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>

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté

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é)

Lien vers le commentaire
Partager sur d’autres sites
francoisch

francoisch

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté (modifié)

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é par ghost
Lien vers le commentaire
Partager sur d’autres sites
francoisch

francoisch

Posté
  • Auteur
Posté (modifié)

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é par francoisch
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...