28172 sujets

CSS et mise en forme, CSS3

Positionnement div absolute / float

Bonjour,

le CSS, ma bête noire, me pose quelques soucis.

Voici le problème en question.

J'ai deux div, une en position absolute (au centre de ma page), une autre en positionnement flottant (right).

La div centrale peut changer de taille et donc s'aggrandir / rétrécir selon la bonne volonté de l'utilisateur, c'est pourquoi j'aimerai que la div en positionnement flottant soit toujours plus à droite que la div centrale (que ces deux là ne se touchent pas donc).

Exemple :

<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Exemple</title>
	<style type="text/css">
	    body {
			height: 100%;
		}

		.dragContainer {
			position:absolute;
			left:270px;
			margin: 0 0;
			width:1500px;
			height:500px;
			background-color:#EEEEEE;
			border:1px blue solid;
		}

		.stateBar {
			float:right;
			width:231px;
			height:96%;
			border-left: 1px #999999 solid;
			background-color:#C0C0C0;
		}
	</style>
</head>
<body>
	<div class="dragContainer">
	    <p>foo</p>
	</div>
	<div class="stateBar">
	    <p>bar</p>
	</div>
</body>
</html>


Suffit que la div soit plus grande que le body pour que les scrolls apparaissent et que je n'ai plus accès à mon menu Smiley decu

J'espère avoir été suffisamment clair Smiley rolleyes

Merci !
J'ai un peu le même problème que toi ici...

En attendant une solution "propre" j'ai du utiliser du JavaScript pour évaluer la taille du navigateur.

Ton dragContainer peut être de taille différente selon le choix de l'utilisateur ou de sa résolution?
Du choix de l'utilisateur Smiley cligne

Je le redimensionne en fonction de son contenu...

Ma div centrale est une div de travail, et comme toute zone de travail, elle est extensible Smiley cligne

Je vais regarder ton lien avec attention et vous tiens informé.

Merci
Je viens de parcourir le lien, mais ça ne m'ai pas d'une grande aide vu que tu n'utilise pas de conteneur flottant...

De ce que j'ai pu lire, on ne peut pas placer un conteneur flottant avec les attributs left / top, donc mon problème reste entier Smiley decu
Bonjour,

dans apprendre > outils > Gabarits de mise en page il y a tout ce qu'il faut pour faire ces types de design.

P.S. : Il vaut mieux limiter la taille maximale du design pour éviter d'avoir des lignes de 3km de long.
bzh a écrit :
Bonjour,

dans apprendre > outils > Gabarits de mise en page il y a tout ce qu'il faut pour faire ces types de design.

P.S. : Il vaut mieux limiter la taille maximale du design pour éviter d'avoir des lignes de 3km de long.


J'ai vu le modèle 11 qui peut correspondre à ce que je veux utiliser, seulement je ne sais pas du tout comment l'adapter à ma situation...

Comme dit, je suis une buse en CSS et un peu d'aide serait la bienvenue...
Sujet clos
Aller à