28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

j'ai un souci pour convertir mon tableau ci-dessous en <div>
<style type="text/css">
<!--
#cadre {
	border: outset #FFCC33 4px;
	padding: 4px;
	right: 15%;
	width: 25em;
}
#gauche {
	float:left;
}
#logo {
	border: 0px;
	padding: 0px;
	margin: 0px;
}
#logo img {
	border: 0px;
	padding: 4px 10px 4px 0;
	width: 100px;
	height: 110px;
}
-->
</style>
<table cellspacing="0" width="300px">
	<tr>
		<td width="100%">xxxxxxxxxx</td>
		<td rowspan="3" valign="middle" align="right"><img src="image.gif" width="100px" height="110px;" /></td></tr>
	<tr>
		<td>aaaaaaaaaaaaa</td></tr>
	<tr>
		<td>bbbbbbbbbbbbbb</td></tr>
	<tr>
		<td colspan="2" class="lien"><a href="http://www.blabla.fr/">www.blabla.fr</a></td></tr>
</table>

<div id="cadre">
	<div>
		<div id="gauche">
			<div id="1">xxxxxxxxxx</div>
			<div id="2">aaaaaaaaaaaaa</div>
			<div id="3">bbbbbbbbbbbbbb</div>
		</div>
		<div id="logo"><img src="image.gif" /></div>
	</div>
	<div id="4"><a href="http://www.blabla.fr/">www.blabla.fr</a></div>
</div>


J'aimerais que le div gauche prenne toute le place restante (25em-image).

Pourriez-vous svp me dire ce qu'il y a a changer... Smiley biggrin
Merci d'avance

@bientôt Smiley cligne
Modifié par Tchupacabra (17 Jan 2006 - 11:30)
Alors c'est simple : les cellules de tableaux et les blocs conteneurs neutres (div) ne sont pas équivalents. Le comportement d'une cellule de tableau, c'est de s'allonger en hauteur et en largeur pour égaler la plus haute cellule sur la ligne, ou la plus large cellule sur la colonne.

Les div, elles, ne sont pas liées entre elles par des notions de "colonnes" ou de "lignes". Le comportement que tu cherches à obtenir est donc impossible... sauf à utiliser des "trucs", à ruser...

Va voir dans les tutoriels Alsacréations.com, il y a un tutoriel juste sur cette question là (pas le temps de trouver l'adresse exacte, et puis faut un peu chercher par soi-même, hein !).
Ok merci pour cette explications.... Smiley smile

cependant, je ne souhaite pas que mes <div> de gauche aient la même largeur... j'aimerais qu'ils prennent la place disponible (25em-largeur image).
C'est pas la même chose.... mais c'est la même finalité.

Si c'est pas possible avec <div> peut-être avec une autre balise ? Smiley murf