Fixer une forme au bas de l'écran en HTML

Résolu/Fermé

basilegrnd Messages postés 4 Date d'inscription mercredi 24 mars 2021 Statut Membre Dernière intervention 6 avril 2021 - 24 mars 2021 à 15:05
diablo13800 Messages postés 2890 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 16 février 2024 - 24 mars 2021 à 16:29

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 :

<!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 samsung - Guide
Ecran noir pc - Guide
Ecran d'accueil iphone - Guide

4 réponses

Réponse 1 / 4

diablo13800 Messages postés 2890 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 16 février 2024 1 844
Modifié le 24 mars 2021 à 15:43

Bonjour,

Il vous manque ceci dans votre classe taskbar :

   bottom:0;
   position:fixed;

Réponse 2 / 4

basilegrnd Messages postés 4 Date d'inscription mercredi 24 mars 2021 Statut Membre Dernière intervention 6 avril 2021
24 mars 2021 à 15:45

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 :/

diablo13800 Messages postés 2890 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 16 février 2024 1 844
24 mars 2021 à 15:59

Bonjour,

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.

Réponse 3 / 4

basilegrnd Messages postés 4 Date d'inscription mercredi 24 mars 2021 Statut Membre Dernière intervention 6 avril 2021
24 mars 2021 à 16:03

Merci beaucoup, ça a marché ! Pour le coup en modifiant le 0 de bottom ça annulait le fixement en bas, alors j'ai modifié le margin. Encore merci !

Réponse 4 / 4

diablo13800 Messages postés 2890 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 16 février 2024 1 844
24 mars 2021 à 16:29

Il serait pas entièrement fixé en bas du bas :)

Si vous avez d'autres questions hésité pas.

Et n'oubliez pas de passer le sujet en "résolu"

Discussions similaires

liste de noms par ordre alphabétique

Espace en HTML

Discussions similaires

Newsletters