28172 sujets

CSS et mise en forme, CSS3

Centrer un élément et griser le fond

Bonjour,

J'ai lu les tuto mais je ne parviens pas à centrer un div verticalement et horizontalement sur une page web.

Voici la page de test : http://www.voilou.fr/contact.html

Le code css:

<style>
<!--
.test{
	position: absolute; 
	text-align:center;
    left: 50%;  
    top: 50%; 	
	width: 270px;
	height: 80px;
	/*margin-top: 40px;  moitié de la hauteur */ 
	/*margin-left: 135px;  moitié de la largeur */
        margin-left: auto; 
        margin-right: auto; 
	color: black; 
	font-size: x-large;
	background-color:#9CF;
	 border: 1px solid #000; 
	}
-->
</style>


Pourquoi est ce pas centré?

De plus, j'aurai aimé griser le fond du site...Après recherche cela se ferai avec opacity, mais ce n'est pas compatible IE...donc quel moyen y a t il?

merci
Bonsoir,

J'espère que le lien que tu as indiqué plus haut n'est pas le bon ! car en cliquant dessus, j'obtiens une page sans style avec un "chargement en cours" (rectangle à fond bleu) qui dure depuis environ 10 minutes… Je crois que la question ne résoudra pas le problème.
Re..

La page est la bonne..c est juste une page de test..Je dois rajouter le style de la page?

Je suis justement en train de travailler sur le rectangle à fond bleu...c'est normal qu'il ne disparait pas car je n'ai pas codé la partie JS. Ce que je veux dans un premier temps c'est rendre fonctionnel mon idée : faire en sorte que le fond du site soit "grisé" lorsque la box est affichée, et centrer cette box...

merci
Voila Smiley smile

Oui désolé de m'être un peu mal exprimé..mais je pensais que j'avais pas besoin de faire une belle page pour juste un chtit test Smiley smile

Je pensais que moins de code il y a et moins il y a d'embrouilles possible Smiley smile
Je suis d'accord avec toi, quand on soumet un exemple il est meilleur de le "dégrossir" de tout superflu. Ça n'oblige pas pour autant d'ôter les éléments essentiels à l'analyse.

<edit
t'es allé voir mon lien du précédent post ?
/>
Modifié par Aureance (17 Jan 2010 - 19:53)
J'ai regardé mais je ne comprends pas tout, tes images ne sont pas accessibles, puis tu as x popup.js qui sert à je ne sais quoi...

J'ai réussi à centrer ma box, mais sous IE ca bug: 

.test{ 
    position: absolute;  
    left: 50%;   
    top: 50%;      
    width: 270px; 
    height: 80px; 
    margin-top: -40px; 
    margin-left: -135px;
    color: black;  
    font-size: x-large; 
    background-color:#9CF; 
     border: 1px solid #000;  
    }


resultat internet explorer :

<modération par Heyoan : comme tu l'as sans doute remarqué, ton énorme image explose la mise en page du forum. Penser à l'option "Générer un aperçu" />

Comment remédier à ce bug?
merci
Modifié par Heyoan (18 Jan 2010 - 00:03)
Le x-pop-up.js, je ne m'en sert pas, il est présent dans tous sites que je démarre (ça sert juste à ouvrir un lien dans une nouvelle fenêtre centrée si j'en ai besoin) - Le fond gris est du aux CSS et le changement vient d'une réécriture du css par php.

Sur Safari et Firefox tout se passe bien, tout est bien centré, mais sur Opera, j'ai le même bug, décalage, que toi avec IE.
Ça ne devrait pas être trop grave… mais là je vais me coucher. Salut a+
Modifié par Aureance (17 Jan 2010 - 23:12)
En fait j'ai fermé la balise img et ca bug plus Smiley smile

J'ai juste un prob d'opacité...

Voici le css:

Code : CSS
  <style>
<!--
.test{ 
    position: absolute;  
    left: 50%;   
    top: 50%;      
    width: 270px; 
    height: 80px; 
    margin-top: -40px; 
    margin-left: -135px;
  color: black;  
    font-size: 18px; 
    /*background-color:#F5F5F5; */
	background-image:url(/bgbox.png);
    border: 1px solid #000;  
	text-align:center;
    }
	
.opacite
{
filter:alpha(opacity=35);
opacity:0.35;
-moz-opacity:0.35;
}  	
-->
</style>


et voici le rendu :

upload/18413-bugIE.jpg

Comme vous voyez, sur firefox, la box est aussi touchée, mais pas sur ie..pourquoi?

Lien test : http://www.voilou.fr/contact.html

merci
C'est le comportement normal d'opacity et -moz-opacity, tout ce qui est à l'intérieur d'un élément ainsi stylé devrait être touché. Ça le fait aussi sur Safari.

Tiens au fait, ce midi j'ai eu le temps de faire l'exercice et je l'ai mis en ligne (il faut que j'enlève le lien que j'ai mis plus haut car c'est sur le site d'un client).
Voici l'adresse : Centrer un élément au premier plan et griser le fond.
Sujet clos
Aller à