26868 sujets

CSS et mise en forme, CSS3

Bonjour, il parait que celui qui croit tout savoir ne sait rien !
Et bien c'est mon cas et en plus je ne croyait pas tout savoir ....
Bref je butes sur une composition bancale de DIV genre menu qui ne gardent pas la taille imposée par contre ils se placent très bien sur tablette ou portable , car ayant la même largeur c'est moins choquant !

Voyez vous ce qui ne vas pas , c'est ici:
http://www.fox-infographie.com/000testwork.htm

en gros le code est

<!DOCTYPE html><html lang='fr'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>teste menu BLOG</title>
<meta name="rating" content="general">
<link rel='stylesheet' href='xxx/000test.css' type='text/css' media='all'  />

</head><body>
<div class='centre2blanc'><br />
<H1>Le BLOG  Photographe<br /></H1>  
<br /><br />
<div  class="mescarres"><a class="LesA2" href="#"  >
<img class="mescarres" src="xxx/blog1.jpg" alt="testJP" /><br />
La Joaillerie Traditionnelle Indienne et l'Ayurveda</a><br />
</div>
<div  class="mescarres"><a class="LesA2" href="#"  >
<img class="mescarres" src="xxx/blog2.jpg" alt="testJP" /><br />
Gangaur Festival au Rajasthan<br /></a><br />
</div>
<!-- ETC... -->


Et le CSS

