28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème z-index ?? sous ie

Bonjour a tous , hé bien pour mon premier post, je soulève un problème Smiley smile
Dans le cadre d'un projet de développement d'une galerie photo, développé en div+css et basé sur AJAX + php , j'ai un souçis dans la mise en forme , sous firefox , la barre arrondit de droite apparait corectement , mais sous ie , elle est caché derrière la div conteneur...
voila si quelqu'un pouvais m'aider a résoudre ce "petit" souçis Smiley smile

addresse du site : http://istrion.webdynamit.net

le css est contenu dans le code source pour le moment Smiley cligne
Modifié par istrion (24 Dec 2005 - 09:32)
Salut,
Deja pour te faciliter le travail et gagner en poid et lisibilité,
tu devrais utiliser les formes courtes des styles et mettre tes styles dans un odre plus logique:



#conteneur {
	POSITION: absolute; 
	BORDER-RIGHT: #333333 1px solid; 
	BORDER-TOP: #333333 1px solid; 
	BORDER-BOTTOM: #333333 1px solid; 
	BORDER-LEFT: #333333 1px solid; 
	BACKGROUND-POSITION: center 50%; 
	LEFT: -475px; 
	BACKGROUND-IMAGE: url(gabary_2/fond_conteneur.png); 
	MARGIN-LEFT: 50%; 
	WIDTH: 950px; 
	BACKGROUND-REPEAT: repeat-y; 
	BACKGROUND-COLOR: #e2e2e3
}



équivaut à :



#conteneur {
	POSITION: absolute; 
	LEFT: -475px; 
	MARGIN-LEFT: 50%; 
	BORDER: #333 1px solid; 
	WIDTH: 950px; 
	BACKGROUND: #e2e2e3 url(gabary_2/fond_conteneur.png) center 50% repeat-y;  
}



Nombre de déclarations divisé par 2!
Modifié par Hermann (23 Dec 2005 - 19:38)
Je sais pas comment tu t'es demerder mais le calque de la barre de droite ne s'affiche pas. et puis ton code css est franchement mal foutu (pkoi une marge negative sur le conteneur?)
là je peux pas t'aider, essayes de trouver la solution toi-même c'est utile parfois.
Modifié par Hermann (23 Dec 2005 - 19:50)
bonsoir,

en minuscules, svp. développez vos css en minuscules.

il y a bcp de cas où ce n'est pas nécessaire, comme css pour ce qui dépend d'elle. sauf que vous allez tomber fatalement un jour sur ce qui ne dépend pas de css, le jour où vous n'allez plus y penser. et vous allez y perdre bcp de temps...

<edit>ceci était un message minuscule</>
Modifié par Laurent Denis (23 Dec 2005 - 20:11)
yop droit de réponse lol
pour commencer , chose étrange , mon css ne corespond pas a ce que Hermann a coller :
a écrit :

#conteneur {

POSITION: absolute;

BORDER-RIGHT: #333333 1px solid;

BORDER-TOP: #333333 1px solid;

BORDER-BOTTOM: #333333 1px solid;

BORDER-LEFT: #333333 1px solid;

BACKGROUND-POSITION: center 50%;

LEFT: -475px;

BACKGROUND-IMAGE: url(gabary_2/fond_conteneur.png);

MARGIN-LEFT: 50%;

WIDTH: 950px;

BACKGROUND-REPEAT: repeat-y;

BACKGROUND-COLOR: #e2e2e3

}


de mon coté , je l'ai codé comme ceci :
a écrit :

#conteneur{
position:absolute;
width:950px;
margin-left:50%;
left:-475px;
background-color:#E2E2E3;
background-image:url(gabary_2/fond_conteneur.png);
background-position:center;
background-repeat:repeat-y;
border:1px solid #333333;
}


1ere chose bizare...
2 eme chose pour herman, j'utilise une marge négative pour centrer mon conteneur sur les different navigateur ( source alsacreation ! )
3 eme poitn toujours pour herman , c'est justement la mon problème , la barre arrondit de droite n'apparait pas sour internet explorer ...

4eme point , il n'y a aucune majuscule dans mon css Smiley biggrin

voila problème toujours en cours ^^
Hermann sera maudit pour l'éternité.

On répandra du sel sur sa terre, et tout ça.

L'inventeur des majuscules : on les lui coupera, pour faire plus simple.
Modérateur
bonjour,
vue que tes "boites arrondis sont positionné en absolue, tu peux les placé a n'importe quelle endroit dans le "html" (dans le conteneur de reference de positionnemnent : #conteneur).
et en ecrivant ton html comme ceci, tout devient visible.
...extrait.....<body >
<div id="conteneur">
<div id="menu_gauche">
<script type="text/javascript" src="http://logo.webdynamit.net/?choix=37&amp;login=istrion"></script>
<div id="barre_arrondis_gauche"></div>
<div id="barre_arrondis_droite"></div>
....

!? voilou.
Génial merci a toi , je n'avais pas pensé du tout a le mettre a cet endroit...
je viens la par mm occasion découvrir que la position absolute s'appliquait donc par rapport au l'élément qui le contient le plus "haut" ...

voila sujet règlé ^^
Salut Istrion,
En effet, désolé d'avoir préjugé de l'inutilité du LEFT négatif puisque c'est à peu prés la même méthode qui est utilisée pour le centrage vertical.
(top: 50%; margin-top: moitié de la hauteur du div conteneur)
Mais pourquoi ne pas utiliser plus simplement les mages latérales auto avec un text-align center sur le body? la méthode classique quoi. D'autant plus que Mac IE (certe amené à disparaître) ne supporte pas les marges négatives.

La position absolute se réfère au premier block parent positionné (excepté la position static) mais pas forcément par rapport au premier block positionné placé le plus haut dans l'arborescence.

Bonnes fêtes!
Modifié par Hermann (24 Dec 2005 - 11:03)
Sujet clos
Aller à