28172 sujets

CSS et mise en forme, CSS3

Image en overflow:auto et éléments flottants à droite...

Bonjour,

J’ai une mise en page en 2 colonnes :
- 1 colonne principale en float:left avec un titre, une image et un texte
- 1 colonne droite en float:right avec 1 liste de liens.

L’image de la col principal est en 150% avec 1 overflow: auto.
Elle empiète donc sur la col de droite (volontairement) et la liste se positionne derrière la photo.

Comment faire pour que la liste vienne se caler sous ma photo ? 

<div class="container">
  
  <div class="content">
    <h2>Instructions</h2>
    <img src="images/mon_image.jpg" />
    <p>Illud tamen te esse admonitum volo, primum ut qualis es talem te esse omnes existiment ut, quantum a rerum turpitudine abes, tantum te a verborum libertate seiungas; deinde ut ea in alterum ne dicas, quae cum tibi falso responsa sint, erubescas. Quis est enim, cui via ista non pateat, qui isti aetati atque etiam isti dignitati non possit quam velit petulanter, etiamsi sine ulla suspicione, at non sine argumento male dicere?</p>
    
  <!-- end .content --></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Lien un</a></li>
      <li><a href="#">Lien deux</a></li>
      <li><a href="#">Lien trois</a></li>
      <li><a href="#">Lien quatre</a>    <!-- end .sidebar1 --></li>
    </ul>
  </div><!-- end .sidebar1 -->
  <!-- end .container --></div>


.content {
	width: 80%;
	float: left;
}

.content img {
	width: 120%; 
	overflow: auto;
}

.sidebar1 {
	float: right;
	width: 20%;
}

Modifié par nodesign (10 Nov 2012 - 15:20)
Bonjour, pour répondre à ton problème voici une solution :
.content {
	width: 80%;
	float: left;
	border: 1px solid transparent;
}

Le border de 1px est à prendre en compte dans ton calcul de boite.
Par contre je ne vois pas l'intérêt d'un mise en page à 2 colonnes si tout se comporte comme une page mono-colonne.
Smiley smile
Modifié par rodolpheb (11 Nov 2012 - 12:21)
Bonjour,

Merci de ta réponse.
En fait, c'est juste l'image qui semble sur 1 colonne avec la propriété overflow:auto et qui empiète sur la colonne de droite.
Par contre, je veux que la liste viennent se caler à droite du texte, en float:right, mais en dessous de la photo, c'est là la difficulté...

upload/12167-schema.jpg
C'est un rendu de ce genre que tu veux?
.content {
	width: 80%;
	height: 63em;
	float: left;
}
.content img {
	postion: absolute;
	width: 120%;
	overflow: auto;
	background-color: #9F6;
}
.sidebar1 {
	float: right;
	height: 63px;
	width: 20%;
}
ul {
	margin-top: 55em;
}


Après on peut paufiner... Smiley biggrin
Merci. Le problème, c'est que l'image n'a pas toujours la même hauteur... Donc difficile de mettre un margin-top sur la col droite toujours identique...

Je voudrais trouver une propriété qui fait glisser la liste sous l'image, quelque soit sa hauteur...
Essaye cela sachant qu'il faudra améliorer le nommage.


<!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">
.content {
	width: 80%;
	float: left;
}
.content img {
	width: 120%;
	overflow: auto;
	background-color: #9F6;
}
.sidebar1 {
	float: right;
	width: 20%;
}
#txtlist {
	background-color: #FF6;
	width: 120%;
}
#list {
	float: left;
	width: 20%;
}
#txt {
	float: left;
	width: 80%;
}
</style>
</head>

<body>
<div class="container">
  <div class="content">
    <h2>Instructions</h2>
    <img style: width="400" height="500" />
  <div id ="txtlist"> <div id="txt"><p>Illud tamen te esse admonitum volo, primum ut qualis es talem te esse omnes existiment ut, quantum a rerum turpitudine abes, tantum te a verborum libertate seiungas; deinde ut ea in alterum ne dicas, quae cum tibi falso responsa sint, erubescas. Quis est enim, cui via ista non pateat, qui isti aetati atque etiam isti dignitati non possit quam velit petulanter, etiamsi sine ulla suspicione, at non sine argumento male dicere?</p></div>
   <div id="list"> <ul>
      <li><a href="#">Lien un</a></li>
      <li><a href="#">Lien deux</a></li>
      <li><a href="#">Lien trois</a></li>
      <li><a href="#">Lien quatre</a> <!-- end .sidebar1 --></li>
    </ul>
  </div></div> 
  </div>
    
    <!-- end .content --></div>
  <div class="sidebar1">
    
  <!-- end .sidebar1 --> 
  <!-- end .container --></div>
</body>
</html>
Malheureusement, je ne peux pas faire comme ça, car ma liste doit impérativement être dans la colonne de droite (.sidebar1).
En passant par javascript je pense que ça passe!
<!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">
.container {
	width: 900px;	
}
#content {
	width: 75%;
	float: left;
	background-color: #CCC;
	padding-right: -20px;
}
img {
	width: 120%;
	background-color: #666;
	position: relative;
}
#sidebar1 {
	float: right;
	width: 20%;
	background-color: #CCC;
}

</style>
</head>
<body>
<div class="container">
  <div id="content">
    <h2>Instructions</h2>
    <img id="eee" src="" width="400" height="800px" alt="" /> 
     <p>Illud tamen te esse admonitum volo, primum ut qualis es talem te esse omnes existiment ut, quantum a rerum turpitudine abes, tantum te a verboti aetati atque etiam isti dignitati non possit quam velit petulanter, etiamsi sine ulla suspicione, at non sine argumento</p>
   </div>
  <div id="sidebar1">
    <ul id="nav">
      <li><a href="#">Lien un</a></li>
      <li><a href="#">Lien deux</a></li>
      <li><a href="#">Lien trois</a></li>
      <li><a href="#">Lien quatre</a> <!-- end .sidebar1 --></li>
    </ul>
     <script language="javascript">
var hauteur = document.getElementById('eee').offsetHeight;
 document.getElementById('nav').style.marginTop = hauteur+70 +'px'
 </script>
  </div>
  <script language="javascript">
 </body>
</html>

Smiley smile
Modifié par rodolpheb (12 Nov 2012 - 23:05)
Sujet clos
Aller à