18008 sujets

Questions générales et questions de débutants

[Résolu] Question Flexbox

Bonjour,
J'ai acheté le livre CSS3 Flexbox de Raphaël Goetter, et je coince sur une partie Chapitre 4 page 31. J'ai reproduit la partie html qui ce trouve sur le livre et en css le h1 j'ai rajouté un fond pour différencier le titre l'article et le footer le background marche bien et color, mais font-size et font-weight pas du tout Smiley decu
Maintenant le footer ne fonctionne pas la margin-top: auto elle ne se pousse pas vers le bas de son conteneur.

Merci pour votre aide

<body>
<section>
    <h1>Titre de section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, tenetur! Iure quia provident amet quis, quos dolores quo consequatur laborum. Deserunt omnis atque, debitis eum provident. Corporis esse ipsa explicabo.</p>
    <footer>Mon footer</footer>
</section>

</body>



section {
    display: flex;
    flex-direction: column;
    min-height: 20em;
}

h1 {
    background: #3498db;
    height: 3em;
    font-size: 2em;
    font-weight: 400;
    color: #fff;
}


footer {
    background: #27ae60;
    height: 2em;
    margin-top: auto;
}
Bonjour

Chez moi pas de souci concernant font-size, pour le font-weight avec bold et normal ca fonctionne...peut être que ta police est limitée à cela?

https://developer.mozilla.org/fr/docs/Web/CSS/font-weight

Sinon peut être tenter de vider le cache de ton navigateur.

Pour le footer, si tu veux qu'il se trouve en bas de ta section:
https://www.alsacreations.com/astuce/lire/22-Comment-fixer-un-pied-au-bas-de-la-page-.html

Adapté a ton code:

https://codepen.io/palmito/pen/eaPQVw

++

EDIT: j'ai foncé tête baissé en zappant flexbox...je viens de retester ton code et le footer est bien tout en bas...très certainement un problème de cache Smiley cligne
Modifié par palmito (30 May 2019 - 14:09)
Merci pour ta réponse.

Voici mes captures d'ecran firefox et l'autre Chrome.
Bien entendu avec le cache vidé.

upload/1559228036-6851-capture.png
upload/1559228056-6851-capture2.png
Smiley bawling

Je voulais rajouter qu'il est vrai que sur codepen ça fonctionne bien. Smiley ohwell

Smiley cligne J'ai trouvé j'avais oublié de renseigner un fichiers reset.css voilà la raison dont voici le code.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
    text-decoration: none;
}

img, video {
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}

Modifié par byters (30 May 2019 - 17:12)
Alors je viens de tester en local


  <body>
    <section>
        <h1>Titre de section</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, tenetur! Iure quia provident amet quis, quos dolores quo consequatur laborum. Deserunt omnis atque, debitis eum provident. Corporis esse ipsa explicabo.</p>
      </section>
  <footer>Mon footer</footer>
  </body>




body, html{
  height: 100%;
  margin: 0;
  padding: 0;
}

section {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #ccc;
}

h1 {
    background: #3498db;
    height: 3em;
    font-size: 2em;
    font-weight: 400;
    color: #fff;
}


footer {
    background: #27ae60;
    height: 2em;
    margin-top: auto;
}


En appliquant un height: 100% sur html, body et ta section.
(J'ai enlevé aussi le footer de la section car je fais comme cela mais tu as peut être une raison de le mettre dedans?)

++

EDIT: on s'est croisé Smiley smile
Modifié par palmito (30 May 2019 - 17:21)
Merci

Moi aussi je mets header section ou autre article puis ensuite footer.
Mais c'est l'exercice qui le demandait comme ça. Alors j'ai fais. je suis entrain de me prendre la tête mais cette fois pour mettre le texte au centre mais à la verticale et toujours en restant dans flexbox pour que mon texte reste centré dans les 3em du h1 et 2em du footer et en gardant la pleine largeur de l'écran du background. J'ai rajouté pour ceci une width:100%;

Si tu as une idée toujours en restant dans flexbox, pas un vertical-align: middle;

Smiley smile
Sujet clos
Aller à