28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous!
http://forum.alsacreations.com/preview.php?file=22961-site.jpg&size=150
Je souhaite faire un cadre qui prend toute la taille de l'écran quelque soit la résolution avec un contour interne en couleur d'une épaisseur égale partout.

J'ai donc créé un div main et défini ce CSS:


body { 
margin:0; 
padding:0; 
height:100%; /* this is the key! */ 
} 
#main {
	position:absolute;
	background-color: #036;
	height: 100%;
	width: 100%; 
} 


J'ai donc bien un div qui s'adapte à la taille de l'écran. Mtn je sèche pour le contour. J'ai essayé:
- d'utiliser "border-width" mais le prob est que mon contour est en fait un contour externe, ce qui fait qu'il fait que mon div devient plus grand que la résolution de mon écran
- de jouer sur les marges -> même problème
- de jouer sur le padding et un autre div interne, en mettant une couleur de fond différente au div principal et à l'interne -> les résultats sont mauvais aussi.

Avez vous une idée de ce qu'il faut faire?

Merci d'avance upload/22961-site.jpg
Modifié par fablecrab (28 Aug 2009 - 15:31)
Pourquoi ne pas donner une couleur à ton body et utiliser ta div avec ces conditions :


#html, #body, #tadiv{margin:0;padding:0;

#html, body{background:black;}

#tadiv{
width:98%;
height:98%;
position:absolute;
background:red;
}



en n'oubliant pas de jouer sur les valeurs de margin/padding et la taille également.
Modifié par Nicozen (31 Aug 2009 - 15:11)
Dans l'idéal il faudrait faire:
#main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: solid 50px #369;
  background: #036;
}

C'est juste pas compatible avec IE6. Mais je ne vois pas trop comment ce problème peut être géré pour IE6 sauf en passant par une surcouche JavaScript pour ce dernier (pour calculer une hauteur et largeur précise en pixels du bloc, en fonction des dimensions de la zone de visualisation du navigateur), ou en dégradation gracieuse (rendu simplifié dans IE6). Donc ça reste une solution intéressante, il faut «juste» gérer le cas IE6.
Merci beaucoup pour votre aide les gars! Smiley smile

Nico, ta méthode fonctionne, mais elle a le désavantage de ne pas donner une bordure d'une taille tout le temps égale malheureusement...

Par contre Florent ta solus est parfaite, c'est magnifique! C'est les marges ou le padding que tu règle avec top, right, etc?