5549 sujets

Sémantique web et HTML

Bonjour à tous, je suis un débutant de l'html et css, et j'ai un problème avec mon "wrapper" du css qui me place pas correctement les bloc que j'ai écris en htlm, je me retrouve toujours avec un footer au milieu de ma page malgres que j'ai indiqué dans mon wrapper qu'il devait être en bas de la page.
Y'aura-t-il quelqu'un qui rencontre le même problème ?
Bonsoir,

Mettez-vous à notre place deux secondes : il ne manque pas quelque chose dans votre énoncé ?

Nous n'avons pas de boule de cristal...
En effet, Olivier, mais puisqu'il s'agit sans doute d'un nouveau sur le forum, demandons-lui de nous donner un peu de code relatif au problème ou au mieux un lien vers son site.

@nass41 Et oui, le footer qui refuse de se coller en bas de page est un grand classique. La solution existe, bien sûr, mais il nous faut un peu de code.
Le tout est de savoir comment vous avez "dit" à votre footer de se placer en bas de page. Ces petites bêtes sont susceptibles, il faut leur parler correctement Smiley cligne
Aucune ironie dans mon post, on veut juste un peu de code pour vous aider.
Bonne soirée.
En attendant, voici un début de piste :
<body>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</body>

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* La région au milieu va s'étirer pour prendre toute la place disponible */
  min-height: 100vh; /* La page prendra au minimum toute la hauteur de la fenêtre, même si le contenu fait défaut */
  margin: 0;
}

L'exemple en ligne : CodePen.
Modérateur
Salut nass41 et bienvenue sur le forum,

En effet, si tu ne donnes pas suffisamment d'éléments dans ton sujet, on ne peut pas t'aider.

Lorsque tu rédiges un sujet, tu as sous le champ de rédaction, une pléthore d'outils afin d'éditer au mieux ton sujet. Plus tu seras précis et facile à te lire (code indenté par exemple), plus tu obtiendras de l'aide facilement. Je t'invite à lire l'aide du forum. Cela t'aidera dans ta démarche sur le forum.

À noter que sur alsacreations.com, il y a d'excellents tutos et astuces pour que tu aies une base solide en HTML, CSS ou autres.
Re bonjour à tous,
Veuillez m'excuser pour ma mauvaise rédaction je m'attendais à recevoir des code css pour comparait au miens afin de faire la différence et corriger le miens, et j'ai mis mon code de côté afin de l'envoyer en cas de besoin.
Et aussi le fait que je soit nouveau j'était un peu perdu pour rédiger correctement ma question.
Au passage voici mon code CSS :
body{
font-family: Arial, Helvetica, sans-serif;
text-align:left;
background: #c0c0c0;
}
#wrapper{
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* crée 3 colonnes */
grid-auto-rows: minmax(50px, auto); /* crée des lignes de 50px
min. de haut */
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-areas:
"hd hd hd"
"nav sec sec"
"nav sec sec"
"nav sec sec"
"ft ft ft";
}
nav li a:hover {
color:white;
background-color:black;
width:100px;
}

header {
background-color: #c92121;
color: white;
text-align: center;
height:200px;
border-radius:20px;
vertical-align: middle;
grid-area: hd;
}
.photoperso {
float: right;
margin-top: -20px;
margin-right: 20px;
width: 100px; /* Ajustez la taille selon vos besoins */
height: 50%;
border: 2px solid #000; /* Optionnel : ajoute une bordure */
border-radius: 30%; /* Optionnel : rend l'image ronde */
}
.link {
color: white;
}
nav {
width: 20%;
height: 100vh;
background-color: #888f88;
color: rgb(185, 231, 76);
float: left;
border-radius:20px;
margin-right: 30px;
margin-left: 0%; /* Marge pour laisser de l'espace à gauche de la navigation */
margin-inline-start: 0%;
padding: 15px;
grid-area: nav;
}
h1{
color: white;
font-weight:bold;
font-size:150%;
margin:5px;
padding:10px;
}
h2{
color: red;
font-weight:bold;
font-size:150%;
margin:5px;
padding:10px;
}

