css floattant avec bord

Le
Etienne
Salut
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Jean-Francois Ortolo
Le #22672571
Le 13/10/2010 15:43, Etienne a écrit :
Salut
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




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>

</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
Le #22672611
Le 13/10/10 15:43, Etienne a écrit :

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 : 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 #22672661
Le 13/10/10 17:32, Jean-Francois Ortolo a écrit :
Le 13/10/2010 15:43, Etienne a écrit :
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.



Bonjour

Quelque chose comme ça ?



Si je n'ai pas fait d'erreur dans la copie/interprétation de tes css,
avec ça : j'obtiens :
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;
}





--
Stéphane Moriaux avec/with iMac-intel
Sergio
Le #22672701
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.

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 #22672981
Sergio a formulé la demande :
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.



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 #22672971
Le 13/10/10 18:24, Sergio a écrit :
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.


--
Stéphane Moriaux avec/with iMac-intel
Sergio
Le #22674221
Le 13/10/2010 19:37, Williamhoustra 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.



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...

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Williamhoustra
Le #22674271
SAM a pensé très fort :

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.



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 #22675081
Le 13/10/2010 17:49, SAM a écrit :
Le 13/10/10 15:43, Etienne a écrit :
l'astuce ? sur le div de gauche : margin-right: -1px;
(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
Publicité
Poster une réponse
Anonyme