j'ai suivi un tuto sur la mise en page avec l'utilisation de display:grid. Je précise que les fichiers que je dépose ici sont à titre d'entrainement.
Le programme a l'extension php parce qu'après les tests je vais l'utiliser avec du php.
Si je l'utilise tel quel je n'ai pas ce que j'attends. En ligne 1 j'ai la photo de la tortue à gauche avec du bleu en fond qui occupe plus de la moitié de la première ligne et le reste est occupé par je suis en forme aujourd'hui.
Si je supprime toutes les informations relatives à <div class="logo_1 item"> j'ai bien l'affichage attendu c'est-à-dire en première ligne : je suis en forme en vert
en 2ème ligne Test Grid en bleu
en 3ème et à gauche le texte "Le patron ..." en vert à droite le texte "On y est .." en bleu
en 4ème le texte "je vais pleurer" en vert
Je vois que c'est la div avec l'image qui perturbe tout mais je n'arrive pas à comprendre pourquoi.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style/style-index-front-test.css">
</head>
<body class="container">
<div class="logo_1 item">
<img src="tortue.jpg">
</div>
<div class="specialite">
<label class="gras"><?php echo "Je suis en forme";?></label><br>
<label class="gras"><?php echo "aujourd'hui";?></label>
</div>
<header class="item">
<h1>Test Grid</h1>
</header>
<section>
<p>
Le patron du groupe qui détient aussi Instagram, WhatsApp et Messenger, a vu sa fortune écornée après la chute du titre en bourse à cause du bug d’ampleur qui a bloqué ses réseaux sociaux et messageries ce lundi.
Comme neige au soleil, la fortune du richissime Mark Zuckerberg, cofondateur de Facebook, a fondu de plus de 6 milliards de dollars en quelques heures après une chute du titre en bourse. En cause : les critiques sur sa politique, doublées d’une méga panne qui a empêché lundi soir l’accès aux quatre réseaux et messageries du groupe – Facebook, Instagram, WhatsApp et Messenger - d’ordinaire fréquentés tous les mois par quelque 3,5 milliards de personnes dans le monde.
</p>
<p>
Le patron du groupe qui détient aussi Instagram, WhatsApp et Messenger, a vu sa fortune écornée après la chute du titre en bourse à cause du bug d’ampleur qui a bloqué ses réseaux sociaux et messageries ce lundi.
Comme neige au soleil, la fortune du richissime Mark Zuckerberg, cofondateur de Facebook, a fondu de plus de 6 milliards de dollars en quelques heures après une chute du titre en bourse. En cause : les critiques sur sa politique, doublées d’une méga panne qui a empêché lundi soir l’accès aux quatre réseaux et messageries du groupe – Facebook, Instagram, WhatsApp et Messenger - d’ordinaire fréquentés tous les mois par quelque 3,5 milliards de personnes dans le monde.
</p>
</section>
<aside class="item">
<h2>
On y est
</h2>
<p>
Le patron du groupe qui détient aussi Instagram, WhatsApp et Messenger, a vu sa fortune écornée après la chute du titre en bourse à cause du bug d’ampleur qui a bloqué ses réseaux sociaux et messageries ce lundi.
Comme neige au soleil, la fortune du richissime Mark Zuckerberg, cofondateur de Facebook, a fondu de plus de 6 milliards de dollars en quelques heures après une chute du titre en bourse. En cause : les critiques sur sa politique, doublées d’une méga panne qui a empêché lundi soir l’accès aux quatre réseaux et messageries du groupe – Facebook, Instagram, WhatsApp et Messenger - d’ordinaire fréquentés tous les mois par quelque 3,5 milliards de personnes dans le monde.
</p>
</aside>
<footer>
<p>
Je vais pleurer
</p>
</footer>
</body>
</html>
Bonjour, si vous savez que le soucis vient de l'image peut etre faut il penser a la dimension de l'image qui si elle deborde vu que c'est une grille elle va faire passer a la ligne l'element apres la photo.
Mais aussi dans le css vous utilisez quelque chose de special pour avoir selectionner logo-1 et specialite sans mettre de . derriere ?? genre vous avez mis logo-1 au lieu de .logo-1
Le soucis est donc maintenant regle ? si oui tant mieux bonne soiree !
yasakani no magatama
problème avec display:grid
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
yasakani no magatama
yasakani no magatama