Salut,
Je souhaite créer une sorte d'interface en HTML/CSS
Je m'exerce pour commencer à placer mes éléments.
Tous les élements de mon "IHM" doivent figurer sur la totalité de ma page WEB.
Pour m'assurer que mes élements occupent l'espace désiré, j'ajoute pour le moment des "border" à mes container.
Ne sachant pas sur quelles tailles d'écrans ma page pourrait être affichée, je cherche à définir des hauteurs en %.
Pour autant, mes Div et leurs contenus ne dépassent pas une certaine taille, sauf si je m'exprime en CSS.
Mon code HTML est sommaire :
<body>
<div class="workspace">
<div class="toolbar">
<div class="toolbarButton" id="Open">
<img a src="./IMG/ICONS/open.png" alt="Button select file"> <!-- copy.png author -> kmg design -->
</div>
<div class="toolbarButton" id="Cut">
<img a src="./IMG/ICONS/cut.png" alt="cut image portion"> <!-- copy.png author -> Freepik -->
</div>
<div class="toolbarButton" id="Copy">
<img a src="./IMG/ICONS/copy.png" alt="copy image portion"> <!-- copy.png author -> Freepik -->
</div>
<div class="toolbarButton" id="Zoom">
<img a src="./IMG/ICONS/zoom.png" alt="zoom or dezoom image with mouse wheel"> <!-- copy.png author -> Freepik -->
</div>
</div>
<canvas class="sourceCanvas"></canvas>
</div>
<div class="spritesheetSpace">
<div class="resultingCanvas">
<canvas class="destinationCanvas"></canvas>
</div>
<div class="animationsSpace">
</div>
</div>
</body>Et mon code CSS est ... disons ... brouillons ?
/*******************************************************************************
* *
* COMMONS *
* *
/******************************************************************************/
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
background: black;
display: flex;
flex-direction: row;
}
/*******************************************************************************
* *
* Workspace *
* *
/******************************************************************************/
.workspace{
padding: 10px 10px 10px 10px;
border: 1px solid red;
height: 100%;
max-height: 98%;
width: 40%;
max-width: 40%;
}
/*******************************************************************************
* *
* Toolbar *
* *
/******************************************************************************/
.toolbar{
display: flex;
height:50px;
left: 10px;
top: 10px;
margin-bottom: 10px;
}
.toolbarButton{
background-color:rgb(164, 161, 161);
padding: 2px;
margin: 1px;
}
.toolbarButton:hover{
background-color:rgb(234, 224, 224);
}
.toolbarButton img{
max-width:100%;
max-height:100%;
}
/*******************************************************************************
* *
* Source canvas *
* *
/******************************************************************************/
.sourceCanvas{
display: block;
border: 1px solid white;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
height: calc(100% - 20px);
max-width: 100%;
width: 70%;
}
/********************************************************************************
* *
* SpritesheetSpace *
* *
/******************************************************************************/
.spritesheetSpace{
border: 1px solid yellow;
width: 35%;
}Je n'affiche pas l'ensemble du CSS, mais uniquement la partie que je pense être utile.
Ce que je veux
Avoir la taille de mon élement rouge qui occuepe toute la hauteur, au même titre que l'élément jaune.
J'arrive à avoir ce que je veux pour l'élément rouge (la div avec la class sourceCanvas) si j'ajoute la proprité et la valeur position: fixed;
.workspace{
position: fixed;
padding: 10px 10px 10px 10px;
border: 1px solid red;
height: 100%;
max-height: 98%;
width: 40%;
max-width: 40%;
} Mais dans ce cas, mon élement jaune n'est pas à droite de mon élément rouge. Comme on peut le voir à la page suivante : https://ibb.co/tBFzdtt
En revanche, si je retire cette ligne, j'ai bien le jaune à droite du rouge, mais je suis limité par la hauteur de mes éléments rouge et jaune, sans que je ne comprenne pourquoi.
Résultat visible ici :https://ibb.co/1q6WLx2
Idéalement j'aimerais tendre vers quelque chose comme ça :
https://ibb.co/F4bTR5V
Pour cette capture; j'ai triché en entrant une valeur en pixel !
Merci d'avance pour votre retour
3 réponses
Hello, j'ai modifié un peu ton css, j'ai fait du ménage parce que tu joues à la fois avec le margin et le padding et les 2 se surajoutent ce qui apporte de la complexité inutile dans la gestion des espacements..
Y a des trucs que j'ai pas compris, genre :
max-width: 100%;
width: 70%;
→ du coup j'ai supprimé...
Dis moi si ce css te convient et est compréhensible :)
/*******************************************************************************
* *
* COMMONS *
* *
/******************************************************************************/
*{
margin: 0;
padding: 0;
}
body{
background: black;
display: flex;
flex-direction: row;
}
/*******************************************************************************
* *
* Workspace *
* *
/******************************************************************************/
.workspace{
display: flex;
flex-direction: column;
border: 1px solid red;
width: 40%;
}
/*******************************************************************************
* *
* Toolbar *
* *
/******************************************************************************/
.toolbar{
display: flex;
height:50px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.toolbarButton{
background-color:rgb(164, 161, 161);
padding: 2px;
margin: 1px;
width: 50px;
}
.toolbarButton:hover{
background-color:rgb(234, 224, 224);
}
.toolbarButton img{
max-width:100%;
max-height:100%;
}
/*******************************************************************************
* *
* Source canvas *
* *
/******************************************************************************/
.sourceCanvas{
border: 1px solid white;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
height: 100%;
}
/********************************************************************************
* *
* SpritesheetSpace *
* *
/******************************************************************************/
.spritesheetSpace{
border: 1px solid yellow;
width: 35%;
}PS : ton .sourceCanvas blanc qui sortait c'est parce que tu lui demandais une hauteur de 100%-20px calculée par rapport à la div parente
Hello :)
alors ton body est en display: flex en row, tu peux remplir l'espace avec un height: 100% et un flex: 1 sur les élements enfants
<html style="height: 100%;">
<body style="height: 100%; min-height: 100dvh; display: flex;">
<div class="workspace" style="height: 100%; flex: 1; display: flex; flex-direction: column;">
<div class="toolbar" style="flex: 1; width: 100%;">
...
</div>
<canvas class="sourceCanvas" style="height: 30%"><!-- met la hauteur min que tu veux --></canvas>
</div>
<div class="spritesheetSpace" style="width: 35%; height: 100%; display: flex; flex-direction: column;">
<div class="resultingCanvas" style="flex: 1">
<canvas class="destinationCanvas"></canvas>
</div>
<div class="animationsSpace">
</div>
</div>
</body>
</html>En gros joues avec les flexbox, display flex sur le parent, et flex 1 sur l'enfant qui doit prendre le maximum d'espace possible dans le sens du fflex (column ou rox) et un 100% sur l'autre axe
Merci pour vos réponses
J'ai trouvé de mon côté,
J'ai ajouté ça :
html, body { height: 100%; width: 100%; margin: 0; }
et effectivement, j'ai retiré mes padding et marging qui trainaient partout.
J'essaierais tout de même vos solutions ces prochains jours !