28173 sujets

CSS et mise en forme, CSS3

Mon contenu en pos:relative perd sa hauteur 'naturelle'

Bonjour à vous,

Ce n'est pas dans mes habitudes de venir demander de l'aide pour un problème de css mais là, malgré toutes mes tentatives, je me trouve devant un problème que je n'arrive à résoudre.

En résumé : j'ai un bloc contenu que je définis en position:relative pour pouvoir positionner précisément à l'intérieur de celui-ci différents élément ( en position:absolute ). Aucun problème à ce niveau, tout est exactement à sa place, mais seulement si je définis arbitrairement une hauteur au bloc. Si je laisse la hauteur en automatique, non seulement le div ne garde pas sa hauteur naturelle, et comme dirais mon petit frère : 'tout par en live'.

Bug :
http://www.boostupload.com/files/298_bug.jpg

Devrait afficher : ( avec juste un height rajouté arbitrairement )
http://www.boostupload.com/files/390_ok.jpg

Le code css ressemble à quelque chose comme cela :

#contenu { position:absolute; left:60px; top:197px; width:621px; }

	.billets { position:relative; background-image:url(images/fond_titre.jpg); width:100%; background-repeat:no-repeat; margin-bottom:60px; }

	.billets h2 a { position:absolute; left:167px; top:37px;  }
	.billets .infos { position:absolute; top:70px; left:184px; }
	.billets .coms { position:absolute; top:73px; left:510px; }
	.billets .date { width:48px; height:53px; position:absolute; top:28px; left:83px}
	.billets .message { position:absolute; top:109px; left:95px; width:520px; overflow:auto}


Et niveau xhtml : 

        <div id="contenu">
        
            <div class="billets">
            

                    <h2><a href="#" title="#">Titre/a></h2>
    
                    <div class="date">
                        <h5>27</h5> 
                        <h6>Oct</h6>
                    </div> 
                    
                    <div class="infos">
                        <span class="heure">12:53</span>  
                        <span class="cat">Categorie</span> 
                        <span class="auteur">Pseudo</span>
                        <span class="points">3 points</span>
                    </div>
                    
                    <div class="coms">
                        <a href="#">3 commentaires</a>
                    </div>
                    

 
               <div class="message">
                	texte
                </div>
                
            </div>

            <div class="billets">
            	......
            </div>


Et enfin, la page entière pour bien voir ( j'ai mis un min-height qui permet d'avoir une page plus clair, mais qui ne fait que déplacer le problème ).
http://tinyurl.com/38fv2e

Merci de votre aide.
Modifié par yotsumi.fx (30 Oct 2007 - 20:16)
Salut,

Je pense que ton problème vient essentiellement du fait que tu mets tout en absolute dans tes blocs; ceux-ci n'ont donc aucune hauteur en eux-mêmes : les blocs en absolute sortent du calcul des dimensions, et comme il n'y a que des éléments en absolute ou sans dimensions (parce qu'eux-mêmes ne comportent que des absolute) dans tes blocs, le conteneur n'a plus de hauteur => tes empiètements divers.

Je ne pense pas que tu aies réellement besoin de tous ces positionnements; visiblement, tes blocs sont constitués (suivant ma lecture visuelle) de :

  - un header constitué de :
    - date
    - titre
    - heure, catégorie, auteur, points
    - nb commentaires
  - un corps de message

Le header constitue bien un bloc d'un point de vue graphique, et je pense que tu pourrais (par exemple), partir facilement sur une mise en page style :

  - date float left
  - le reste du header dans un wrapper (en "emballage") en float left ou en overflow hidden
    -le titre en "normal", en calculant juste précisément height, line-height et padding
    - l'ensemble "heure, catégorie, auteur, points" en float left
    - nb commentaires en float left ou overflow hidden
    - s'assurer du clear par les dimensions des éléments ci-dessus
  - le message en normal
  - et vérifier qu'il n'y a pas de problèmes de clear dans ou entre les blocs

Ce qui donnerait en gros cette structure :


message
  header
    date
    wrapper1
      titre
      heure, catégorie, auteur, points
      nb commentaires
    contenu

Modifié par Marvin Le Rouge (30 Oct 2007 - 20:50)
Sujet clos
Aller à