section {
overflow: auto;
padding: 10px;
margin-bottom: 10px;
font-family: Arial, sans-serif;
background-color: #c0c0c0;
}
footer {
background-color: #185808;
color: white;
position: fixed;
bottom: 0;
text-align:center;
font-size: 12px;
padding:10px;;
width: 100%;
grid-area: ft;
}
On a utiliser la fonction wrapper qui place bien tout mes bloc sauf le footer qui se place au milieu de la page quand elle est vide, j'ai du lui ajouter quelque code pour qu'il soit en bas le dernier problème c'est qu'il n'est fixe en bas de la page mais monte avec la souris en restant en bas comme une fenêtre flottante.
Cordialement je m'excuse pour ma mauvaise formulation précédente.
Salut,

Olivier l'a bien montré, il y a une valeur importante pour que la page occupe toute la fenêtre, c'est : min-height: 100vh;
Puisque l'on est sur du grid, il vaut mieux aller jusqu'au bout du "responsive", virer toutes les valeurs en px et les remplacer soit par du em ou du rem.
Ce serait bien d'avoir aussi le html.
Quand tu écris du code, place d'abord les balises qui sont en bas du forum. Par exemple HLML. En cliquant dessus, ça va te donner code=html] [/code C'est entre ces deux balises que tu places ton code. Ce sera plus propre à lire.
Attention, j'ai enlevé les deux chevron [ et ] du début et la fin des balises, sinon, j'ai un gros pavé noir qui s'affiche et mes balises ont disparu Smiley fache
À plus.
Modifié par Bongota (13 Nov 2023 - 22:28)
Modérateur
Bongota a écrit :
Salut,

Olivier l'a bien montré, il y a une valeur importante pour que la page occupe toute la fenêtre, c'est : min-height: 100vh;
Puisque l'on est sur du grid, il vaut mieux aller jusqu'au bout du "responsive", virer toutes les valeurs en px et les remplacer soit par du em ou du rem.
Ce serait bien d'avoir aussi le html.
Quand tu écris du code, place d'abord les balises qui sont en bas du forum. Par exemple HLML. En cliquant dessus, ça va te donner code=html] [/code C'est entre ces deux balises que tu places ton code. Ce sera plus propre à lire.
Attention, j'ai enlevé les deux chevron [ et ] du début et la fin des balises, sinon, j'ai un gros pavé noir qui s'affiche et mes balises ont disparu Smiley fache
À plus.


Calme tes ardeurs. C'est un nouveau membre sur le forum. Sois tolérant STP. On peut arriver sur un forum maladroitement. Je pense que c'est le cas. Après, si la personne n'y met pas du sien, ne répond pas Smiley cligne N'oublie pas que tu n'aies pas obligé d'aider. Je comprends ta frustration.
Alsacreations a écrit :

Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Utilisez les boutons de mise en forme (gras, italique, code source, etc.). N'hésitez pas à fournir une image explicative et une adresse où les membres auront un aperçu de votre situation. Il faut toujours donner un maximum de détails pour que les autres membres puissent vous comprendre et vous aider.


@nass41 : Si tu ne lis pas les liens que je t'ai filés, je ne peux pas t'aider et beaucoup de membres ne prendront pas la peine de te lire et de te répondre. Après une journée de taf, on n'a pas envie de décoder un message.
@niuxe

Pas de problème, j'ai bien compris, je voulais juste aider, sans forcer, en indiquant les balises.
Mon Smiley fache ne lui était pas désigné, mais au fait que si on veut présenter le fonctionnement des balises, dès qu'elles sont posées, elles deviennent des balises, avec un gros pavé vide si on y met pas du code dedans. Ce n'était absolument pas dirigé contre lui.
D'ailleurs, comment on fait pour présenter une balise [code... sans qu'elle devienne une balise. ? j'ai tenté de les entourer de deux /, mais ça n'a pas fonctionné. Smiley hum
Bonne journée. Smiley cligne