28172 sujets

CSS et mise en forme, CSS3

[Résolu] Div largeur fixe et div avec largeur minimum côte à côte

Bonsoir à toutes et à tous, je suis nouveau je viens juste de m'inscrire Smiley smile
Petite présentation, je suis électronicien, je fais de la conception de systèmes électroniques, et par la force des choses (microcontroleurs/microprocesseurs) beaucoup de soft embarqué. J'exploite aussi pas mal de systèmes en Linux embarqué, et là justement pour un projet j'ai développé une interface web de gestion. C'est pas trop ma partie alors globalement je m'en sors mais là je rame un peu !
Je voudrais mettre en place un truc qui paraît simple mais après y avoir passé plusieurs heures je ne trouve pas l'astuce pour faire ce que je veux.

Mon interface est séparée en 2 zones, donc 2 blocs.
Ces 2 blocs sont cotes a cotes. Le bloc 'A' est à gauche et le bloc 'B' est à droite.
Le bloc A a une largeur fixe de 650px et contient 6 images 320x240 (en fait des visualisations de caméras, sur 2 colonnes, d'où les 650px de largeur du bloc A ).
Le bloc B contient du contenu normal, mais pour qu'il soit correctement lisible il doit faire au minimum 900px de largeur.
Du coup ce que je souhaiterais, c'est que sur les écrans dont la largeur est supérieure ou égale à 1600px, le bloc B s'adapte automatiquement à la largeur restante entre le bloc A (qui bouffe donc 650px) et le bord droit de l'écran.

En revanche, sur les résolutions plus petites où il n'est pas possible de tenir les 650px du bloc A + les 900px minimum du bloc B, il faudrait que le bloc B descende sous le bloc A, où il aurait alors la place pour son minimum de 900px en largeur.

J'ai réussi à faire une partie du truc avec un min-width sur le bloc B, il passe bien automatiquement sous le bloc A si je réduis la largeur de la fenêtre du navigateur, mais par contre sur les grandes résolutions il se cale à la valeur min-width que je lui indique, il n'exploite pas toute la place restante à droite du bloc A Smiley decu

C'est là dessus que je coince, impossible d'arriver à mes fins Smiley ohwell

Si quelqu'un a une idée ça serait génial !
Bonne soirée
Cyril
Modifié par nlc (06 Jan 2017 - 10:55)
connecté
nlc a écrit :
Je voudrais mettre en place un truc qui paraît simple mais après y avoir passé plusieurs heures je ne trouve pas l'astuce pour faire ce que je veux.

Pas si simple que cela pour un néophyte. Je ne suis pas sûr d'avoir tout compris de l'explication - je vais donc éviter de coder dans le vide - mais la solution est à rechercher du côté des media queries qui sont des points de rupture en dessus ou en dessous desquels on active une nouvelle règle css).

Exemple de MDN :
@media (max-width: 600px) {
  .uneClass {
    display: none;
  }
}


Important : d'une manière générale il faut penser les points de rupture en fonction du design du site/de l'app, jamais en fonction de la taille présumée des écrans.
Merci pour vos réponses Smiley smile
Pour préciser un peu plus ma demande, voilà un fichier html d'exemple avec ce que j'ai testé :

<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="cams">
</div>
<div id="content">
</div>
</body>
</html>


Et le fichier style.css correspondant :


#cams
{
 display: inline-block;
 border: 5px solid blue;
 height: 400px;
 width: 650px;
 margin: 0px 0px 0px 0px;
}

#content
{
 display: inline-block;
 border: 5px solid green;
 height: 400px;
 min-width: 900px;
 margin: 0px 0px 0px 0px;
}


Donc quand la fenetre du navigateur est assez large, ça donne ça :

upload/63594-div1.png

Ce que je souhaiterais, c'est que le bloc en vert exploite toutes la place restante à droite.

Et lorsque la résolution de la fenetre est trop faible pour contenir les 650px du bloc bleu et les 900px minimum du bloc vert, il faut que le bloc vert passe en dessous du bloc bleu, ça c'est bon ça fonctionne :

upload/63594-div2.png

Mais l'idéal dans ce cas serait alors qu'il prenne aussi toute la largeur.
En attendant peut être une autre piste de votre part, je jette un oeil aux media queries et flex-box, je ne sais pas du tout ce que sont ces 2 choses.
connecté
D'accord, je vous donne une piste. Voici un exemple de ce que vous pourriez faire :

<div class="el1"></div>
<div class="el2"></div>


.el1,
.el2 {
  height: 50vh;
}
.el1 {
  background-color: Tan;
}
.el2 {
  background-color: Peru;
}
@media (min-width: 50rem) {
  .el1 {
    float: right;
  }
  .el1,
  .el2 {
    width: 50%;
    height: 100vh;
  }
}


Exemple en ligne

Il vous appartient ensuite d'adapter le code pour ce qui est du point de rupture, des dimensions et des couleurs.
salut,
tu peux passer par un float et un overflow: hidden pour gérer automatiquement l'espace restant lorsque la résolution est supérieur à 1600px

    <div></div><!--
 --><div></div>



html, body, div {height: 100%;margin: 0;}

div {
  display: inline-block;
  vertical-align: top;
}

div:nth-child(1) {
  width: 650px;
  background: #222;
}

div:nth-child(2) {
  min-width: 900px;
  background: #404040;
}

@media screen and (min-width:1600px) {
  div:nth-child(1) {
    float: left;
  }
  div:nth-child(2) {
    overflow: hidden;
    display: block;
  }
}

Fais attention aux espaces indésirables dans le HTML quand tu utilises display: inline-block.
Merci Olivier C et Zelalsan !

Vos propositions sont assez similaires, j'ai testé les 2, et la 2eme convient mieux car elle indique bien la largeur fixe de 650px pour le 1er bloc.
Effectivement bien vu pour les espaces indésirables, dans mes essais préliminaires j'avais effectivement un trou entre les 2 div qui avaient pourtant un marge à 0, et je ne comprenais pas d'où ça venait Smiley lol

Du coup la solution proposée fonctionne parfaitement comme attendu ! Sauf qu'en fait ça ne résout pas mon problème, car je viens de faire une découverte surprenante !! Smiley eek
A la base si j'avais ce besoin c'était pour que sur mobile en position portrait, les 2 div soient l'un au dessus de l'autre, et qu'en mode paysage, on se retrouve comme sur PC avec les 2 div côte à côte.

Sauf que je vient de constater que quand on change de mode, les largeurs/hauteurs de la zone d'affichage n'évoluent pas, la résolution de l'écran ne correspond pas du tout aux valeurs renvoyées pour la résolution de la zone d'affichage !!!

Du coup ça me gonfle alors j'ai résolu le truc en mettant dans l'entête :

<meta name=viewport content="width=1600px">

Comme ça en mode portrait, j'ai un ascenseur horizontal mais tant pis, et en mode paysage tout est OK.
connecté
Cette balise meta passe partout convient pour la plupart des usages, essayez-la :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sujet clos
Aller à