28173 sujets

CSS et mise en forme, CSS3

Demande d'aide pour mise en page

Bonjour à tous,

voilà j'ai un soucis je n'arrive pas à faire simplement une mise en page (si l'on peut nommer ceci comme çà !) pour un site.

Je dois placer une div à l'intérieur d'une autre et avoir des informations à l'intérieur comme sur ce schema :
upload/10586-maquette.jpg

Le soucis c'est que je n'arrive pas à gérer l'aggrandissement de la div, en clair elle a comme hauteur : 200px et comme largeur 500px (par exemple). Si ma description est trop longue elle sort de celle-ci (position absolute oblige) idem si l'un des lignes est trop longue... elle dépasse.

Comment pourrais-je faire pour avoir cette div autour qui s'adapte au contenu en sachant que celui ci sera variable et que les élements doivent être positionnés à des emplacements précis !

Merci beaucoup pour l'aide apportée Smiley cligne

Bonne fin de journée à tous !
Modifié par rpgmax (30 May 2007 - 19:05)
Salut,

L'idéal serait de ne pas définir de hauteur à ton bloc il s'adaptera automatiquement à son contenu. Smiley cligne
Et bien non justement cela ne marche pas...

Les elements sont en absolute d'où ce problème mais comment faire autrement pour pouvoir les placer à leurs endroits respectifs ??
rpgmax a écrit :
Les elements sont en absolute d'où ce problème

Ne pas utiliser le positionnement pour ce genre de cas de figure. Ça n'est pas adapté.

rpgmax a écrit :
mais comment faire autrement pour pouvoir les placer à leurs endroits respectifs ??

Avec des flottants (propriété CSS float), à priori. Ou à la rigueur un tableau à deux cellules (pour image + description), ce qui sera toujours mieux que d'utiliser le positionnement absolu.

Solution avec flottants :
<!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">
	div#bloc {
		width: 400px;
		padding: 10px 20px;
		border: solid 1px black;
	}
	div#bloc div.intro {
		margin: 0 50px 15px 0;
	}
	div#bloc div.intro img {
		float: left;
		margin-right: 15px;
		background: red;
	}
	div#bloc div.intro p {
		overflow: auto;
		_height: 1%; /* À mettre, sans le _, dans une feuille pour IE6 (via commentaire conditionnel) */
	}
	div#bloc div.corps {
		clear: both;
	}
	
	</style>
</head>
<body>

<div id="bloc">
	<div class="intro">
	<img alt="Texte alternatif pertinent ou rien du tout" src="..." width="120" height="140" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
	</div>
	<div class="corps">
	<p>Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</p>
	<p>Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim.</p>
	<p>Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
	</div>
</div><!-- fin de div#bloc -->

</body>
</html>

Ce n'est qu'une possibilité, il y en a d'autres.
Sujet clos
Aller à