28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je fais appelle à vous car j'ai un problème de CSS que je n'arrive pas à résoudre.
Mon code HTML :
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
</head>
<body>
  <link rel="stylesheet" href="test.css?v=2">
  <div class="container_12" id="wrapper">
    <div id="box1">
      blabla
    </div>
    <div id="box2">
      Lorem ipsum dolor sit amet consectetuer tristique Phasellus in dolor odio. Nunc In semper condimentum Nam porttitor odio congue Pellentesque semper sollicitudin. Proin lobortis urna pellentesque netus fames Vestibulum nunc nunc leo pretium. Auctor quis malesuada lacinia Nullam Vestibulum Curabitur tincidunt id pretium Morbi. Tellus faucibus ante Curabitur at Nam condimentum nulla pellentesque sem leo. Consequat felis pretium quis nec.
    </div>
  </div>
</body>
</html>

Mon code CSS
body{
	font-family:Helvetica, Helvetica Neue, Arial, sans-serif;
	font-size:13px;
	color:#838383;
	background-color:#f3f3f3;
}

.container_12{
  float:left;
  background-color:#ffffff;
  margin-left: 4%;
  margin-right: 4%;
  width: 92%;
}

#box1{
  background-color:#ffffff;
  height:5000px;
  width:40%;
  float: left;
}


#box2{
  position: fixed;
  width: 60%;
  display: inline;
  float: left;
  z-index: 3;
}


Mon but est d'avoir ma box2 en position fixed mais qu'il prenne en compte la taille de sont conteneur (container_12) qui est fluide. Dans mon exemple, si j'ai bien compris, box2 prend 60% du total de ma fenêtre, alors que je souhaite qu'il prenne 60% de container_12.

Existe-il un moyen de réaliser ce que je souhaite?

Merci de votre aide Smiley smile
Bonjour,

Tel quel, cela semble difficilement réalisable.

En effet, le positionnement fixe réagit à peu près comme le positionnement absolu, à la différence près qu'en "fixed", on positionne par rapport aux limites de la zone de visualisation (en l'occurrence la fenêtre du navigateur).

En "absolute" cela aurait été facile, le positionnement se faisant par rapport au premier élément parent positionné dans le flux.

A mon avis, ce que tu souhaite faire n'est pas réalisable dans la configuration actuelle ou alors il faut passer par du JavaScript. Maintenant je ne peux pas te l'affirmer, j'avoue ne pas très bien connaître le positionnement fixe.

En tout cas, garde tout de même à l'esprit que ce positionnement n'est pas supporté par Internet Explorer 5 et 6 Windows.

Bon courage !
Bonjour,

je t'invite à lire le petit paragraphe concernant la "position:fixed" ici :
Explications

Comme l'a précisé Maliki, puisque cette position sort totalement un élément du flux, elle ne peut pas se positionner par rapport à un autre élément, seulement par rapport à la fenêtre.

Je ne pense pas que tu puisses faire ce que tu veux avec un "position:fixed", suivant ce que tu cherches à faire la "position:absolute" peut être un bon compromis.

Bonne continuation!
C'est bien ce qui me semblai Smiley bawling , j'ai aussi pensé au Javascript mais ca ne me plait pas car je suis parti dans l'optique d'utiliser un maximum d'HTML5 et de CSS3 à la place du javascript, c'est aussi pour cela que les cas IE5 et IE6 je ne m'en occupe pas.

Avez vous un exemple utilisant le positionnement absolute et qui fait la même chose? Car j'avoue que j'ai aussi essayé après avoir rencontré ce problème, mais je n'ai pas réussi Smiley sweatdrop

Merci pour vos réponses !
Re,

Eh bien déjà pour réaliser cet effet on peut oublier "fixed" comme dit plus haut car position fixée signifie : impossibilité d'avoir une largeur fluide en fonction d'un <div> conteneur.

Après le problème c'est que si tu positionnes ta div "box2" en "absolute" dans ton <div> conteneur "container_12", en scrollant, la box disparaîtra...

La seule façon que je vois c'est du bricolage de ce type :

HTML :

<body>

	<div id="box2">
		<p>box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2</p>
	</div>
	
	<div class="container_12">
		<div id="box1">
			<p>box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1</p>
			<p>box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1</p>
			<p>box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1</p>
			<p>box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1</p>
			<p>box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1</p>
			<p>box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1</p>
			<p>box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1</p>
			<p>box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1<br />box1</p>
		</div>
	</div>

</body>


CSS :

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body  {
	width: 92%;
	margin: 0 4%;
	position: relative;
}

.container_12 {
	height: 100%;
	overflow: scroll;
	background-color: green;
}

#box1 {
	width: 40%;
	background-color: blue;
}

#box2 {
	width: 60%;
	position: absolute;
	right: 0;
	background-color: red;
}


Mais c'est vraiment pas fin... à ce stade mieux vaut passer par du Javascript.

En plus il y a un espace entre les 2 <div> "box" que je n'arrive pas à expliquer et la barre de défilement est recouverte en haut par la "box2".

Bref, mieux vaut oublier !
Merci Maliki, effectivement la solution absolute n'est pas top non plus. Du coup je viens d'utiliser la solution Javascript et en 5 minute c'est réglé. Comme quoi heureusement que le bon vieux javascript existe Smiley cligne

Merci pour votre aide!