28172 sujets

CSS et mise en forme, CSS3

Positionnement div imbriqué

Bonjour,
J'ai un petit problème de positionnement de div.

Voilà, j'ai une série de div de même largeur mais de hauteur variable, positionné à l'aide float.
Voici ce que ça donne: upload/22504-plan1.jpg

J'aimerais plutôt que les bloc se positionne directement en dessous, sans espacement: upload/22504-plan2.jpg

Voici mon code:

<div class="bloc">
        <h3><img src="../interface/images/icone_home-over.png" ...  /></h3>
        <ul>
            <li></li>
            ...
        </ul>
        <ul>
            <li></li>
        </ul>
    </div>
  <div class="bloc">
        <h3>Caméras</h3>
        <ul>
            <li></li>
            <li>
              <h4>Accessoires</h4>
              <ul>
                <li></li>
                ...
              </ul>
            </li>
            ...
        </ul>
    </div>
  <div class="bloc right">
        <h3 class="gradient-gray">Produits</h3>
        <ul>
            <li></li>
            ...
        </ul>
    </div>
  <div class="bloc">
        <h3>Points de ventes</h3>
        <ul>
            <li></li>
            ...
        </ul>
    </div>
  <div class="bloc">
        <h3>Partenaires</h3>
        <ul>
            <li></li>
            ...
        </ul>
    </div>
  <div class="bloc right">
        <h3>Galerie</h3>
        <ul>
            <li></li>
        </ul>
    </div>
  <div class="bloc right">
        <h3>Support Technique</h3>
        <ul>
            <li></li>
            ...
        </ul>
    </div>


et mon css:

.bloc{
	background: url(../interface/background/background_gray.png) repeat;
	background: rgba(235,210,183,0.1);
	width: 250px;
	padding: 10px;
	float: left;
	margin: 0 20px 20px 0;
	text-align:justify;
}
.right{
	margin-right:0;
	float: right;
}


d'avance, merci
Oui, j'y ais pensé, mais j'aimerais évité ça le plus possible pour ne pas trop alourdir mon code.

C'est peut-être la meilleur solution, mais j'aimerais savoir s'il y a d'autre possibilité avant d'en venir là.
Bon finalement j'ai ajouté 2 class avec des margin en négatif pour placer les 2 bloc problématique. Ça fonctionne bien, mais j'ignore si c'est la bonne méthode.

Ça donne ça:

<div class="bloc">
        <h3><img  /></h3>
        <ul>
            <li></li>
            ...
        </ul>
        <ul>
            <li></li>
        </ul>
    </div>
  <div class="bloc">
        <h3>Caméras</h3>
        <ul>
            <li></li>
            <li>
              <h4>Accessoires</h4>
              <ul>
                <li></li>
                ...
                </ul>
            </li>
            <li></li>
            ...
        </ul>
    </div>
  <div class="bloc right">
        <h3>Produits</h3>
        <ul>
            <li></li>
            ...
        </ul>
    </div>
  <div class="bloc left">
        <h3>Points de ventes</h3>
        <ul>
            <li></li>
            ...
        </ul>
    </div>
  <div class="bloc">
        <h3>Partenaires</h3>
        <ul>
            <li></li>
            ...
        </ul>
    </div>
  <div class="bloc middle right">
        <h3>Galerie</h3>
        <ul>
            <li></li>
        </ul>
    </div>
  <div class="bloc right">
        <h3>Support Technique</h3>
        <ul>
            <li></li>
            ...
        </ul>
    </div>

le css:

.bloc{
	width: 250px;
	padding: 10px;
	float: left;
	clear: none;
	margin: 0 20px 20px 0;
}
.right{
	margin-right:0;
	float: right;
}
.middle{ margin-top: -98px;}
.left{ margin-top: -57px;}

Modifié par juliesunset (10 May 2011 - 14:53)
Bonjour,

Non, ce n'est pas une bonne solution : essaye d'augmenter la taille des caractères (pas de la page complete), tu comprendra pourquoi.

La solution que je recommanderais est celle de Mabelle.

Mais, si tu n'as aucune contrainte d'interropérabilité, alors tu peux regarder du côté des colonnes en CSS3.
Merci pour ta réponse Laurie-Anne

J'avais pas pensé à grossir les textes.
Avec le système de colonne en css3 ça fonctionne très bien, mais le site doit être au minimum compatible avec iE6, alors je suis un peu coincé...
Pour donner une idée, voici la page en ligne.
J'ai utilisé les colonnes en css3, ça fonctionne très bien sous FF et Chrome. Mais sous IE, je dois utiliser les floats ce qui en revient à mon plan initial. La question est... Est-ce vraiment choquant???
juliesunset a écrit :
Mais sous IE, je dois utiliser les floats ce qui en revient à mon plan initial. La question est... Est-ce vraiment choquant???
Non, c'est ce que l'on appelle dégradation gracieuse : le rendu n'est pas aussi bon, mais reste tout à fait utilisable.
Merci pour vos réponses, ma superviseure non plus ça ne la dérange pas donc la page restera comme ça.

Dans le même ordre d'idée, j'ai cette autre page pour laquelle j'ai aussi utilisé le système de colonnes, mais l'un des blocs réagi bizarrement. Il a pourtant le même code que les autres...
Sous IE8, je ne vois pas de problème.

Par contre, il serait préférable de créer un nouveau sujet pour ce problème différent.
Ah désolé j'ai oublié de spécifié, sous IE c'est ok, j'utilise un autre système. Le problème se situe sous FF seulement... sous Chrome c'est ok aussi.

Je pensais continuer à utiliser ce sujet étant donner qu'il s'agi aussi d'imbrication... enfin je crois, mais si tu considère qu'il serait préférable de distingué les 2 problèmes, est-il possible de couper le sujet en 2?
Sujet clos
Aller à