28172 sujets

CSS et mise en forme, CSS3

[Résolu] Sidebar en float et contenu dynamique en largeur

Bonjour,

Je suis en train de travailler sur une nouvelle charte graphique pour mon site, et je m'arrache les cheveux sur un problème. Merci d'avance pour votre aide.

Voici le rendu que j'aimerais obtenir :
http://img263.imageshack.us/img263/3372/designv.jpg

En résumé:
- J'ai une zone de 960 pixels de large, dans laquelle j'injecte le contenu de mes articles (A), c'est à dire du texte, des images, des vidéos, le tout balisé avec des balises p, ul et div.
- Dans ce bloc A, j'insère en float une sidebar B de hauteur variable, qui contient différents blocs (C1, C2, ...).

L'idée est donc que le contenu de A soit décalé tant que la sidebar est à côté, puis occupe 100% de largeur en descendant.

Le problème est que la sidebar à une hauteur variable. Cela fait que le contenu de A glisse sous B sur certains éléments seulement. Tout les contenus textes sont ok (balises p), mais :
- les images sont centrées en utilisant toute la largeur du bloc A, au lieu de ne prendre en
compte que la taille restante (en enlevant B), ce qui correspond à D1 et D2 sur mon image.
- Les puces de mes listes passent sous la sidebar
- Les citation passent par dessus la sidebar

Actuellement : la sidebar se place exactement là où je veux, et le reste du contenu A situé sous la sidebar s'affiche lui aussi parfaitement. C'est le contenu de A placé à côté de B qui pose problème.

Mon code html:
<div class="sidarticle2">
<span class="sidebar">
Blocs de le sidebar
</span>
<span class="art2">
Contenu des articles
</span>
</div>

Mon code CSS:
.sidebar {width:260px;float:left;display:block;}


Merci encore pour l'aide que vous pourrez m'apporter.
Modifié par Confridin (17 Jan 2011 - 11:38)
Le seul moyen que je vois est de mettre ta sidebar dans la div A et et mettre les div b d1 et d2 en float left tu utilises la propriété { min-width: 50px; } pour d1 et d2.
Il faut que tu t'assures que la div1 soit plus grande que la sidebar.
Tiens essaye avec ce genre de code

<!DOCTYPE html>
<html lang=fr>
<head>
  <meta charset="utf-8" />

  <title>Template</title>
  
  <meta name='robots' content='noindex,nofollow' />
  
  <style type="text/css">
  body {
    background-color: #000;
    color: #ccc;
  }
  div#A {
    width: 850px;
    background-color: #222;
    padding: 1em;
  }
  div#B {
    width: 40%;
    padding: 1em;
    background-color: #444;
    float: left;
    margin-right: 1em;
  }
  div#C1, div#C2 {
    background-color: #666;
    padding: 1em;
  }
  div#D1, div#D2 {
    background-color: #888;
    padding: 1em;
  }
  br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }
  </style>

</head>
<body>

  <div id="A">
    
    <div id="B">
      
      <div id="C1">
        <ul id="nav">
          <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
          <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
          <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>

          <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
          <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
        </ul>
      </div>
      
      <div id="C2">
        <ol>
           <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

           <li>Aliquam tincidunt mauris eu risus.</li>
           <li>Vestibulum auctor dapibus neque.</li>
        </ol>
      </div>
      
    </div><!-- #B -->
    
    <div id="D1">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
    
    <div id="D2">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
    
    <br class="clear" />
    
  </div><!-- #A -->
    

</body>
</html>


J'ai mis le css en ligne mais tu sauras le mettre dans un fichier à part ^^.
Modifié par joska (14 Jan 2011 - 01:12)
Merci beaucoup Joska pour ta solution, mais je ne peux l'utiliser car la hauteur de mes contenu est variable.

J'ai cependant réussi en plaçant ma sidebar en float left en dehors de mes blocs, et en modifiant le code de mes images et de mes citations.

Il me reste donc encore le problème de mes listes UL et OL (mais je vais créer un nouveau sujet car ça va devenir le bordel ici).

Merci encore à tous.
Sujet clos
Aller à