28220 sujets

CSS et mise en forme, CSS3

J'ai commencé à refondre mon site créé avec dreamweaver en frames en utilisant la technique des css (je viens d'ailleurs de recevoir le trés bon livre de raphael goetter) .
Peu à peu ,je suis parvenu à retranscrire mes gabarits qui sont impeccables sous konqueror le navigateur linux .
Heureux mais méfiant je teste mes pages sous internet explorer et la patatras la propriété "position fixed" n'étant pas reconnue tout est superposé!!!
Comme je n'ai quand méme pas que ça à faire,je voudrais savoir si il est vain de s'entéter à créer un gabarit Smiley ohwell header fixe /page déroulante/footer fixe avec des css et reconnus par tous les navigateurs a peu prés correctement ?
Voici mon style css de fausse frames actuel :

div.haut {width:100%;height:7%;position:fixed;top:0px;left:0px;
text-align:center;
padding: 00px;
}
div.frametexte {width:100%;height:70%;position :fixed;top:50px;left:0px;overflow:auto;
}
div.framegalerie {width:100%;height:70%;position :fixed;top:50px;left:0px;Text-align:center;}
div.bas {width: 100%;height:23%;position :fixed;bottom:0px;left:0px;
background-color:transparent ;
text-align:center;
}

Impatient de vous lire ...
Modifié par yves (23 Nov 2005 - 20:38)
Modérateur
Bonjour Yves,

Merci de bien vouloir éditer ton message et baliser ton code tel qu'indiqué dans les aides/règles du forum.

Règle 13 a écrit :

Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié

Modifié par Merkel (06 Oct 2005 - 19:39)
Mes excuses pour l'oubli de #code# ;
Le gabarit correspond tout à fait à ma recherche !!
Deux questions :
1:ou est le code ?
2:est il compatible internet explorer (qui reste malgré tout incontournable si je m'en référe à l'analyse xiti de mon site....)
A +
Modérateur
yves a écrit :

1:ou est le code ?


Clique droit sur le document, code source (selon ton navigateur web)

yves a écrit :

2:est il compatible internet explorer (qui reste malgré tout incontournable si je m'en référe à l'analyse xiti de mon site....)


Oui. Pourquoi ne pas le tester ? Tu aurais tout de suite ta réponse.
Smiley cligne
J'ai enfin pris le temps de m'attaquer à mes pages .
Je viens d'appliquer le gabarit préconisé mais un tout petit probléme innatendu subsiste :
Ma partie scrollable sous Firefox est scrollable avec la fléche vers le haut mais pas avec la fléche vers le bas .....(par contre ok avec la mollette) ...
les styles utilisés :


.fonddigiscopie {
width:100%;height:100%;margin:0;padding:0;
background-color:#DDF5E5 ; 
}

div.conteneur {/*le conteneur global du site qui sera centré */ width:95%;height:95%;position:absolute;}

div.haut {width:100%;height:50px;
/*position:fixed;top:0px;left:0px;
text-align:center;
padding: 00px;*/
}

div.frametexte {position:absolute;left:0;width:100%;height:70%;overflow:auto;

div.bas {width: 100%;height:100px;position :absolute;bottom:0px;left:0px;
background-color:transparent ;
text-align:center;
}

.navigtexte
a.oeuf1 { /* définition de la classe "image" de la balise <a> */
     position:absolute;
     Left:30%;
     top:20px;
     display: block; /* la balise a doit être en bloc */
     width: 100px; /* largeur de l'image réactive */
     height: 100px; /* hauteur de l'image réactive */
     background-image: url(../egg/egg1off100.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
         
 a.oeuf1:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(../egg/egg1doss100.gif); /* source de l'image d'arrivée */
     } 


Mes balises <html> :


<body class =" fonddigiscopie" >
	<div class =" conteneur">
	<div class="haut" >
</div>
       
	
	<div class="frametexte">
<div class="pagetexte">
</div>
        </div>

	
	<div class="bas" >
	<div class="Navigtexte">
</div>
	</div>
	</div>

	</body>
	</html>


Avez vous une idée ?
Je vais essayer le test W3c pour voir
Modifié par yves (20 Nov 2005 - 21:03)
Administrateur
Salut Yves,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne
Bonsoir,que des bonnes nouvelles :
Mes pages sont validées par W3C et en plus le scroll fonctionne bien sous Firefox !
Il s'agissait sans doute d'une mauvaise initialisation de fenétre Xwindow pendant mon test malheureux ....
Je vous avoue que je préfére ça !

Ps:en plus j'ai obéi à l'injonction du modérateur et trouvé les dalises code et je vais méme marquer ce post comme résolu .Décidemment on s'améliore webistiquement parlant !
Smiley cligne