Code html/css

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
Aucune ironie dans mon post, on veut juste un peu de code pour vous aider.
Bonne soirée.

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
À plus.
Modifié par Bongota (13 Nov 2023 - 22:28)

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
À 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 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 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é.
Bonne journée.