28221 sujets

CSS et mise en forme, CSS3

Voir l'exemple : http://ppzx.net/divers2.php
1 - Je n'arrive pas à mettre le texte sur les 2 images (en haut à gauche) et (en bas à droite) quand ils sont superposés. Voir photo d'écran ci-joint.
Avez-vous une idée de mes erreurs ?

2 - Les images sont «fixées» chez la famille Mozilla, IE 5.2 Mac et Safari. Toutefois j'ai vu sur un IE avec windows (à la bibliothèque) que rien n'était fixé.
Quelqu'un sur windows et IE voudrait-il le vérifier ? upload/684-test77.jpg
Modifié par pierreandre (14 Feb 2005 - 18:38)
1 - Pour appliquer la propriété z-index à un élément, ce dernier doit être positionné.

.centre, centregrande, liens, legendelien { 
   [#blue][b]position: relative; [/b][/#]
   width: 43em; 
   margin: 0% 17% 0% 17%;  
   background-color: #EEEEEE; 
   text-align: center; 
   z-index: 1; 
}

2 - IE/Win a des difficultés avec position: fixed;
Deux pistes de solution. Je n'ai malheureusement pas de liens en français sous la main.

Une solution profitant du sélecteur universel : EmulatingFixedPositoning
Une autre utilisant "expression" (langage propriétaire Microsoft) : Making Internet Explorer 5.5+ use position: fixed;

<edit />
Curieux, je n'obtiens pas le même résultat quand je regarde ta page en local Smiley confus

<re-edit />
Les déclarations suivantes sont erronées (ou inutiles?) :

body {  
   font: 10pt/12pt "Trebuchet MS", Verdana, Arial, Sans-serif; 
   color: #660000; 
   background: #EEEEEE [#red][b]url(cite22.jpg)[/b][/#]  bottom right no-repeat;
   width: 100%;  
}

.menugauche { 
   position: absolute; 
  background: #EEEEEE  [#red][b]url(oiseaux.gif)[/b][/#]  top left no-repeat;
   left: 10px; 
   top: 190px; 
   text-align: right; 
   width: 15%; 
}

Ces images étant à la racine du site et style.css logeant dans un répertoire nommé "css", elles ne sont pas chargées.
Les images que l'on peut voir sont celles codées en dur dans le HTML (et non celles du fichier CSS).

Pour voir de quoi je parle précisément, essais :

body {  
   background: #EEEEEE url([#blue][b]../[/b][/#]cite22.jpg) bottom right no-repeat; 
}

.menugauche { 
   background: #EEEEEE url([#blue][b]../[/b][/#]oiseaux.gif) top left no-repeat; 
}

Modifié le 08 Feb 2005 - 07:25
Ah ben vraiment Stephan, je te trouve très fort !

Ma maudite erreur d'enfant d'école empêchaient les images d'être liées à la CSS. J'ai corrigé.
Ça résoud un GROS problème d'allègement des pages et de la transparence de ces «foutues» images sur lesquelles j'ai «taponné» des heures sans rien comprendre.
Je reprends ça demain (2h17 heure locale) et je te remercie bien gros.

À demain, pierreandre Smiley biggrin
Bonjour à tous,

Je remercie beaucoup Stephan dont les conseils avisés et excellents m'ont permis de comprendre et d'appliquer transparence et éléments fixes.

Cependant, comme IE réagit différemment et que j'ai certains enfants qui l'utilisent, je reviens à mon départ tout en corrigeant plusieurs grosses erreurs de codages(sans compter celles que je n'ai pas vues !).

Pour conclure, je crois que l'efficacité, la beauté, etc. des résultats obtenus par les CSS et les logiciels qui respectent les normes du web, évidemment en excluant IE, révolutionneront le web et ceux qui ne vivent que pour l'argent.

Cela me fait penser aux voitures à traction avant qui ont eu beaucoup de difficulté à s'implanter en amérique du nord, où les fabricants faisaient des affaires d'or avec des concepts dépassés. Ou, encore à la bataille financière entre les modes beta et vhs où, cette fois, la médiocrité technique appuyée par l'argent et l'ignorance de beaucoup de gens, a permis d'imposer au monde une médiocrité de plus !

J'éviterais de parler des résultats d'élection qui suivent ce même modèle...
Amitiés, pierreandre
Modifié par pierreandre (14 Feb 2005 - 18:39)
Bonsoir Pierre-André,

Un peu HS, mais tu n'oublies pas ton xhtml 1.1 qu'il faudrait transformer un de ces jours en 1.0 éventuellement. Smiley cligne

Amitiés,
Igor
Finalement j'ai résolu d'une autre façon la transparence sur deux fonds (à gauche) :
http://www.ppzx.net/galeries.php

Sauf que IE 5.2 mac poussait mon texte à droite !!!

*{margin:0; padding:0; border:0;}
....

.menugauche
		   {
		   background             : #FAFAD2 url(../fond_degrade.gif) repeat-y left;
           position               : absolute;
           left                   : 0;
           top            		  : 0;
           text-align             : right;
           width                  : 135px;
           height                 : 120em;
		   }	
		   
.menugauche p
		   {
                   [b]«position       : abosolute»[/b] à ajouter
		   margin-top			  : 190px;
		   left                   : 0;
		   font           		  : 10pt/12pt "Trebuchet MS", Verdana, Arial, Sans-serif;
           color                  : #660000;
           text-align			  : right;
       	   line-height			  : 18px;
       	   width                  : 125px;
       	   }
       	   
.oiseaux
		   {
		   background			  : transparent url(../ois77.gif) no-repeat top left; margin-top: 0; width: 106px; height: 220px; float: left;
		   } 

il suffisait donc d'ajouter «position: absolute» comme solution.

Je souhaite que cet exemple économisera la «mauvais humeur» et la perte de temps de nombreux débutants.
Amitiés, pierreandre
Modifié par pierreandre (14 Feb 2005 - 20:28)