28172 sujets

CSS et mise en forme, CSS3

Div qui depasse? [resolu]

Salut,

Imaginez un gros DIV carré X, dans lequel se trouve un petit DIV carré Y qui est a cheval sur un des cotés de X (une partie de Y est donc a l'exterieur de X).

Comme je suis encore une quiche en CSS, je pensais naivement qu'en mettant X en position:relative et Y en position:absolute et en jouant sur les marges de Y, je pouvais accomplir cet arrangement. En fait quand j'essaie de pousser Y un peu en dehors de X, la partie de Y qui depasse n'est pas visible.

Comment faire ?
Modérateur
Et l'eau Apéricube,

Je ne comprends pas bien ce que tu veux dire. Apparemment, tu veux parler de top, right, bottom, left ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>test</title>
	<style type="text/css">
		#x{
			display:block;
			width:200px;
			height:200px;
			background-color:green;
			position:relative;
		}
		#y{
			display:block;
			width:100px;
			height:100px;
			background-color:purple;
			position:absolute;
			bottom:0px;
			right:0px;
		}
	</style>
</head>
<body>
	<div id="x">
		<div id="y"></div> <!-- ne peut être frère -->
	</div>
</body>
</html>


@+
Modifié par Nolem (23 Apr 2010 - 03:32)
Saloute,

Je pense que ce qu'il souhaite, c'est faire dépasser Y de X. En gardant le code de Nolem, il suffit de donner des valeurs négatives aux propriétés "top" et "right" pour que cela fonctionne. 
#y { 
/*display:block; Inutile, c'est déjà un élément block*/
width:100px; 
height:100px; 
background-color:purple; 
position:absolute; 
top:[b]-10px[/b]; 
right:[b]-10px[/b]; }

Si ça coupe, c'est que tu dois avoir un overflow:hidden sur X.
Modifié par BeliG (23 Apr 2010 - 09:29)
Un position:relative peut suffire pour Y. Dans ce cas, inutile de positionner le parent (X).

En reprenant les codes détaillés par Nolem et BeliG, on aurait donc :


#x{
     background-color: green;
     height: 200px;
     width: 200px;
} 
#y{
     background-color: purple;
     height: 100px;
     left: -50px;
     position: relative;
     width: 100px;
}
J'avais bien un overflow:hidden dans le DIV conteneur, mais en le retirant ca coupe quand meme Smiley decu

Les TOP et RIGHT negatifs y changent rien.
apericube a écrit :
J'avais bien un overflow:hidden dans le DIV conteneur, mais en le retirant ca coupe quand meme Smiley decu

Bah t'en as peut-être un sur un DIV encore plus en amont, alors?

Hum, et même remarque que BeliG. Smiley cligne
Florent : touché! J'avais un autre overflow sournoisement caché en amont. Merci bien.
Modifié par apericube (26 Apr 2010 - 16:29)
Sujet clos
Aller à