28220 sujets

CSS et mise en forme, CSS3

[Résolu] Bloc en absolute avec largeur relative

Bonjour,

Je souhaiterais centrer un bloc en position:absolute et lui mettre une hauteur minimale de 100%. Donc je procède ainsi :
<div id="bloc"></div>

html, body
{
	margin: 0;
	padding: 0;
	height: 100%;
}
#bloc
{
	position: absolute;
	left: 10%;
	right: 10%;
	width: 80%;
	height: 100%;
	background-color: gray; /* Juste pour voir si le bloc fait bien ce qu'on lui demande */
}
html>body #bloc
{
	height: auto;
	min-height: 100%;
}

Ceci fonctionne très bien : http://nyro.xeo.online.fr/SdZ/code.php?action=1&id=27

Passons maintenant à un autre problème : je souhaiterais centrer un bloc, mais lui mettre une largeur relative (em) de sorte à ce que lorsque j'agrandis la police, le bloc s'agrandisse aussi. De plus, je voudrais également qu'il soit à une hauteur minimale de 100%. Je procède ainsi :
html, body
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
#bloc
{
	min-width: 600px;
	max-width: 99%;
	width: 46em;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	height: 100%;
	background-color: gray;
}
html>body #bloc
{
	height: auto;
	min-height: 100%;
}

Donc : http://nyro.xeo.online.fr/SdZ/code.php?action=1&id=28
Alors déjà là, il y a un petit problème : Sous Opera, il ne semble pas prendre en compte la propriété min-height. Lorsque je rétrécis la police, le bloc se rétrécit avec. De même pour max-width. Mais bon je crois que c'est un bug de mon Opera parce que lorsque je vais ailleurs et que je reviens sur Opera, le problème est "réglé". Enfin bref, au cas où ce serait pas moi qui me trompe...

Maintenant, passons à un troisième problème : je souhaiterais "mélanger" les deux. C'est-à-dire pouvoir mettre un bloc en position:absolute, le centrer, définir la taille en 'em' afin que lorsque j'agrandisse la police, le bloc augmente aussi jusqu'à atteindre 100% de la largeur.

Alors j'ai fait ceci :
html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body
{
	margin: auto;
	width: 46em;
	background-color: red;
	min-width: 600px;
	max-width: 100%;
}
#bloc
{
	text-align: left;
	position: absolute;
	width: 46em;
	min-width: 600px;
	max-width: 99%;
	background-color: Gray;
	height: 100%;
}
html>body #bloc
{
	height: auto;
	min-height: 100%;
}

Lien : http://nyro.xeo.online.fr/SdZ/code.php?action=1&id=29

Et là, en testant avec Opera, il semblerait qu'à partir de 200% de la taille, il ne respecte plus le max-width.

Sinon, avec Internet Explorer, ça fonctionne avec la version 6, mais y a-t-il un problème avec les versions antérieures ? Et si oui, comment le régler ? Puisqu'on ne peut appliquer un text-align à la balise <body> même, non ? Ou alors en mettant text-align à <html> ? Bref, je ne sais pas...

Merci d'avance Smiley smile

PS: Je signalerai que le long du développement de mon post, j'ai trouvé les solutions au fur et à mesure. C'est pour ça que ce sujet peut vous paraître peut-être un peu... "long pour rien" Smiley langue
Modifié par Nyro Xeo (22 Apr 2005 - 22:02)
Je ne suis pas sur d'avoir compris tout le problème mais bon Smiley langue

S'il s'agit de centrer un bloc dont la largeur est donné en em et qui quand on agrandit la taille du texte n'excède pas la largeur de l'écran, alors la solution c'est


body {
text-align:center;
}

#bloc {
width:45em;
margin:auto;
}

body>#bloc {
width:auto;
max-width:45em;
}


ça fonctionne aussi bien avec opera et geckos.

Pour IE le problème est différent étant donné son peu de possibilité d'agrandissement.

++
Ouais bon en fait, j'ai plus de problème, je les avais déjà tous réglé lors de la rédaction de mon post. Merci quand même Smiley smile
Sujet clos
Aller à