28173 sujets

CSS et mise en forme, CSS3

Div dans td...

Bonjour,

je travaille sur un site déjà existant avec des tableaux.
Je dois faire une mise en page de certaines pages, et dans une ligne je souhaiterais avoir un fond dégradé et sur le coté droit un carré avec nom prénom et age.

j'ai donc fait : 

<tr>
       <td width="754" height="291" class="bandeau">
	  <div class="info">
           <span class="nom">Jean</span><br />
            <span class="prenom">Henri</span>
           </div>	
 	</td>         
</tr>

css : 

.info{
	float:left;
	width:auto;
	margin-top:-143px;
	margin-left:5px;
	padding : 5px 5px 5px 5px;
	height:70px;
	background-color:#FBEACA;
	outline:dashed #234770 1px;
	line-height:25px;

.bandeau {
	background-image:url(images/bond_bandeau.png);
	background-repeat:repeat-x;
	
}

bon le float n'est pas dans le flux ce qui est normal....j'ai donc dû mettre un margin-top:-143px; pour que mon carré reste dans mon <td>.
y'aurait -t il une solution pour que le float s'imbrique dans le td et ne dépasse pas ?
Je fais du css en pointillé donc j'oublie...
Merci Smiley biggrin
Modifié par Hermann (19 Sep 2007 - 11:22)
maysa a écrit :
y'aurait -t il une solution pour que le float s'imbrique dans le td et ne dépasse pas ?

Heu... ben les flottants ne dépassent pas des cellules de tableau, donc normalement il n'y a rien à faire, vu que ça ne dépasse pas...

À constater avec le code suivant (page de test complète): 
<!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=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	#test1 {
		background: green;
		padding: 50px;
		height: 10px; /* pour un td, fonctionne comme une hauteur minimale */
	}
	#test2 {
		background: yellow;
		padding: 50px;
	}
	#test1 p, #test2 p {
		width: 150px;
		margin: 0;
		float: left;
		background: red;
	}
	</style>
</head>
<body>
<table><tr><td id="test1">
	<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</td></tr></table><!-- #test1 -->
<div id="test2">
	<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</div><!-- #test2 -->
</body>
</html>
Merci pour ta réponse, maintenant il ne me reste plus qu'a trouver pourquoi mon float dépasse.... Smiley langue
Modifié par Florent V. (19 Sep 2007 - 12:49)
maysa a écrit :
Merci pour ta réponse, maintenant il ne me reste plus qu'a trouver pourquoi mon float dépasse.... Smiley langue

Rien de tout cela qui traine: position absolue, position relative, marges négatives?
Bien si...marge négative, mais j'ai un div dans mon td pour faire ce que toi tu fais en p...
regarde...
maysa a écrit :
Bien si...marge négative

Tu dis que tu as une marge négative pour pallier le dépassement du flottant. Or, le flottant n'est pas censé dépasser. Donc tu supprime la marge négative, et tu cherche, sans cette marge négative parasite, d'où peut venir ce problème de dépassement. Smiley smile
Tu peux procéder par élimination pour voir ce qui fait que le flottant dépasse de la cellule de tableau. Comme le montre mon exemple, ça n'est normalement pas le cas.

Sinon, avec une page en ligne ça serait un poil plus simple. Smiley cligne
Oui je sais bien mais je ne peux pas car c'est pour le boulot, et de plus, pour l'instant c'est en phase de test.
Mais merci, je vais chercher....
Sujet clos
Aller à