28220 sujets

CSS et mise en forme, CSS3

Largeur de calque qui s'adapte ?

Bonjour.

Alors voila mon probleme..J'aimerais faire un calque dont la largeur s'adapte au contenu intérieur (en l'occurence du texte et une iamge de fond). J'ai essayé les largeur type width:auto mais ca marche pas. Pourquoi quand on déclare un calque il prend tjs toute la longueur de la page ? (sauf s on lui met une width). Mon prob est que je voudrais mettre une image de fond a ce calque qui soit tjs positionné a la droite du contenu textuel

upload/444-image.gif

J'ai essayé cette méthode

.content2 .ssHome h2 {
	
	float                      : left;
                margin                 : 0px 0px 0px 0px;
	padding              : 25px 65px 32px 0px;
	background      : red url(img/ssHomeAccroche.jpg) top right no-repeat;
	font-weight         : normal;
                font-size           : 19px;
}
.content2 .ssHome div {

               font-size           : 1px;
               clear               : both;
}


et ceci



<div class="ssHome">
    <h2>Notre Recherche</h2>
    <div>&nbsp;</div>
</div>


mais ca fait 2 div...
Y aurait il un autre moyen ?

merci beaucoup
Modifié par moon (04 Nov 2005 - 09:23)
Modérateur
bonjour,
question peut-etre bete, mais as tu essayer a partir d'un
<span> ,un padding a droite avec l'image en fond placé a droite ...?
a bientot
En effet l'idée est sympa mais le probleme c'est qu'il s'agit d'un titre de page. Or si on veut garder le maximum de respect par rapport a l'accessibilité je dois garder ce titre en H1.
Modérateur
.... Peut-etre peut tu lui donner un display:inline; dans le css pour qu'il se comporte comme un "<span>"... si cela peut-etre ta soluce.

ex.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 strict</title>
<style type='text/css'>
 h2.montitre_image {
	display:inline;
	margin :0;
	padding : 25px 65px 32px 0px;
	 background : red url(img/ssHomeAccroche.jpg) top right no-repeat;
	font-weight : normal;
	font-size : 19px;
line-height:75px;/* pour IE, ce qui permet de dimensionner le titre comme le fait ff par defaut il s'agit la des valeur de padding et de hauteurs de police ajouter les unes aux autres */
	
}
</style>
</head>
<body>
<h2 class="montitre_image">ce que tu veux faire ?</h2>
</body>
</html>

a plus
Modifié par gcyrillus (04 Nov 2005 - 15:50)
<!-- Salut Gcyrillus essaye le code ci-dessous ??? Bon courage Laurentgraph -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Laurentgraph</title>
<style type='text/css'>
.calque{
background-color: #eeeeee;
}
</style>
</head>
<body>
<table width="50%" border="0" align="center" cellpadding="2" cellspacing="1">
<tr>
<td bgcolor="#f5f5f5">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#f5f5f5" class="calque">
<div id="Layer1" z-index:1; visibility: visible;">
<center><h1>Zone de texte</h1></center>
</div>
</td>
</tr>
<tr>
<td bgcolor="#f5f5f5">&nbsp;</td>
</tr>
</table>

</body>
</html>
Administrateur
Hello,

Attention laurentgraph à l'écriture correcte des codes sur le forum (relire les Règles sur ce sujet).
Merci de bien vouloir modifier ton message Smiley cligne

EDIT : attention également à ton code HTML qui ne respecte pas du tout le doctype HTML 4.01 strict que tu as choisi. Ici tu emploies des attributs et balises de mise en forme (align, bgcolor, center, etc.) qui ne sont absolument pas autorisées en doctype strict.
Tu as également des fautes dans cette partie, où il manque l'attribut "style" : 
<div id="Layer1" z-index:1; visibility: visible;">


Enfin, pour finir, je ne pense pas que moon ait envie de faire sa mise en page avec des tableaux.
Modifié par Raphael (04 Nov 2005 - 23:19)
Sujet clos
Aller à