css floattant avec bord
Etienne
Je cherche a faire un truc en CSS an vain
Il s'agit d'avoir deux colonnes de 50% de la largeur chacune.
ce qui veut dire qu'on doit pouvoir redimentionner en largeur
les deux colonnes doivent �tre entour� d'un cadre.
comme un petit dessin est parfois plus clair.
voila ce qu'il me faut
http://www.webshaker.net/images/css.jpg
Donc il faurait que j'arrive je ne sais pas comment a gerer le border
collapse entre deux div floattant.
quelqu'un a une id�e ?
Merci
Jean-Francois Ortolo
Bonjour
Quelque chose comme �a ?
// Fichier style.css
body {
font-family: /* ...etc... */
/* Diverses d�clarations de taille */
/* ... */
padding:0;
margin:0;
}
div.tout {
/* Pour une bordure graphique, je ne sais pas */
border:1px;
text-align : center;
width : 99%;
}
div.bloc_gauche {
float: left;
width: 45.5%;
}
div.bloc_droite {
float: right;
width: 45.5.%
}
hr {
visibility:hidden;
clear:both;
}
div.bloc_bas {
text-align:center;
width:99%;
border:0;
}
-----------------------------
Et puis...
Pour le HTML :
( Il faut v�rifier que les contenus des deux div c�te-�-c�te sont
d'encombrements suffisamment similaires, pour qu'il n'y ait pas
recouvrement d'un bloc par l'autre. )
/* ne sais plus les d�clarations au dessus du body.
<body>
div class="tout">
<div class="bloc_gauche">
</div>
<div class="bloc_droite">
</div>
<hr />
<div.bloc_bas">
</div>
</html>
------------------------------
Me corrige qui veut.
Bien � vous.
Amicalement.
Jean-Fran�ois Ortolo
--
Visitez mon site gratuit donnant des Statistiques,
des Pronostics et des Historiques Graphiques
sur les Courses de Chevaux:
http://www.pronostics-courses.fr
SAM
>
> comme un petit dessin est parfois plus clair.
> voila ce qu'il me faut
> http://www.webshaker.net/images/css.jpg
>
> Donc il faurait que j'arrive je ne sais pas comment a gerer le border
> collapse entre deux div floattant.
>
> quelqu'un a une id�e ?
Bien entendu ! ;-)
Le secret ? overflow: auto;
l'astuce ? sur le div de gauche : margin-right: -1px;
(1px = largeur de la bordure)
� voir ici : <http://cjoint.com/?1knrTiZjRjm>
et � v�rifier avec les IEs
dont j'ai touj la flemme de les r�-installer
--
St�phane Moriaux avec/with iMac-intel
SAM
> Le 13/10/2010 15:43, Etienne a �crit :
>> http://www.webshaker.net/images/css.jpg
>>
>> Donc il faurait que j'arrive je ne sais pas comment a gerer le border
>> collapse entre deux div floattant.
>
>
> Quelque chose comme �a ?
Si je n'ai pas fait d'erreur dans la copie/interpr�tation de tes css,
avec �a : <http://cjoint.com/?0knr7LEXby>
j'obtiens : <http://cjoint.com/?0knsbyRcJxQ>
Le coup des 45.5% pour la largeur de chaque colonne ne fonctionnera (ne
fera se recouvrir des bordures "communes") que pour une certaine largeur
de fen�tre et encore ...
> div.tout {
>
> /* Pour une bordure graphique, je ne sais pas */
> border:1px;
> text-align : center;
> width : 99%;
> }
>
> div.bloc_gauche {
> float: left;
> width: 45.5%;
> }
>
>
> div.bloc_droite {
> float: right;
> width: 45.5.%
>
> }
>
> hr {
> visibility:hidden;
> clear:both;
> }
--
Sergio
> Le coup des 45.5% pour la largeur de chaque colonne ne fonctionnera (ne fera se recouvrir des bordures "communes") que pour une
> certaine largeur de fen�tre et encore ...
Certes, mais quel est le d�bile au W3C qui a invent� qu'on doit pr�ciser la largeur d'un bloc, d'apr�s *l'int�rieur*, donc en
�liminant les marges etc.
Ce n'aurait pas �t� plus logique que width: 50% ce soit 50% *hors tout* du bloc ? Pour faire ch*er les cr�ateurs de site ?
--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Williamhoustra
> Le 13/10/2010 18:06, SAM a ï¿œcrit :
>
>> Le coup des 45.5% pour la largeur de chaque colonne ne fonctionnera (ne
>> fera se recouvrir des bordures "communes") que pour une
>
> Certes, mais quel est le dￜbile au W3C qui a inventￜ qu'on doit prￜciser la
> largeur d'un bloc, d'aprï¿œs *l'intï¿œrieur*, donc en ï¿œliminant les marges etc.
>
Ne serait-ce pas la philosophie de la "surface client" ￜ l'intￜrieur
d'une fenï¿œtre. Effectivement c'est plutï¿œt de la programmation Windows.
> Ce n'aurait pas ￜtￜ plus logique que width: 50% ce soit 50% *hors tout* du
> bloc ? Pour faire ch*er les crï¿œateurs de site ?
Pour ne considï¿œrer que la surface utilisable du bloc. Mais il est
vrai que c'est discutable.
SAM
> Le 13/10/2010 18:06, SAM a �crit :
>
>> Le coup des 45.5% pour la largeur de chaque colonne ne fonctionnera
>> (ne fera se recouvrir des bordures "communes") que pour une
>> certaine largeur de fen�tre et encore ...
>
> Certes, mais quel est le d�bile au W3C qui a invent� qu'on doit pr�ciser
> la largeur d'un bloc, d'apr�s *l'int�rieur*, donc en �liminant les
> marges etc.
Heu ...
La bordure, ce n'est pas d�bile de la consid�rer comme ext�rieure.
La marge n'est pas *dans* le bloc ... elle ne devrait pas compter dans
la largeur du bloc.
Heureusement, je crois bien qu'elle s'ajoute � la bordure.
Par contre :
with: 50%; + padding: 20px, qui �largit la largeur ...
�a, oui, �a fait chier !
Apr�s,
qu'un overflow supprime cet accroissement de la largeur par le paddind
... va comprendre ? !
> Ce n'aurait pas �t� plus logique que width: 50% ce soit 50% *hors tout*
> du bloc ? Pour faire ch*er les cr�ateurs de site ?
Je crois que de quelque c�t� que tu puisses cr�er des r�gles, il y aura
fatalement � un moment ou � l'autre une r�alisation de mise en page qui
aura des pbs, et pour laquelle il faudra ou changer de conception ou
trouver l'astuce.
Sergio
>>> Le coup des 45.5% pour la largeur de chaque colonne ne fonctionnera (ne fera se recouvrir des bordures "communes") que pour une
>>> certaine largeur de fenï¿œtre et encore ...
>>
>> Certes, mais quel est le dￜbile au W3C qui a inventￜ qu'on doit prￜciser la largeur d'un bloc, d'aprￜs *l'intￜrieur*, donc en
>> ï¿œliminant les marges etc.
>>
> Ne serait-ce pas la philosophie de la "surface client" ￜ l'intￜrieur d'une fenￜtre. Effectivement c'est plutￜt de la programmation
> Windows.
C'est plutￜt de la "nouvelle philosophie" ￜ la BHL.
>> Ce n'aurait pas ￜtￜ plus logique que width: 50% ce soit 50% *hors tout* du bloc ? Pour faire ch*er les crￜateurs de site ?
>
> Pour ne considï¿œrer que la surface utilisable du bloc. Mais il est vrai que c'est discutable.
C'est mￜme profondￜment dￜbile : ￜ quoi ￜa sert de mettre des pourcentages, si ce n'est pour ne pas pouvoir les utiliser ? C'est
pourtant pas un cas de design exceptionnel que de vouloir 2 ou 3 colonnes dans une page web ?
C'est pour ￜa, ￜ mon avis, que des millions sites sont en "largeur fixe", parce qu'on ne peut pas fixer des largeurs de colonnes
ï¿œlastiques. Ou alors on utilise des tables...
Williamhoustra
>
> Je crois que de quelque cￜtￜ que tu puisses crￜer des rￜgles, il y aura
> fatalement ￜ un moment ou ￜ l'autre une rￜalisation de mise en page qui aura
> l'astuce.
D'oￜ le dￜchainement contre IE6 parce qu'il ne gￜrait pas les marges
de la mï¿œme faï¿œon. C'ï¿œtait bien la moindre de ses insuffisances
(pourtant nombreuses) et j'ai montrￜ dans un petit tuto qu'on arrivait
parfaitement ￜ le dresser pour qu'il saute pareillement dans les
cercles enflammï¿œs comme FF et Opera et ce sans danser la java (script).
Etienne
> Le 13/10/10 15:43, Etienne a �crit :
> (1px = largeur de la bordure)
Merci.
C'�tait effectivement la bonne piste a suivre.
J'ai finalement utilis� margin-left:-1px sur le deuxieme bloc.
ce qui a eu pour effet de d�caler le bloc de 1 pixels vers la gauche et
donc de r�aliser le collapse voulu.
Ce qui donne
<div style='clear:both; width:100%;'>
<div style='float:left; width:50%; border:1px;'>blabla</div>
<div style='float:left; width:50%; border:1px;
margin-left:-1px'>blabla</div>
</div>
Par contre je ne sais pas trop si ca marche partout.
Etienne