28172 sujets

CSS et mise en forme, CSS3

[Résolu] Barre de défilement verticale + redimensionnement d'image

Bonjour à tous,

Dans le cadre d'un projet, je suis amené à développer une interface Web avec la mise en page suivante :

upload/55423-Design.PNG

Cette mise en page a quelques exigences :
- L'interface doit occuper l'entièreté de l'écran sans avoir de barre de défilement globale (horizontale et verticale);
- La zone bleue (id: input) doit faire 800 px de largeur tandis que la zone jaune (id: image) doit prendre le reste de la largeur de l'écran;
- La zone orange (id: zoom) doit occuper 60% de l'écran et la zone rouge (id: text) doit prendre les 40% qui restent.

L'image ci-dessus représente ce à quoi je suis arrivé et respecte ces trois exigences.

Là où cela se complique pour moi se situe dans la zone bleue où je suis censé disposer différents labels à des zones définies (ex: left: 10px; top: 15px; par rapport au coin supérieur gauche de la zone bleue). Lorsque des coordonnées d'un label (ex: "Label 5" se situent hors de la zone bleue, celle-ci s'en trouve agrandie verticalement (mais elle "passe" en-dessous des zones orange et rouge) comme vous pouvez le voir sur l'image ci-dessous :

upload/55423-Design2.PNG

De quelle façon pourrais-je avoir une barre de défilement verticale uniquement pour la zone bleue afin qu'il n'y ait aucun chevauchement avec d'autres zones et que je puisse voir "Label 5" ?

La seconde et dernière complication dans cette interface est que la zone jaune (id: image) est censée contenir une image. Comment puis-je faire en sorte que cette image n'agrandisse pas horizontalement la zone jaune ? Comme vous pouvez le voir sur l'image suivante, lorsque j'insère une image dans cette zone, celle-ci s'agrandit automatiquement pour afficher l'entièreté de la largeur de l'image. Comment redimensionner l'image pour qu'elle occupe 100% de la largeur de la zone jaune sans qu'il n'y ait de barre de défilement horizontale (la verticale peut éventuellement être nécessaire dans certains cas) ? J'ai tenté d'appliquer la propriété max-width à 100% sur l'image mais elle n'est pas prise en compte, sans doute par le caractère aléatoire de la largeur de la zone jaune.

upload/55423-Design3.PNG

Ci-dessous la définition du fichier HTML (Sample.html) :

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <link rel="stylesheet" href="Styles/StylesheetSample.css" />
</head>
<body>
    <div id="container">
        <div id="menu">

        </div>

        <div id="main">
            <div id="image">
                <!--img src="Images/CCITT_1-1.png" /-->
            </div>

            <div id="input">
                <span style="top: 10px; left: 15px;">Label 1</span>
                <span style="top: 10px; left: 300px;">Label 2</span>
                <span style="top: 32px; left: 300px;">Label 3</span>
                <span style="top: 65px; left: 15px;">Label 4</span>
                <span style="top: 700px; left: 15px;">Label 5</span>
            </div>
        </div>

        <div id="summary">
            <div id="zoom">

            </div>

            <div id="text">

            </div>
        </div>

        <div id="footer">

        </div>
    </div>
</body>
</html>


Et ci-dessous, la définition du fichier CSS qui lui est associé (StylesheetSample.css) :

html, body {
    height: 99%;
    font-family: Arial, Helvetica, sans-serif;
}

#container {
    width: 100%;
    height: 100%;
    border: solid 1px black;
}

#menu {
    height: 5%;
    background-color: black;
}

#main {
    width: 100%;
    height: 65%;
    display: table;
}

#summary {
    height: 25%;
}

#footer {
    height: 5%;
    background-color: green;
}

#image, #input, #zoom, #text {
    height: 100%;
}

#zoom, #text {
    float: left;
}

#image {
    width: auto;
    display: table-cell;
    background-color: yellow;
}

#input {
    width: 800px;
    display: table-cell;
    position: relative;
    background-color: Blue;
}

#input span {
    position: absolute;
}

#zoom {
    width: 60%;
    background-color: Orange;
}

#text {
    width: 40%;
    background-color: Red;
}


Et voici l'image utilisée dans ce projet de test au cas où cela pourrait être utile :

upload/55423-CCITT1-1.png

Auriez-vous des pistes pour m'aider à résoudre ces problèmes ?

Un grand merci d'avance,

Opec78.
Modifié par Opec78 (15 Jul 2014 - 08:26)
Bonjour à vous, j'aurais deux questions, pourquoi utiliser vous display:table et le positionnement avec Top, Left, Right, bottom?
Bonjour Origami,

