28172 sujets

CSS et mise en forme, CSS3

Positionnement float ou display: table-celle

Bonjour à tous,

Voilà plus de deux jours que je me prends la tête sur une design pourtant simple que je vous décrit ici :
http://image.noelshack.com/fichiers/2013/01/1357214619-positionnement.png

La div 1 (bleue) est classique et englobe la 2 et les 3.
La div 2 (verte) a une taille minimum et englobel la 4 et les 5.
Les div 3 (violettes) prennent la place restante.
La div 4 (rose) a une taille minimum.
Les div 5 (oranges) prennent la place restante.
Je ferais du responsive plus tard pour que la div 2 descende en dessous des 3.

J'ai essayé avec des float, des display: table-cell et je ne m'en sort pas... Je pensais pourtant être à l'aise avec le positionnement CSS, mais là je ne m'en sort pas sans solution crade.

Donc si vous pouviez m'aider ou m'aiguiller ce serait très gentil (même un lien vers un tuto bien complet m'interesse).

Merci
Modifié par Dur_dur (03 Jan 2013 - 13:09)
Bonjour,

De ce que j'en vois, un float right sur ta boite 2 devrait permettre de la placer ou tu veut (avec son contenu), et une marge à droite des bloc 3 permettra d'éviter les soucis.

Et pour le contenu de ta boite 2, une structure avec des table-cell fera l'affaire (il y ajustement un tutoriel sur la questin à cette adresse

Si tu ne t'en sors toujours pas, met nous ton code actuel (ou un lien pour le voir), pour voir ce qui ne va pas.
Un code rapide du test. Cependant, 4 doit toujours être posé à gauche, qu'il y a des 5 ou pas. Et mon code n'est p-e pas le plus beau... Ai-je bien besoin de mes "bis" ?


<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Test</title>
</head>
<body style="padding: 0 8px 0 8px">
	<div id="1" style="background-color: blue">
		<div id="2" style="float: right; min-width: 540px; background-color: green">
			<div id="2bis" style="display: table">
				<div id="5bis" style="display: table-cell">
					<div class="5" style="background-color: orange">5</div>
					<div class="5" style="background-color: orange">5</div>
					<div class="5" style="background-color: orange">5</div>
				</div>
				<div id="4" style="display: table-cell; width: 300px; background-color: red">4</div>
			</div>
		</div>
		
		<div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
		<div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
		<div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
		<div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
		<div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
	</div>
</body>
</html>


http://image.noelshack.com/fichiers/2013/01/1357223070-test.png
Tu n'as pas besoin de tes "bis".

En les supprimant on devrait arriver au résultat voulu:

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Test</title>
</head>
<body style="padding: 0 8px 0 8px">
  <div id="1" style="background-color: blue">
    <div id="2" style="float: right; min-width: 540px; background-color: green; display: table">
      <div id="5" style="display: table-cell">
        <div class="5" style="background-color: orange">5</div>
        <div class="5" style="background-color: orange">5</div>
        <div class="5" style="background-color: orange">5</div>
      </div>
      <div id="4" style="display: table-cell; width: 300px; background-color: red">4</div>
      </div>
    
    <div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
    <div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
    <div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
    <div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
    <div class="3" style="margin: 0 560px 0 0; background-color: purple">3</div>
  </div>
</body>
</html>
Sujet clos
Aller à