Fixer une forme au bas de l'écran en HTML
Résolu
basilegrnd
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
diablo13800 Messages postés 2890 Date d'inscription Statut Membre Dernière intervention -
diablo13800 Messages postés 2890 Date d'inscription Statut Membre Dernière intervention -
Salut,
Je me suis lancé depuis quelques semaines un projet pouvant paraître étrange : recréér un macOS Big Sur en ligne - bien-sûr certaines fonctionnalités seront absentes.
Pour la barre des tâches, j'ai fait une boîte div que j'ai formaté avec du CSS, mais comment la fixer au bas de l'écran ?
Pour information, si ça peut vous aider, voici le code :
Je me suis lancé depuis quelques semaines un projet pouvant paraître étrange : recréér un macOS Big Sur en ligne - bien-sûr certaines fonctionnalités seront absentes.
Pour la barre des tâches, j'ai fait une boîte div que j'ai formaté avec du CSS, mais comment la fixer au bas de l'écran ?
Pour information, si ça peut vous aider, voici le code :
<!DOCTYPE html>
<head>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<style>
body{
background-color:#007AFF;
font-family: "SF UI Display";
color: white;
background-image: url(wallpaper.jpg)
}
.taskbar{
width:600px;
height:100px;
background:white;
opacity:70%;
font-family:"SF UI Display";
justify-self: bottom;
}
</style>
</head>
<html>
<h3>Fichier Édition Affichage Aide
<div class="taskbar"></div>
A voir également:
- Fixer une forme au bas de l'écran en HTML
- Mise en forme conditionnelle excel - Guide
- Double ecran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Editeur html - Télécharger - HTML
- Comment mettre une vidéo en fond d'écran - Guide
4 réponses
Salut, mais ce n'est plus centré, et j'aimerais bien qu'il y ait un peu d'espace entre le bas de l'écran et la boîte div :/
Bonjour,
Elle n'était pas centré de base....
Passé par une div intermédiaire :
et le CSS:
Si vous voulez un peu d'espace, remplacé le "bottom:0" par ce que vous voulez comme espace.
Elle n'était pas centré de base....
Passé par une div intermédiaire :
<div class="center">
<div class="taskbar"></div>
</div>
et le CSS:
.taskbar{
width:600px;
height:100px;
background:white;
opacity:70%;
font-family:"SF UI Display";
justify-self: bottom;
margin:auto;
}
.center{
position: fixed;
display: flex;
place-items: center;
bottom: 0;
width: 100%;
justify-content: center
}
Si vous voulez un peu d'espace, remplacé le "bottom:0" par ce que vous voulez comme espace.