Pour ce qui est du "display: table", j'ai suivi ce que j'ai vu dans un tutoriel ou article trouvé sur Internet car je souhaitais que la zone bleue ait une taille fixe et que la zone jaune prenne le reste de la largeur de l'écran. Je ne suis pas un expert en CSS et quand j'ai vu que cela donnait le résultat escompté, j'étais content Smiley biggrin

Et en ce qui concerne les propriétés top et left, c'est une des exigences du projet que de pouvoir positionner des labels à des endroits bien définis.
Je fais de tests et je reviens.

Je pense que le positionnement absolue n'est pas le plus approprié pour faire tout cela.
Je vais essayer de respecter les indications mais je ne promet rien.
Modifié par Origami (14 Jul 2014 - 15:59)
Le truc avec les Display: table, c'est que ça dit à tes cellules d'agir comme un tableau. Et le comportement par défaut d'une cellule de tableau est de s'adapté au contenu, j'en déduis que ton image est "très" large.
Donc en plus de mettre le width: auto; à ton bloc #image, essaie de lui donner un max-width, voit ce que ça donne, Tu pourrais aussi essayer de cibler ton image et lui donner une largeur maximal également.
Et aussi petit conseil, évite les style en ligne:
<div id="input">
        <span style="top: 10px; left: 15px;">Label 1</span>
        <span style="top: 10px; left: 300px;">Label 2</span>
        <span style="top: 32px; left: 300px;">Label 3</span>
        <span style="top: 65px; left: 15px;">Label 4</span>
        <span style="top: 700px; left: 15px;">Label 5</span>
</div>
Smiley nono
Ramène ça dans le css...

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <link rel="stylesheet" href="Styles/StylesheetSample.css" />
</head>
<body>
    
        <div id="menu">

        </div>

        <div id="main">
            <div id="image">
               
                <img class="img" src="Images/CCITT1-1.png" /> 
            </div>

            <div id="input">
                <span>label 1</span>
                <span>label 2</span>
                <span>label 3</span>
                <span>label 4</span>
                <span>label 5</span>
            </div>
        </div>

        <div id="summary">
            <div id="zoom">

            </div>

            <div id="text">

            </div>
        </div>

        <div id="footer">

        </div>
    
</body>
</html>





html,body{
	margin: 0;/*supprime les marges blanches*/
	padding: 0; /*supprime les marges blanches*/
	height: 100%; /*une hauteur de 100%*/
	min-height: 100%; /*je pense que on peux le supprimer si il n'y a pas de bug sans*/
}

.img{

	max-width: 100%; /*force l'image à prendre 100% de la largeur*/
	height: 100%; /*prend 100% de la hauteur de #image*/
/* supprimer height:100% et appliquer un max-height : 65%  puis un overflow-y:scroll à #image pour avoir l'image en pus grand mais avec une barre de scroll verticale*/
	margin: 0 auto; /*centre l'image dans #images vous pouvez réutiliser cette classe pour faire pareil dans d'autres div*/
	display: block; /*permet de centrer l'image grâce à Margin : 0 auto; */ 
}
#menu {
    height: 5%;
    background-color: black;
}

#input{
	float: right; /*aligne à droite*/
	width: 800px;
	background-color: blue;
	display: inline-block;
	max-height: 100%;
	height: 100%; /*occupe toute la place en hauteur*/
}

#image{
	background-color: yellow;
	position: absolute; /* position absolue pour forcer la taille adaptatif, c'est astuce utile plus propre que le display table à mes yeux, un avis d'un expert ?*/
	left: 0; /*occupe toute la place à gauche*/
	top: 0;/*occupe toute la place en haut*/
	right: 800px; /*laisse 800px à droite pour #input*/
	bottom: 0; /*occupe toute la place en bas*/
}

#main{
	width: 100%;
	height: 65%;
	display: block;
	position: relative;
}
#summary{
	height: 25%; /*occupe 25% les éléments dedans s'adaptent automatiquement*/
}
#text{
	height: 100%;
	display: inline-block;
	float: left; /*aligne à gauche*/
	width: 40%;
	background-color: RED;
}
#zoom {
    width: 60%;
    background-color: Orange;
	height: 100%; /*occupe toute la place en hauteur*/
	float: left;
	display: inline-block;
}
#footer{
	height: 5%;
	background-color:green;
}



J'ai juste pas compris comment voulez vous placer les labels.
Avec un schéma sa serait plus simple peut être,
Modifié par Origami (14 Jul 2014 - 16:02)
Combiner float et inline-block est à mon avis pas très utile ici... Inline-block fait très bien la job seul à mon avis. Et je pense toujours que table-cell était tout à fait indiqué ici... Mon opinion.
juliesunset a écrit :
Combiner float et inline-block est à mon avis pas très utile ici... Inline-block fait très bien la job seul à mon avis. Et je pense toujours que table-cell était tout à fait indiqué ici... Mon opinion.


