28172 sujets

CSS et mise en forme, CSS3

Cadre blanc de la taille de la fenêtre

Bonjour,

Je cherche à faire un cadre blanc qui entoure la fenêtre du navigateur.

J'ai du mal à être clair mais comme une fenêtre dans la fenêtre . J'ai mis un margin à mon body de 20 px et effectivement j'ai bien cette bordure blanche qui apparait, mais si je défile, le cadre blanc entoure tout mon contenu (normal) mais moi je veux qu'il soit fixe.

Un petit schema pour illustrer : upload/55448-Desktop.png

Peut être qu'il faut utiliser du js ?
Bonsoir wiish,

wiish a écrit :
Peut être qu'il faut utiliser du js ?
Oublie !

Je ne sais pas comment tu as généré ton cadre blanc, je vais donc supposer qu'il s'agit d'un DIV dimensionné à 100% de la hauteur et de la largeur du Body. Je chauffe ?

Dans ce cas, un simple
POSITION:FIXED;
appliqué à la DIV devrait te satisfaire.

Autrement, merci de fournir du code. Ici on se nourrit de code, au petit-déj', à tous les repas et même en guise de goûter. Alors file nous du code ! :-P
Merci de ta réponse, j'ai effectivement mis une div dans mon body :

Html : 

<body>
   <div class="cadre">
       ....contenu..
   </div>
</body>


Css:

.cadre {
	width: 100%;
	height: 100%;
	border: 20px solid #fff;
}


Ca me fait un cadre mais comme je disais il prend tout ! Et si je mets un position: fixed; je ne peux plus scroller dans ma page ;( Je veux scroller dans mon cadre
et j'ai fais autre chose qui marche comme je veux mais bon, je suis obligé de mettre un padding à mon body :


<body>
   <div class="cadre"></div>
       ....contenu..
</body>




body {
	padding: 20px;
}

.cadre {
	width: 100%;
	height: 100%;
	border: 20px solid blue;
	position: absolute;
	position: fixed;
}


Et je souhaiterais éviter le padding du body, enfin vous en pensez quoi ? (en plus les liens ne sont plus trop cliquable dans le contenu, j'imagine caché par la div..
Modifié par wiish (10 Dec 2014 - 18:51)
Modérateur
Salut,


Pour moi il faudrait passer par un conteneur global : 

<div class="wrapper">
    content
</div>


html,
body{
    height:100%;
    position:relative;
    margin:0;
    padding:0;
}
.wrapper{
    position:relative;
    height:100%;
    box-sizing:border-box;
    border:20px solid blue;
    overflow:auto;
}


En application ici : http://jsfiddle.net/Undless/9bL0q8tn/


*box-sizing à préfixer avec -moz- et -webkit-
Modérateur
kustolovic a écrit :
cette méthode fonctionne mais posera pas mal de problèmes sur mobile (scroll d'éléments internes)

Smiley ohwell Je vois pas bien le problème qu'il peut y avoir sur un scroll dans un élément... je l'utilise sur certaines appli web et ca passe bien sur Ipad/phone... mais j'ai pas testé sous android... ça pose quoi comme soucis ?

Sympa la solution avec les after/before mais il n'aura pas les cotés... Smiley ohwell Sinon même principe mais avec 4 div placées en fixed (plutôt qu'une div unique pour faire les 4 bords avec border). Un truc du genre :
<body>
   content
   <div class="cadre-haut"></div>
   <div class="cadre-bas"></div>
   <div class="cadre-gauche"></div>
   <div class="cadre-droite"></div>
</body>

(au passage, la position fixed est pas un peu relou sur mobile ? ça j'ai pas testé...)
Modérateur
_laurent a écrit :

Smiley ohwell Je vois pas bien le problème qu'il peut y avoir sur un scroll dans un élément... je l'utilise sur certaines appli web et ca passe bien sur Ipad/phone... mais j'ai pas testé sous android... ça pose quoi comme soucis ?

Sous certaines versions d'android ça ne marchera pas du tout, sous Ios il faut utiliser deux doigts (ce qui n'est pas forcément intuitif). Tout cela peut être géré grâce à -webkit-overflow-scrolling: touch sur les mobiles récents mais ce n'est pas exempt de bugs. Avec des polyfills javascripts on s'en sort à peu près mais si on peut l'éviter c'est tant mieux ^^.

_laurent a écrit :
Sympa la solution avec les after/before mais il n'aura pas les cotés... Smiley ohwell

Pourtant ils y sont bien sur mon exemple Smiley langue J'ai utilisé les bords gauche et droite du body, mais il y a d'autres solutions selon les besoins. Seuls les bordures du haut et du bas ont besoin de passer par-dessus le contenu.
Oui, le scroll pose des problèmes selon le contenu et le device avec la méthode avec le conteneur global. Surtout si il y a du javascript la dedans. Par contre j'ai trouvé un semblant de solution qui me convient plutôt pas mal, c'est d'ailleurs la dernière proposition, j'ai trouvé sur le net mais j'ai galéré à trouver ! :


<body>

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

<div id="page">
..contenu..
</div>
</body>




#page {
	padding: 50px;
}
#top, #bottom, #left, #right {
	background: #fff;
	position: fixed;
	z-index: 999;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 50px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 50px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }


Ca peut servir ! et des media query pour adapter le padding et les bords selon la taille d'écran. Ca fait un peu bidouille Smiley cligne et ca m'aurait pas dérangé d'utiliser du js mais bon, ça marche et pas de problème de scroll (enfin on peut pas scroller si la souris est sur les bords mais bon)
Modifié par wiish (11 Dec 2014 - 14:10)
Modérateur
kustolovic a écrit :
Sous certaines versions d'android ça ne marchera pas du tout, sous Ios il faut utiliser deux doigts (ce qui n'est pas forcément intuitif). Tout cela peut être géré grâce à -webkit-overflow-scrolling: touch sur les mobiles récents mais ce n'est pas exempt de bugs. Avec des polyfills javascripts on s'en sort à peu près mais si on peut l'éviter c'est tant mieux ^^.

Ah bah du coup je l'utilise et j'ai aucun bug mais c'est vrai qu'on est sur du matos récent... je vais rester vigilant alors, merci. Smiley smile
kustolovic a écrit :
Pourtant ils y sont bien sur mon exemple Smiley langue J'ai utilisé les bords gauche et droite du body, mais il y a d'autres solutions selon les besoins. Seuls les bordures du haut et du bas ont besoin de passer par-dessus le contenu.

Hihi j'avais pas vu ! Au temps pour moi ! Smiley biggol
wiish a écrit :
Ca me fait un cadre mais comme je disais il prend tout ! Et si je mets un position: fixed; je ne peux plus scroller dans ma page ;( Je veux scroller dans mon cadre
Quel idiot ! Evidemment !

_laurent a écrit :
au passage, la position fixed est pas un peu relou sur mobile ?
Ho que oui !


Perso j'aime bien la méthode de Kustolovic.
Sujet clos
Aller à