Système de fenêtres

L'agrandir avec une marge en dessous

Sujet résolu

12 avril 2010 à 18:07:27

Bonjour à tous les zéros.

Actuellement, je suis en train de créer un site avec du CSS3 et sous la forme d'un OS.

Donc en ce moment, je cherche à agrandir ma fenêtre de telle sorte qu'il y aie une marge en dessous afin de pouvoir y affiche la barre "démarrer".

Malheureusement, je n'arrive pas à faire quelque chose qui marche avec tous les navigateurs :

Google Chrome

Mozilla Firefox

</span>

Donc, j'aimerai pour les deux navigateurs qu'il n'y ait plus la barre en bas et que ça soit agrandit au maximum (touche la ligne au-dessus de "Démarrer", si possible).

Merci de vos réponses,
Au revoir.

Golmote

12 avril 2010 à 18:35:04

Les screens, c'est bien... mais sans le code c'est difficile de deviner ce qui peut donner ce résultat

stombaker

12 avril 2010 à 18:39:13

Oups !

J'avais oublié, mais j'y avais déjà pensé !

Page principale :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Site de l'association Voir &amp; Entendre</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="description" content="Page principale du site de l'association Voir &amp; Entendre" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design du site" href="design.css" />
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		<script type="text/javascript" src="fenetres.js"></script>
		<script type="text/javascript" src="donnees_utilisateur.js"></script>
		<script type="text/javascript" src="formulaires.js"></script>
	</head>
	<body>
		<div class="fenetre">
			<div class="barre_titre_fenetre">
				<button class="fermer_fenetre">X</button>
				<button class="agrandir_fenetre">O</button>
				<button class="reduire_fenetre">-</button>
				<p>Titre de la fenêtre</p>
			</div>
			<div class="corps_fenetre">
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet.
					Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus.
					Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper.
					Cras sem diam, vulputate nec, tempor at, pretium at, magna.
					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
					Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula.
					Morbi mattis posuere odio. Ut mattis risus ac erat.
					Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet.
					Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus.
					Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper.
					Cras sem diam, vulputate nec, tempor at, pretium at, magna.
					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
					Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula.
					Morbi mattis posuere odio. Ut mattis risus ac erat.
					Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet.
					Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus.
					Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper.
					Cras sem diam, vulputate nec, tempor at, pretium at, magna.
					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
					Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula.
					Morbi mattis posuere odio. Ut mattis risus ac erat.
					Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.
				</p>
			</div>
		</div>
		<div class="barre_menu">
			<button class="demarrer">Démarrer</button>
		</div>
	</body>
</html>

page design.css :

body
{
	background-image : url("fond.png");
}

.fenetre
{
	background-color : rgba(255, 255, 255, 0);
	border : 2px solid rgb(0, 0, 0);
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	-webkit-box-shadow : 10px 10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow : 10px 10px 10px rgba(0, 0, 0, 0.2);
	width : 50%;
	height : 50%;
	position : absolute;
	left : 25%;
	top : 25%;
	overflow : auto;
}

.barre_titre_fenetre
{
	background-color : rgba(0, 0, 255, 0.1);
	border-bottom : 1px solid black;
	height : 20px;
	cursor : move;
}

.barre_titre_fenetre p
{
	margin : 0;
	text-align : center;
	font-weight : bold;
}

.barre_titre_fenetre .fermer_fenetre, .agrandir_fenetre, .reduire_fenetre
{
	float : right;
	margin : 0;
	width : 20px;
	height : 20px;
	padding : 0;
	text-align : center;
	cursor : pointer;
}

.corps_fenetre
{
	background-color : silver;
	margin : 0;
	padding : 5px;
}

.barre_menu
{
	width : 100%;
	height : 40px;
	position : fixed;
	left : 0;
	bottom : 0;
	border-top : 1px solid black;
}

.demarrer
{
	height : 100%;
}

h1
{
	text-align : center;
}

code javascript concernant la fenêtre à agrandir :

// Agrandit la fenêtre à sa taille maximale mais laisse une place pour la barre de menu.
function agrandir_fenetre(objet)
{
	if (objet.max) // L'objet est déjà à sa taille maximale, on le rend à son ancienne taille et à son ancienne position.
	{
		objet.style.width = objet.ancien_width;
		objet.style.height = objet.ancien_height;
		objet.style.left = objet.ancien_left;
		objet.style.top = objet.ancien_top;
		objet.max = false;
	}
	else // On enregistre les données actuelles de la fenêtre et on l'agrandit.
	{
		objet.ancien_width = objet.style.width;
		objet.ancien_height = objet.style.height;
		objet.ancien_left = objet.style.left;
		objet.ancien_top = objet.style.top;
		objet.max = true;
		
		objet.style.width = "100%";
		objet.style.width = objet.offsetWidth-15+"px";
		objet.style.height = "100%";
		objet.style.height = objet.offsetHeight-50+"px";
		objet.style.left = 0;
		objet.style.top = 0;
	}
}/**/

Golmote

12 avril 2010 à 19:04:16

EDIT : Rooh le fail... je raconte n'importe quoi -_-

Bref... euh... bah je sais pas trop... :euh:

stombaker

12 avril 2010 à 21:27:02

C'est bon, j'ai trouvé comment faire, après de nombreuses recherches sur internet.

je vous offre mon code pour qu'il puisse éventuellement profiter à d'autres.

// Agrandit la fenêtre à sa taille maximale mais laisse une place pour la barre de menu.
function agrandir_fenetre(objet)
{
	if (objet.max) // L'objet est déjà à sa taille maximale, on le rend à son ancienne taille et à son ancienne position.
	{
		objet.style.width = objet.ancien_width;
		objet.style.height = objet.ancien_height;
		objet.style.left = objet.ancien_left;
		objet.style.top = objet.ancien_top;
		objet.style.right = "";
		objet.style.bottom = "";
		objet.max = false;
	}
	else // On enregistre les données actuelles de la fenêtre et on l'agrandit.
	{
		objet.ancien_width = objet.style.width;
		objet.ancien_height = objet.style.height;
		objet.ancien_left = objet.style.left;
		objet.ancien_top = objet.style.top;
		objet.max = true;
		
		// En mettant width et height en auto, les dimensions sont... étirables. 
		objet.style.width = "auto";
		objet.style.height = "auto";
		// On met en position absolue et on étire jusqu'à toucher les bords.
		objet.style.position = "absolute";
		objet.style.left = 0;
		objet.style.right = 0;
		objet.style.top = 0;
		// On laisse une marge ici pour affiche la barre des tâches.
		objet.style.bottom = "30px";
	}
}/**/

Golmote

12 avril 2010 à 22:52:24

Hm. Pas bête le auto

(Le forum CSS aurait sans doute pu répondre plus efficacement à ton problème.)

stombaker

13 avril 2010 à 8:19:07

Oui, mais au départ, je pensais plutôt à supprimer le width et le height, mais en fait, je m'y suis pris autrement.
De plus, le auto, je l'ai trouvé sur un tutoriel javascript