html {  box-sizing: border-box;}
*, *:before, *:after {  box-sizing: inherit;}
html, body{height:100%;}
body { background-color:#ffffff;font-family :Georgia, "Times New Roman", Times, serif; color :#000000; font-size :18px;}


* { box-sizing:border-box; }
.centreXblanc > article > figure img  {    max-width:100%;  }

div.centre2blanc {height : auto;width : 90%;max-width : 1200px;margin : auto;text-align : center;}
a.LesA2 {color : #222223;text-decoration : none;font-size : 24px;}
a.LesA2:hover {color : #ffaaaa;font-size : 24px;}
div.mescarres{width:270px;border:1px solid black;text-align:center;padding:1px 1px 1px 1px;display:inline-block;margin:1px 1px 1px 1px;}
img.mescarres{width:250px;border:0px;}
H1 {font-family : "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size : 40px;color : #222224;}


}
/* ____________________media640______________________ */
@media screen and (max-width:640px) {
body, element1, element2 {width : auto;margin : 0;padding : 0;}
img, blockquote, pre, textarea, input, iframe, object, embed, video {max-width : 100%;}
element1, element2 {float : none;width : auto;}
.hide_mobile {display : none !important ;}
div.centre2blanc {height : auto;width : auto;max-width : 90%;margin : 22px;text-align : center;}
img, table, td, blockquote, pre, textarea, input, iframe, object, embed, video {max-width : 90%;}
img {height : auto;width : auto;box-sizing : border-box;}
a.LesA2 {font-family : verdana, "Times New Roman", Harrington, sans-serif;font-size : 22px !important ;color : #222223;text-decoration : none;}
a.LesA2:hover {color : #ffaaaa;}
H1 {font-family : "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size : 30px;color : #222224;}
body:before {content : "Version mobile du site";display : block;color : #222224;text-align : center;font-style : italic;}
}

Le pire c'est que ça doit sauter aux yeux... Smiley confused
Merci d'avance
Modifié par Jean-Pierre-Bruneau (21 Oct 2019 - 01:50)
Salut

Pas compris ce que tu cherches à faire exactement ?

Fixer les hauteurs des div ? que toutes les "boites" soit de la même hauteur ? ou alors il est question de "placement" visuel ?
JENCAL a écrit :
Salut
Fixer les hauteurs des div ? que toutes les "boites" soit de la même hauteur ? ?

Bonjour toi !
Exactement l'ami mais pourquoi ça ne marche pas ?
Merci de te pencher sur mon cas d'école.
parce que y'a pas de taille fixe en hauteur.
Tu n'a pas de row, ce sont juste des div mise en vrac que tu "style" avec du css. Tu n'a pas une vrai "ligne" qui fait X de largeur pour X de hauteur comprenant X boite.
Là tu bricole quelque chose pour avoir des div côte à côte. Le seul truc qui bloc à 4 div max "par ligne" c'est ton
max-width: 1200px;...

Donc à partir de là, ton navigateur ne va pas faire le programme tout seul.
Du coup
- Soit tu restructure l’ensemble pour avoir quelque chose de cohérent au niveau de ce que tu veux, lignes, boite, hauteur (boostrap utilise bien des classes "row" pour faire des "lignes") .
- Soit tu mets tes divs mescarres en display: inline-flex; avec une hauteur fixe, genre 200px;
Meilleure solution
JENCAL a écrit :

tu mets tes divs mescarres en display: inline-flex; avec une hauteur fixe, genre 200px;

Merci de ta réponse.
Donc le rectangle et sa bordure serait de taille fixe. en tout cas c'est ce qu'il me faut, tu aurais une ligne de code type ou je vais trouvé ça sur Google ... je n'ai jamais dominé le inline-flex Smiley confused
ya deux lignes pour ta div, le inline flex, et l'height 200 c'est tout.

Mais comprend bien que je suis une merde en CSS, je fais juste en testant au pif !

Typiquement, je display, je commence à saisir "display" dans mon navigateur, celui me propose TOUT les displays possible, et je test un à un avec les flèches de mon claviers et je regarde le résultat en live. en 15 secondes j'ai tester tous les displays et je prend celui qui m'arrange Smiley smile

Donc très très mauvaise manière de faire, mais faut bien se débrouiller, et j'ai pas le temps d'apprendre le fondamentale du CSS, je suis sur des trucs un peu plus complexe.
Bonjour,

Pour que des éléments inclus dans un conteneur alignent leur hauteur sur celle de l'élément ayant le contenu le plus important, il suffit de leur appliquer un display: table-cell et d'appliquer un display: table sur leur élément parent :

https://www.creativejuiz.fr/blog/css-css3/creer-des-colonnes-de-meme-hauteur-en-css

https://www.raphaelle-lecot.fr/blog/hauteur-colonnes-html-css/

http://css.mammouthland.net/mise-en-page-avec-display-table.php
Modifié par thierry (21 Oct 2019 - 13:34)
Bonjour,
J'avoue que moi aussi, quand il faut mettre des images, c'est un peu problèmatique.
J'ai été voir le lien qui est indiqué : il me semble que dans la page exemple, il manque la dernière </div> qui ferme la div principale (<div class='centre2blanc'>).
J e viens d essayer la solution de Jencal : ca fonctionne tres bien.

html {  box-sizing: border-box;}
*, *:before, *:after {  box-sizing: inherit;}
html, body{height:100%;}
body { background-color:#ffffff;font-family :Georgia, "Times New Roman", Times, serif; color :#000000; font-size :18px;}
* { box-sizing:border-box; }
.centreXblanc > article > figure img {max-width:100%;}

div.centre2blanc {height : auto;width : 90%;max-width : 1200px;margin : auto;text-align : center;}

a.LesA2 {color: #222223;text-decoration : none;font-size : 24px;}
a.LesA2:hover {color : #ffaaaa;font-size : 24px;}

div.mescarres{width:270px;border:1px solid black;text-align:center;padding:1px 1px 1px 1px;
    display:inline-flex; height: 200px;  margin:1px 1px 1px 1px;}
img.mescarres{width:250px;border:0px;}

H1 {font-family : "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size : 40px;color : #222224;}


ca donne ceci en copie d ecran (sans les images , il y a les 'alt' qui s'affiche à la place) :
alain_47 a écrit :
Bonjour,
J'avoue que moi aussi, quand il faut mettre des images, c'est un peu problèmatique.
J'ai été voir le lien qui est indiqué : il me semble que dans la page exemple, il manque la dernière &lt;/div&gt; qui ferme la div principale (&lt;div class='centre2blanc'&gt;).

Bien sur puisque j'ai affiché ETC... donc tu n'as que le début du code Smiley cligne en tout cas merci de ta réponse !
alain_47 a écrit :
J e viens d essayer la solution de Jencal : ca fonctionne tres bien. ETC...

Super sympa mille mercis Smiley cligne
Modifié par Jean-Pierre-Bruneau (21 Oct 2019 - 14:44)
Bien sur, pour avoir le meme code que la page de test, j ai suivi le lien, puis j ai affiché code source , puis copier-coller du html et du css.
J avais donc l exact code dans mon IDE (sin je n'aurai pas pu voir qu'il manquait la div final puisqu'elle n'apparaissait pas dans le code affiché sur le forum).

Tout fonctionne, merci à Jencal donc. Smiley cligne