problème pour déplacer mes blocks

text CSS ne produit pas d'effet

Sujet résolu

RiwanonRiwanon

18 juillet 2018 à 15:15:05

Bonjour,

Quelqu'un pourrait me dire pourquoi mes blocks ne se déplacent pas?

Code HTML:

<!DOCTYPE html>

<html>

<head>

<title>Les vêtements</title>

</head>

<body>

<h1>Des vêtements pour tous</h1>

<p>Site de vente de vêtements</p>

</header>

<p><h2>Des vêtements en pagaille</h2>

Ce site de vêtements a pour but bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

</article>

</section>

<nav>

<ul>

<li>Des vêtements d'hiver</li>

<li>Des vêtements d'été</li>

</ul>

</nav>

<p>Don de poussette</p>

</div>

<p>Contact</p>

</footer>

Text CSS:

article

{

display: inline-block;

}

section

{

display: inline-block

}

nav

{

display:inline-block;

width: 150px;

}

Frogweb

18 juillet 2018 à 15:36:49

Salut,

que pense tu que ça doit faire ?
Un inline-block prend la largeur de son contenu. Tant que tu mettras des lettres à la suite sans coupure et pas de width ça ne fonctionnera pas.
Et <article> est tout seul dans sont parent, inutile de le mettre en display:inline-block (il pourrait y avoir une raison mais ce n'est pas le cas ici).

Il n'y a que nav et section qui pourraent se positionner correctement. A condition que tu mette un width à section et du texte normal dans article...

Autre chose :
- pas de <h2> dans un <p>.
tu as corrigé ton précédent message dans lequel je te disais de ne pas mettre un <h1> dans un <p> et tu as donc choisi de mettre un <h2>..
Bien essayé mais non
Donc pour que ce soit plus clair : pas de balise titre (hn), de <ul>, de <table> ou autres dans un <p>.
Un <p> est destiné à recevoir du content-flow (du inline si tu préfère). Donc principalement du texte.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

RiwanonRiwanon

18 juillet 2018 à 15:51:02

Merci Frogweb.

J'ai bien fait les modifications que tu indiques mais ça ne bouge toujours pas!

CSS:

section

{

display: inline-block

width 60%;

}

nav

{

display:inline-block;

width: 40%;

}

HTML:

<!DOCTYPE html>

<html>

<head>

<title>Les vêtements</title>

</head>

<body>

<h1>Des vêtements pour tous</h1>

<p>Site de vente de vêtements</p>

</header>

<h2>Des vêtements en pagaille</h2>

<p>Ce site de vêtements a pour but de commercialiser des vêtements de toutes les tailles et pour chaque saison. La boutique principale se trouvera à Quiberon.</p>

</article>

</section>

<nav>

<ul>

<li>Des vêtements d'hiver</li>

<li>Des vêtements d'été</li>

</ul>

</nav>

<p>Don de poussette</p>

</div>

<p>Contact</p>

</footer>

Frogweb

18 juillet 2018 à 16:01:35

Commence par corriger ton code CSS :

- il manque le ; après inline-block de section.
- il manque le : entre width et 40% de nav.

Mais ça ne réglera pas le problème.
Je t'explique.

Il faut savoir que inline-block crée un espace vide entre deux éléments (environ 4px).

Tu mets 60% et 40% ce qui fait bien 100%. Mais cet espace de 4px se rajoute et ça fait 100% + 4px.
Et du coup ça ne rentre plus...
Il y a plusieurs solutions pour remédier à ça et c'est très bien expliqué dans cet article :

https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

-
Edité par Frogweb 18 juillet 2018 à 16:02:05

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Majoras16Forever

18 juillet 2018 à 16:06:30

Salut ! Pour les erreurs CSS tu as un validateur : https://jigsaw.w3.org/css-validator/

-
Edité par Majoras16Forever 18 juillet 2018 à 16:06:46

RiwanonRiwanon

18 juillet 2018 à 16:29:16

Merci à tous les 2.

Ça prend forme!

Majoras16Forever

18 juillet 2018 à 16:44:05

Eh bien bonne continuation