28172 sujets

CSS et mise en forme, CSS3

Fluid : 3 collones + Flexbox

Bonjour à tous,

Merci d'avance pour vos réponses.

J'ai un layout en 3 colones : 1 colone de navigation (200px) & 2 colone de contenu de largeur égale.

Pour l'instant, j'ai mon markup :

<div id="navigation"></div>
<div id="content-container">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>


J'ai mis le content-container en box, mais le problème c'est qu'il sort de l'écran (de la taille de la div de navigation, 200px).

De plus, sidebar & content n'ont pas la même largeur.

Avez-vous une petite idée ?

Merci beaucoup
Salut,

Pour qu'il y ait une solution à ton problème, encore faut-il qu'il y ait un problème clairement exposé, ce qui n'est pas le cas de ton sujet. Il serait en effet bon que tu mettes toutes les chances de ton côté pour que nous comprenions ton problème, et que nous puissions t'y apporter une ou plusieurs solutions.

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi. Smiley cligne
Je vais essayer de compléter un peu mon message, merci.

div#navigation {    
    width: 200px;
    height: 100%;
    position: fixed;
    
    background: #e2e9f0;
    border-right: solid 1px #ccc;
}


div.content-container {
    margin-left: 200px;
}

div#content-container div#content {
    border-left: solid 1px #ccc;

    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;
    -webkit-flex-box: 1;

}

div#content-container div#sidebar {
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;
    -webkit-flex-box: 1;
}


Mon but : obtenir 3 colones qui s'adaptent à la largeur du navigateur dont l'une d'entre elle est fixée.

A l'heure actuelle, j'obtient :
- 2 colones de taille différente qui fixe au contenu & non au navigateur
- Lorsque le contenu est trop grand, les colones sortent du navigateur au lieu de renvoyer le contenu à la ligne

upload/26740-Untitled-1.jpg

Pour le grand espace blanc dans le contenu, c'est normal, il n'est pas encore styliser.

J'espère avoir été plus clair.
Merci encore
Bonjour à toutes et à tous,

voici un exemple d'une mise en page à trois colonnes dont une fixe (à gauche).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
* {
			margin				: 0;
			border				: none;
			padding				: 0;
}

body {
			background-color	: maroon;
}

#navigation {
			background-color	: red;

			position			: fixed;
			top					: 0;
			left				: 0;
			width				: 15%;
			min-width			: 150px;
			z-index				: 2;
}

#content-container {
			float				: right;
			width				: 85%;
			z-index				: 1;
}

#sidebar {
			background-color	: green;
			float				: right;
			width				: 50%;
}

#content {
			background-color	: yellow;
			float				: right;
			width				: 50%;
}

</style>

<!--[if IE]>
<style type="text/css">
#navigation {			width	: 14.99%;	}
#content-container {	width	: 84.99%;	}
#sidebar {				width	: 49.99%;	}
#content {				width	: 49.99%;	}
</style>
<![endif]-->
<head>

<body>
	<div id="navigation"><h1>Navigation</h1>
	</div>

	<div id="content-container"> 
		<div id="sidebar"><h1>Sidebar</h1>
		</div> 

		<div id="content"><h1>Content</h1>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div> 
	</div>
</body>
</html>


@+
Bonjour Artemus,

Merci pour votre réponse.

J'avais essayer cette variante et ca fonctionnais parfaitement, jusqu'à ce que j'ajoute une bordure.

Je voulais éviter de mette width: 49.9% sur un des div car après 0.1% dépend toujours de la taille de l'écran de l'utilisateur, donc ca peut laisser un espace blanc dans le cas de grand écrans.

Avez-vous une idée ?

Merci encore
Bonjour Pierre Lechelle,

il faut, dans le calcul des width et height des boites, tenir compte de l'épaisseur de la bordure. En effet, avec des pourcentages, il est assez difficile de faire en sorte d'avoir un cadrage parfait car une différence aussi minime quelle soit, cela se verra à l'écran.

Dans la partie Internet Explorer, les 49.99% sont un problème de calcul en pourcentage. Microsoft, dans un cas de figure particulier ne sait pas effectuer l'arrondi correctement. En effet admettons que le résultat trouvé soit "largeur de la fenêtre réduite" * 50% donne 253 * 50% = 126,5. Microsoft va arrondir à 127 ce qui est juste en soi.

Mais pour éviter ce désagrément, car dans ce calcul il y a deux fois 50%, une pour la partie de gauche et une pour la partie de droite, qui donne comme nouvelle largeur 127 + 127 = 254 au lieu des 253 de la largeur de la fenêtre, une solution consiste à ne pas donner un pourcentage trop rond. Du coup le calcul donne 253 * 49.99 = 126.4747 soit 126. Et la largeur devient 126 + 126 = 252. Et comme 252 est inférieur à 253, les boites de gauche et de droite rentre dans la fenêtre.

Une astuce est de faire en sorte de créer une marge artificielle entre chaque boite qui se trouve dans le conteneur. Donc même si 1 pixel d'écart peut en résulter, votre marge sera légèrement plus grande et si vous avez jouer sur les couleurs du conteneur et des boites personne ne remarquera cette différence.

@+
Sujet clos
Aller à