28220 sujets

CSS et mise en forme, CSS3

Deux td remplacer en css2

Bonjour,

je cherche à faire ceci en CSS pour disposer des textes liés à des images


<table>
<tr>
<td><img src=""></td>
<td>texte texte</td>
</tr>
</table>
<br /><br />
<table>
<tr>
<td><img src=""></td>
<td>texte texte</td>
</tr>
</table>


Donc pour le moment j'ai fait ceci



CSS
img {
	float: left;
}
h2 {
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
}

XHTML

<img src="" />
<h2>titre de l'image</h2>
<p>description de l'image</p>
<br />
<img src="" />
<h2>titre de l'image</h2>
<p>description de l'image</p>
<br />


Donc le problème c'est que quand le texte dépasse en hauteur la taille de l'image, la partie du texte qui dépasse est évidemment placé à partir du dessous de l'image.

J'ai regardé la faq et testé des codes dans les exemples avec les screenshot de alsa mais l'image ne se place pas comme il faut.
L'image se place sur le bord gauche et vu que le site est en margin auto pour le mettre en 800*600 ca ne va pas

Quelqun pour m'aider ?

MErci
Modifié par jch (15 Nov 2005 - 20:36)
essaye comme ceci:
HTML
<img src="" />
<div class="descr">
<h2>titre de l'image</h2>
<p>description de l'image</p>
<br /></div>
<img src="" />
<div class="descr">
<h2>titre de l'image</h2>
<p>description de l'image</p>
<br />
</div>
CSS
img {
	float: left;
}
.descr{float:left;}
h2 {
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
}
Smiley eek Smiley confus
je la refais
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
img {
	float: left;
}
.descr{float:left;}
h2 {
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
}

</style>
</head>
<body>
<img src="blue.gif" />
<div class="descr">
	<h2>titre de l'image</h2>
	<p>description de l'image <br />fnbuinufi<br />fnbuinufi<br />fnbuinufi<br />fnbuinufi<br />fnbuinufi<br />fnbuinufi<br />fnbuinufi</p>
	<br />
</div>
<img src="blue.gif" />
<div class="descr">
	<h2>titre de l'image</h2>
	<p>description de l'image</p>
	<br />
</div>
</body>
</html>
ou tout simplement 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style>
img {
	float: left;
}
h2 {
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
	width : 100px;
	border :1px solid black;
}

</style>
</head>
<body>
<p><img src="logo.gif" width="50" height="50" alt="image" />Est-ce que c'est ceci que tu veux faire?? Est-ce que c'est ceci que tu veux faire??</p>
</body>
</html>


non?
yyoupla a écrit :
je ne pense pas.

sa demande était que tout le texte se trouve à droite de l'image, et ne passe pas dessous.


exactement Smiley smile
c'est bien le bordel le css2 quand même
meuuuh non, suffit d'aimer un tout ptit peu le creusage de ciboulot...
(a force de creuser, parfois je me touche les orteils Smiley eek )


Edit: merci de mettre Résolu dans le sujet de ton post
Modifié par yyoupla (15 Nov 2005 - 23:12)
hello,

En fait je viens de me rendre compte que ton code ne va pas pour mozilla il si je ne fais pas d'erreur.

En effet si tu mets un paragraphe assez long entre les balises <p> tout le bloc texte passe sous l'image.

testes avec ce code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Document sans nom</title>

<style>

img {

	float: left;

}

.descr{float:left;}

h2 {

	margin: 0;

	padding: 0;

}

p {

	margin: 0;

	padding: 0;

}



</style>

</head>

<body>

<img src="blue.gif" />

<div class="descr">

	<h2>titre de l'image</h2>

	<p>description de l'image fnbuinufifnbuinufi fnbuinufi fnbuinufifnb uinufi fnbuinufi fnbuinufi</p>

	<br />

</div>

<img src="blue.gif" />

