28172 sujets

CSS et mise en forme, CSS3

[Résolu] Casse tête CSS 3 - Cadre redimensionnable

Bonjour à toutes et à tous,


Je n'arrive pas à résoudre un problème de style en CSS 3 Smiley ohwell voici le casse tête auquel je suis en train de faire face... Smiley sweatdrop Pour comprendre ce que je tente de résoudre allé sur :
misterjc.be/test1.html
Le nom d'utilisateur et mot de passe sont : test


J'aimerais réussir à :

Créer un cadre de 3 px noir prenant les 95% de la largeur-hauteur avec les coins arrondis qui sont redimensionnables sous toutes les tailles de fenêtres afin d'être un site web le plus responsive possible.

Il faudra également que j'arrive à appliquer un fond d'écran gris à l'extérieur de ce cadre et ne recouvrant donc pas l'intérieur, soit le contenu dans le flux, le laissant en blanc par défaut.

Le tout devra toujours couvrir les éléments en flux (par la propriété "z-index" et/ou en le positionnant hors du flux et/ou si vous avez une autre idée...)


Le problème est que :

J'y suis presque arrivé à le faire en appliquant les propriétés (à un div par exemple) "position: fixed", "border" et un "border-radius. Mais je ne trouve pas comment faire pour appliquer un fond d'écran ne couvrant que la partie extérieure du cadre sans altérer le blanc des éléments en flux à l'intérieur de ce cadre...


Merci de poster des solutions possibles Smiley biggrin
Je vous joins le code CSS que j'ai fait jusqu'à présent ainsi que le html, merci de m'aider à résoudre ce casse tête Smiley confus 


<!doctype html>
<html lang="fr">
	<head>
	  <meta charset="utf-8">
	  <title>Home</title>
	  <link rel="stylesheet" href="./css/home.css">
	  <script src="script.js"></script>
	</head>
	<body>
		<div class='background' id="background">
		</div>
		<div class='position'>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
		</div>
		</div>
	</body>
</html>


Il faut encore trouver comment placer le contenu derrière le fond d'écran gris et le cadre et de faire en sorte que le fond d'écran gris ne s'occupe que de l'extérieur du cadre et non toute la surface, ici j'ai "triché" avec les propriétés "background: white" et "z-index" sur le cadre pour que vous compreniez ce que j'essaie de faire... Rendu disponible ici : misterjc.be/test1.html
Le nom d'utilisateur et mot de passe sont : test

body{
	background-color: gray;
}
#background{
	border: 3px solid black;
	border-radius: 10px;
	padding: 2px;
	position: fixed;
	left: 2%;
	right: 2%;
	top: 2%;
	bottom: 2%;
	z-index: -1;
	background-color: white;
}
div.position{
	z-index: 1;
	color: red;
	margin: 35px calc(2% + 10px);
}
Modérateur
Bonjour,


J'ai peut être loupé des besoins mais il ne me semble pas que tu ais besoin de plusieurs div (au passage attention tu as une fermeture de div en trop).
<body>
		<div class='position'>
			<p>Bonjour !<br />
			Voici le contenu de ce site !</p>
			[...]
		</div>
</body>

Avec un CSS du genre :
html,
body{
    position:relative;
    height:100%;
    margin:0;
    padding:0;
}
body{
    background-color:gray;
    padding:2%;
	box-sizing:border-box;
}
.position{
    max-height:100%;
	border: 3px solid black;
	border-radius: 10px;
	box-sizing:border-box;
	padding: 10px;
	background-color: white;
    overflow:auto;
}

à optimiser bien sur... mais l'idée est là je pense.

http://fiddle.jshell.net/6gghj9vb/1/
Effectivement Laurent, j'ai laissé une balise fermante en trop ^^ c'est de la faute à l'avoir extrait d'un code html un peu plus long. Et merci à vous deux pour ces propositions Smiley ravi

Juste une question sur la propriété box-sizing (que je ne connais pas très bien), ça transforme en mode de calcul Quirks non ? ça transforme aussi les enfants ? De plus, cette propriété n'est compatible qu'à partir de IE8, Opera 9, etc. y a-t-il une solution de rétrocompatibilité ?

Seconde question, peut-on styliser la barre de défilement en css (vu qu'elle est décalée et fort visible) ?
MisterJC a écrit :
Effectivement Laurent, j'ai laissé une balise fermante en trop ^^ c'est de la faute à l'avoir extrait d'un code html un peu plus long. Et merci à vous deux pour ces propositions Smiley ravi

Juste une question sur la propriété box-sizing (que je ne connais pas très bien), ça transforme en mode de calcul Quirks non ? ça transforme aussi les enfants ? De plus, cette propriété n'est compatible qu'à partir de IE8, Opera 9, etc. y a-t-il une solution de rétrocompatibilité ?

Seconde question, peut-on styliser la barre de défilement en css (vu qu'elle est décalée et fort visible) ?

Oublier pour ma question sur le box-sizing. Y a-t-il un moyen de styliser la barre de défilement en css ou faut-il absolument utiliser du javascript ?
Sujet clos
Aller à