Les inline-block ont un souci de white-space, donc passage à la ligne sans les floats.display: inline-block et les espaces indésirables.
Je n'utilise seulement float quand deux éléments en inline-block sont alignés sa évite pas mal de bidouilles HTML, (j'évite au delà de deux éléments,ce n'est plus gérable sinon.)

Chacun son avis je ne suis pas un expert non plus mais je sais que comme ça il n'y à pas de problèmes, à mon avis.

Un autre avis peut être?

Edit : La mise en page avec display:table ne comprend pas max-height si j'ai bien compris (une confirmation de quelqu'un?)
Modifié par Origami (14 Jul 2014 - 16:50)
Origami a écrit :
Les inline-block ont un souci de white-space, donc passage à la ligne sans les floats.display: inline-block et les espaces indésirables.
Je n'utilise seulement float quand deux éléments en inline-block sont alignés sa évite pas mal de bidouilles HTML, (j'évite au delà de deux éléments,ce n'est plus gérable sinon.)
Oui je sais très bien, mais utiliser inline-block + float est un non-sens à mon avis. autant utiliser block. Et il existe d'autres moyens (plus propre) pour les white-space, on en parle ici: http://www.alsacreations.com/article/lire/1209-display-inline-block.html
En plus avec float, il va falloir régler les problème de débordement des block : http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html

Origami a écrit :
La mise en page avec display:table ne comprend pas max-height si j'ai bien compris (une confirmation de quelqu'un?)

display:table et table-cell prend un height à 100% par défaut, c'est pour ça que je disais que dans ce cas ici table et table-cell font très bien le travail. il suffirait seulement de réglé le problème de l'image trop grande.
juliesunset a écrit :
Oui je sais très bien, mais utiliser inline-block + float est un non-sens à mon avis. autant utiliser block. Et il existe d'autres moyens (plus propre) pour les white-space, on en parle ici: http://www.alsacreations.com/article/lire/1209-display-inline-block.html
En plus avec float, il va falloir régler les problème de débordement des block : http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html


J'ai ensuite pensé aux problèmes de débordements mais sa dépendra du contenu.
Je suis juste pas fan de tout ce qui est tableau et display table.

juliesunset a écrit :
display:table et table-cell prend un height à 100% par défaut, c'est pour ça que je disais que dans ce cas ici table et table-cell font très bien le travail. il suffirait seulement de réglé le problème de l'image trop grande.

Pour le débordement de l'image avec un max-height:100% et overflow-y:scroll; et le problème est réglé.(il précise que une barre de navigation est envisageable).

Après je comprend les arguments et ils se valent, comme j'ai dit je ne suis pas un expert je souhaite m'améliorer en venant sur ce forum et en apprendre plus de mes ainés.

Un test de se que sa donne en tout cas.
test : lien du test
Modifié par Origami (15 Jul 2014 - 01:53)
salut,
en changeant légèrement ton HTML, on pourrait le faire assez simplement sans passer par la mise en page tabulaire

        <div id="menu">

        </div>

        <div id="main">
            <div id="input">
                <span>Label 1</span>
                <span>Label 2</span>
                <span>Label 3</span>
                <span>Label 4</span>
                <span>Label 5</span>
            </div>

            <div id="image">
                <!--img src="Images/CCITT_1-1.png" /-->
            </div>
        </div>

        <div id="summary">
            <div id="zoom">

            </div><!--

            --><div id="text">

            </div>
        </div>

        <div id="footer">

        </div>


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

#menu {
	height:5%;
	background:#000;
}

#main {
	overflow:hidden;
	height:65%;
}

#main>div {
	overflow:auto;
	height:100%;
}

	#image {
		background:#ff0;
	}
	
	#image img {
		max-width:100%;
		height:auto;
	}
	
	#input {
		position:relative;
		float:right;
		width:800px;
		background:#00f;
	}
	
	#input span {
		position:absolute;
	}
	
	#input span:first-child {
		top: 10px;
		left: 15px;
	}
	#input span:first-child+span {
		top: 10px;
		left: 300px;
	}
	#input span:first-child+span+span {
		top: 32px;
		left: 300px;
	}
	#input span:first-child+span+span+span {
		top: 65px;
		left: 15px;
	}
	#input span:first-child+span+span+span+span {
		top: 700px;
		left: 15px;
	}

#summary {
	height:25%;
}

#summary>div {
	display:inline-block;
	vertical-align:top;
	height:100%;
}
	
	#zoom {
		width:60%;
		background:#FFA500;
	}
	
	#text {
		width:40%;
		background:#f00;
	}

#footer {
	height:5%;
	background:#008000;
}
Sujet clos
Aller à