<div class="descr">

	<h2>titre de l'image</h2>

	<p>D'une façon générale, vous pouvez visiter notre site sur Internet sans avoir à décliner votre identité et à fournir des informations personnelles vous concernant.D'une façon générale, vous pouvez visiter notre site sur Internet sans avoir à décliner votre identité et à fournir des informations personnelles vous concernant.D'une façon générale, vous pouvez visiter notre site sur Internet sans avoir à décliner votre identité et à fournir des informations personnelles vous concernant.<br /></p>

	<br />

</div>

</body>

</html>


Merci Smiley cligne
Et comme ca ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titre</title>
<style type="text/css">
.blocall{
float:left;
width:300px;
position:relative;
margin-right:10px;
}
img {
float:left
}
dl {
padding-left:100px;
background-color:#CCCCCC;
}
dt {
margin: 0;
padding: 0;
font-size:120%;
color:#000000
}
</style>
</head>
<body>
<div class="blocall">
<img src="blue.gif" />
<dl><dt>titre de l'image</dt>
<dd>description de l'image fnbuinufifnbuinufi fnbuinufi fnbuinufifnb uinufi fnbuinufi fnbuinufi</dd>
</dl>
</div>
<div class="blocall">
<img src="blue.gif" />
<dl><dt>titre de l'image</dt>
<dd>description de l'image fnbuinufifnbuinufi fnbuinufi fnbu beyfu ibyse dfubs ydufi bsydu fibsd hyufgibysdug bysro guibnsr gouib sru giobsdru goi xdrug ioxn,r uxrdo ignuxdr oni dxuri gnodxruiognxd rung dxuriognudxrio gndur iong duxroi gndux roig ndxurngiudxiprnguxdpirngu xdpnr gudxp rngupxd rngu pxdrnugp xdnrgu pxnerp inufifnb uinufi fnbuinufi fnbuinufi</dd>
</dl>
</div>
</body>
</html>
tiens je connaissais pas ces balises.

ca passe pas non plus le titre est décalé par rapport au texte

autant de prise de tête pour faire l'équivalent de deux td côte à côte je comprend pourquoi certains restent en css1
mais pas une âme de génie pour faire un truc aussi simple ?
vous nous laissez trifouiller ?
alors je trifouille
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titre</title>
<style type="text/css">
.blocall{
float:left;
width:250px;
}
img {
float:left;
}
.blocall p{
padding:0;
margin:0;
background-color:#CCCCCC;
float:left;
width:120px;
}
.titre {
font-size:130%;
}
</style>
</head>
<body>
	<div class="blocall">
	<img src="blue.gif" />
	<p><span class="titre">titre de l'image</span><br />
	description de l'image fnbuinufifnbuinufi fnbuinufi fnbuinufifnb uinufi fnbuinufi fnbuinufi</p>
	</div>
	<div class="blocall">
	<img src="blue.gif" />
	<p><span class="titre">titre de l'image</span><br />
	description de l'image fnbuinufifnbuinufi fnbuinufi fnbuinufifnb uinufi fnbuinufi fnbuinufi</p>
	</div>
</body>
</html>
et hop
Bonjour,

Vous vous heurtez simplement à un défaut d'implémentation, non de CSS2 elle-même.

La propriété display:inline-block qui est destinée à produire ce type de mise en page (et qui le fait très facilement) n'est hélas pas utilisable, faute d'être implémentée par Firefox et d'être débuguée dans Internet Explorer.

Il faut donc en effet en passer par les flottants, ce qui est moins pratique mais ne pose pas de problème majeur:
- faire flotter l'image à gauche
- placer le texte qui doit la flanquer dans un conteneur (s'il comporte plusieurs éléments successifs) et lui donner une marge gauche équivalente à la largeur de l'image (plus l'espace voulu entre les deux)
- s'il faut centrer le tout et que les largeurs du conteneur global et de l'image sont connues, jouer à nouveau sur les marges gauches de l'image et du texte et sur la marge droite du texte.
Sujet clos
Aller à