Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP css floattant avec bord

css floattant avec bord

9 réponses
Avatar
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
Signaler un problème avec ce contenu

9 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Jean-Francois Ortolo
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.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
Avatar
SAM
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 : <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
Avatar
SAM
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 : <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;
}





--
Stéphane Moriaux avec/with iMac-intel
Avatar
Sergio
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
Avatar
Williamhoustra
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.
Avatar
SAM
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
Avatar
Sergio
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
Avatar
Williamhoustra
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).
Avatar
Etienne
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