18041 sujets

Questions générales et questions de débutants

Un défis sur le positionnement d'une DIV !

Bonjour à tous,

Merci d’avance pour votre aide. Je vous soumets un cas de figure je pense fort rare, car je ne l’ai jamais trouvé dans les forums.

Je souhaite mettre 2 DIV côte à côte, l’une s’appelle « gauche » l’autre « centre ». Mais la particularité c’est que celle de « gauche » contient une photo qui doit s’adapter à 100% en hauteur et garder son ratio largeur lors d’un redimensionnement de la fenêtre du navigateur. Je voudrai que la DIV « centre » se colle à elle juste à sa droite, hors la DIV « gauche »sur laquelle elle doit se coller change de taille en fonction du redimensionnement de la fenêtre.
L’autre souci c’est comme j’ai mis un positionnement « absolute » à ma DIV gauche, je n’arrive pas à coller ma DIV « centre » à celle-ci. Elles se chevauchent. Et quand j’arrive à ne pas les faire chevaucher, quand je redimensionne ma fenêtre de navigateur, la DIV « centre » ne se repositionne pas de façon à coller à ma DIV « gauche

Voici mon code avec le CSS inclus dedans :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body{	overflow:hidden;
	margin: 0px;
	padding: 0px;}
#gauche {float: left;
	top:0;
	left:0;
	position: absolute;}

#gauche,#gauche img {	width:auto;
	height:100%;}
#centre {	background-color: #666;}
-->
</style>
</head>
<body>
<div id="gauche"><img src="images/exemple.jpg" alt="gauche" /></div>
<div id="centre">essai</div>
</body>
</html>


Si quelqu’un a une idée déjà pour savoir si cela est possible et comment ?
Voici l’exemple actuel :
http://traouc.free.fr/haiti/exemple3.html

J’ai passé beaucoup de temps sur les tuto, et sur le forum pour trouver, et je n’y suis pas arrivé. Alors après 2 jours de recherche je fais appel au savoir communautaire.

Grand merci d’avance,

Grouik 1.0
bonsoir,
grouik a écrit :

#gauche,#gauche img {	width:auto;

	height:100%;}


height:100%; de quoi ?

Il faudrait au prealable que les parents aient une hauteur pour que tu puisse transmettre une référence a l'enfant et le garder dans le flux.

... par exemple : 
html, body {height:100%;}

-> gauche sans positionnement absolu , ainsi que overflow:hidden; a #centre pour prendre en compte #gauche qui flotte.

++
Yop,
Merci pour ton efficacité et ta réactivité !
Tu as résolu une grande partie de mon problème.

Mais le défis reste entier, quand on redimensionne la fenêtre du navigateur ma DIV de gauche se redimensionne correctement, par contre la div "centre" reste à la même place du coup elle n'est plus collée à la DIV "gauche".

Voir le lien ci-dessous et redimensionnez la fenêtre pour comprendre:

http://traouc.free.fr/haiti/exemple3.html

A terme dans cette DIV "centre" il y aura une animation Flash et à sa droite il y aura une autre DIV.

Voilà le nouveau code corrigé sans le Doctype :
<!--

html 
{ height:100%;}

body
{
	overflow:hidden;
	margin: 0px;
	padding: 0px;
height:100%;
}

#gauche {
	float: left;
	top:0;
	left:0;
	}

#gauche,#gauche img {
	width:auto;
	height:100%;
}
#centre {
	background-color: #666;
	overflow:hidden;
	
}

-->
</style>
</head>

<body>
<div id="gauche"><img src="images/exemple.jpg" alt="gauche" /></div>

<div id="centre">essai</div>


</body>
</html>


Merci beaucoup, en espérant pouvoir apporter ma contribution quand je ne serai plus un jeune Padawan.

Grouik 1.01
Bonsoir à toutes et à tous,

le texte dans la boite "centre" est placée en haut et à droite de l'image.
Tu peux, comme tu le veux, redimensionner ton image !

<!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">
<head>
<title>Texte align&eacute;e à droite et en haut de l'image</title>
<style type="text/css">
* {
		margin				: 0px;
		border				: none;
		padding				: 0px;
	}

html {
		overflow			: auto;
	}

body {
		background-color	: grey;
	}

#boite {
		position			: absolute;
		top					: 25px;
		left				: 25px;
		right				: 25px;
		bottom				: 25px;

		background-color	: skyblue;
	}

#boite img {
		float				: left;
		width				: 50%;
		height				: auto;
	}

#boite #centre {
		background-color	: lightyellow;
	}
</style>
</head>

<body>
	<div id="boite">
		<img src="http://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg" alt="gauche" />
		<div id="centre">
		bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
		</div>
	</div>
</body>
</html>


@+
grouik a écrit :
Yop,
Merci pour ton efficacité et ta réactivité !
Tu as résolu une grande partie de mon problème.

Mais le défis reste entier, quand on redimensionne la fenêtre du navigateur ma DIV de gauche se redimensionne correctement, par contre la div &quot;centre&quot; reste à la même place du coup elle n'est plus collée à la DIV &quot;gauche&quot;.




Re et dommage de voir un vieux bug de ie , puis d'opera et enfin apparaitre dans Firefox, il y a la quelque chose qui m'echappe .

La seule vielle bidouille qui me revient en tête c'est un truc du genre :
html:hover:after {content:'';}

Modifié par gc-nomade (20 Jun 2011 - 21:14)
Ta div gauche ne se redimensionne pas (dans aucun navigateur). Seule l'image change de taille.

La question est : est ce que tu as besoin d'une balise div ? Si tu ne comptes n'avoir qu'une image et rien d'autre pour la colonne de gauche, tu peux faire ça :


<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<style type="text/css">
html, body
{
	height: 100%;
}

body
{
	margin: 0;
	padding: 0;
}

#gauche {
	float: left;
	width: auto;
	height: 100%;
}

#centre {
	background-color: #666;
	overflow:hidden;
}
</style>
</head>

<body>
	<img id="gauche" src="images/exemple.jpg" alt="" />
 	<div id="centre">div centre</div>
</body>
</html>
Cool pour ce flots de réponses !
J'ai trouvé tout mon bonheur, j'ai adapté la version d'Artemus24 à ma sauce pour adapter la DIV à la taille du navigateur, et JB-gfx m'a servi du caviar avec tout ce qu'il faut, je n'avais même pas imaginé cette solution. C'est parfait, car effectivement cette colonne ne contiendra qu'une image !!!
Grand merci à tous !
Bonne soirée
Sujet clos
Aller à