28172 sujets

CSS et mise en forme, CSS3

Question sur les flottements

Bonjour,

J'ai une question bête à vous soumettre:

J'ai 3 blocs:
- le premier contient un lecteur flash
- le second le contenu
- le dernier une barre latérale

Le tout ce trouve dans un bloc contraignant la largeur à 1024px

Pour des besoins pratiques, j'ai besoin de mettre à jour la largeur du bloc "player" pour qu'il occupe l'intégralité de celle du bloc maitre passant ainsi de 750px à 1024px par le biais d'une fonction javascript (du style "toggle" en utilisant la libraire Mootools)
Les blocs "player" et "contenu" se retrouveront en dessous du bloc "player".

Or, dans le code qui suit, le flottement initial ne positionne pas les blocs de manière correcte, voyez plutôt:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">

<head profile="http://gmpg.org/xfn/11">
<title>test</title>
<style type="text/css">
*{
	padding:0;
	margin:0;
	}

#page{
	width:1024px;
	margin:auto;
	background:#e5e5e5;
	border:1px solid #000;
	}
#sidebar{
	float:right;
	width:274px;
	height:500px;
	background:#99ccee;
	}
#player{
	float:left;
	width:750px;
	height:300px;
	background:#a5a5a5;
	border-bottom:1px solid #cccccc;
	}

	#content{
	height:400px;
	float:left;
	width:750px;
	background:#a5a5a5;
	}

</style>
</head>
<body>
<div id="page">

<div id="player"></div>
<div id="content"></div>
<div id="sidebar"></div>

<div style="clear:both;"></div>
</div>
</body>
</html>


Pour que ça puisse fonctionner, "sidebar" doit être placé à la suite de "player" et de "content", mais le flottement, comme je l'ai dit, ne positionne pas les blocs correctement.

Si je bouge "sidebar" en haut de "player" et de "content", tout s'imbrique parfaitement. Comment obtenir le même résultat avec celui-ci en dessous?

Merci à vous, là, j'avoue, je colle complétement.
Salut,

Si tu veux garder cet ordre de création des divs, tu ne pourras pas obtenir ce que tu souhaites avec des éléments flottants et seras obligé de passer certains blocs en positionnement absolu.
Dans ce cas, comment font youtube pour étendre le player sur toute la largeur de la page?
Dans le code, ils ajoute la class watch-wide-mode et tout se décale parfaitement.

Aucunes idées?
Merci encore!
Sujet clos
Aller à