Discussion :

[xorax]

bonjour!

c'est con mais là je coince...

en gros voilà se que je voudrais visuellement :

j'utilise ce code pour le moment :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div>
  <div style="border: 1px solid blue; margin: 5px; float: left;">
    <a href="#">lien1 haut</a><br/>
    <a href="#">lien1 bas</a>
  </div>
  <div style="border: 1px solid blue; margin: 5px; float: left;">
    <a href="#">lien2 haut</a><br/>
    <a href="#">lien2 bas</a>
  </div>
  <div style="clear: both;"/>
</div>

mais j'aimerais enlevé ce clear:both à la fin.
est-ce possible d'obtenir sensiblement la même chose sans utilisé des float:left (et donc un clear) ???

[spitou_77]

La meilleur solution c'est avec le clear:both

j'ai réussi à contourner le problème avec le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
		<div style="padding-bottom: 3.2em;background:red;">
			  <div style="border: 1px solid blue; margin: 5px; float: left;">
			    <a href="#">lien1 haut</a><br/>
			    <a href="#">lien1 bas</a>
			  </div>
			  <div style="border: 1px solid blue; margin: 5px; float: left;">
			    <a href="#">lien2 haut</a><br/>
			    <a href="#">lien2 bas</a>
			  </div>
		</div>   
		<div>coucou</div>

mais c'est une rustine, ca vaut pas grand chose, si la hauteur des divs contenant les liens augmente (ajouter un troisième lien par exemple), il faut aller modifier le padding-bottom du conteneur principal... alors qu'avec la solution du clear: both; aucun soucis! En plus en fonction du navigateur le padding-bottom nécessaire varie (il faut 3.4em sous IE7)...
Ou alors il faut fixer une hauteur fixe au conteneur des liens

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
		<div style="height: 50px; overflow:hidden;background:red;">
			  <div style="border: 1px solid blue; margin: 5px; float: left;">
			    <a href="#">lien1 haut</a><br/>
			    <a href="#">lien1 bas</a>
			  </div>
			  <div style="border: 1px solid blue; margin: 5px; float: left;">
			    <a href="#">lien2 haut</a><br/>
			    <a href="#">lien2 bas</a>
			  </div>
		</div>   
		<div>coucou</div>

Pourquoi tu ne veux pas utiliser la solution clear:both qui fonctionne très bien?

[Candygirl]

Hello,

Ton div englobant est-il vraiment nécessaire?

Pourquoi ne pas attribuer la propriété clear à l'élément qui vient directement en-dessous de tes liens (s'il y en a un) ?

Autrement il y a toujours moyen de forcer un parent à prendre en compte la hauteur de ses enfants flottants en lui attribuant l'une ou l'autre des propriétés induisant un nouveau contexte de formatage:

float, display inline-block table ..., position absolute, ou la propriété overflow avec une autre valeur que visible, à choisir selon le cas de figure

[xorax]

merci pour vos réponses

Pourquoi tu ne veux pas utiliser la solution clear:both qui fonctionne très bien?

Ben déjà parce que je trouve pas ça très propre... ensuite parsque j'ai des routines javascript qui tournent dérrière et ça me gaverais de les réécrire.

Malheureusement je vais pas pouvoir utiliser ta solution car le nombre de block est destiné à varier (et peut donc s'étendre sur une nouvelle ligne)

Ton div englobant est-il vraiment nécessaire?

Pourquoi ne pas attribuer la propriété clear à l'élément qui vient directement en-dessous de tes liens (s'il y en a un) ?

En fait il y a un template par dessus, si je modifie les propriétés des div suivant ça risque de me jouer des tours si le template change.

float, display inline-block table ..., position absolute, ou la propriété overflow avec une autre valeur que visible, à choisir selon le cas de figure

Merci !!! inline-block correspond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div style="display: -moz-inline-block; display: -moz-inline-box; display: inline-block;">
<div style="border: 1px solid blue; margin: 5px; float: left;">
    <a href="#">lien1 haut</a><br/>
    <a href="#">lien1 bas</a>
  </div>
  <div style="border: 1px solid blue; margin: 5px; float: left;">
    <a href="#">lien2 haut</a><br/>
    <a href="#">lien2 bas</a>
  </div>
</div>

Mais ça fait encore plus crade avec les pauvres hacks obligatoirent...

ça marche également avec overflow:hidden (ce qui me semble pas vraiment logique ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div style="overflow:hidden">
<div style="border: 1px solid blue; margin: 5px; float: left;">
    <a href="#">lien1 haut</a><br/>
    <a href="#">lien1 bas</a>
  </div>
  <div style="border: 1px solid blue; margin: 5px; float: left;">
    <a href="#">lien2 haut</a><br/>
    <a href="#">lien2 bas</a>
  </div>
</div>

mais c'est déjà plus propre je pense que c'est ce que je vais mettre.

Sinon je n'ai pas trouvé la solution avec position:absolute, si tu pouvais m'en dire plus ?

Merci beaucoup !

[mLk92]

La position absolute n'est pas nécessaire dans ton cas.

La position absolute te permet de placer tes éléments n'importe ou dans ta page ou dans ton div conteneur, il suffit de jouer avec les propriétés "top", "left", "bottom" et "right" pour compléter ton positionnement. Cette position sort ton div du flux, ainsi il peut y avoir si le code est mal fait, que ce div se balade à sa guise ...

Mais personnellement je ne vois pas en quoi le clear n'est pas propre, c'est une propriété souvent utilisée, avec un but précis, ici t'en fais une bonne utilisation, et de plus c'est valide w3c.