28173 sujets

CSS et mise en forme, CSS3

CSS et <?php include

Bonjour,

Sans détour, j'aimerais remplacer mes scripts SwapImage (sont-il acceptés par le W3C?) par du beau CSS en :hover.
Lorsque j'essaie à blanc tout fonctionne, le hic est que j'aimerais travaillé en <?php include.
Sachant qu'il y a un style global déjà appliqué pour la page sur la page principal du type <div class=1> <?php include... </div>, si le style CSS est écrit sur la page à inclure, il n'est pas pris en compte sur la page principal et je ne vois pas comment inclure les nombreux styles (1 par image rollover) sur la page principal.

Une âme généreuse pour essayer de me comprendre ?

Excusez pour la clarté modeste de ce message mais soyez indugent c'est mon premier post Smiley biggrin
Salut,

Bienvenue sur le forum puisque c'est ton premier post Smiley smile

Tu devrais reformuler ta question parce que là je n'ai rien compris Smiley cligne

Et puis un petit peu de code aussi... Smiley fut
Modifié par Christian Le Bouler (02 Jul 2007 - 23:21)
Si j'ai bien compris, tu as une page dotée d'une feuille de style (a.php) dans laquelle tu incorpores du contenu (b.php) par un include. Dans ce contenu importé tu as des événements JS que tu veux remplacer par des événements CSS.
Si tu crées des styles spécifiques à ce contenu directement dans sa page (b.php), ils risquent d'entrer en conflit avec ceux de a.php...
C'est ça la question ?

Variante : Tu as créé des styles dans b.php décrivant le rollover des images. Cette page b.php étant incluse dans une <div> de a.php tu te demandes comment affecter ces styles dans la CSS principale (celle de a.php) ?

Si c'est ça, essaie
div#nomdelaDiv a:hover { ... }
Modifié par Arsene (03 Jul 2007 - 09:36)
Merci pour votre réactivité,
Voici un ti peu de code pour je l'espère éclairé le sujet Smiley sweatdrop
Page à inclure avec le style css inclus (nommé b.php) code COMPLET ci-dessous :


<style type="text/css">

A.rollover {
     width: 20px;
     height: 20px;
     background: url(Images/boutons/o1.PNG);
     border: 0;
}
A.rollover:hover {
     background: url(Images/boutons/o11.gif);
}

A.rollover1 {
     width: 18px;
     height: 19px;
     background: url(Images/boutons/o2.PNG);
     border: 0;
}
A.rollover1:hover {
     background: url(Images/boutons/o21.PNG);
}

A.rollover2 {
     width: 20px;
     height: 20px;
     background: url(Images/boutons/o3.PNG);
     border: 0;
}
A.rollover2:hover {
     background: url(Images/boutons/o31.PNG);
	 }
</style>
<!-- Preload de la 2e image, là aussi uniquement en CSS -->
<a class="rollover" href="http://www.blabla.bla/" target="_blank"></a>&nbsp;
<a class="rollover1" href="http://www.blabla2.bla/" target="_blank"></a>&nbsp;
<a class="rollover2" href="http://www.blabla3.bla/"
target="_blank"></a>


Page principale (nomée a.php) où sera affiché b.php :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="/CSS/global.css" (ou se trouve le style "XY") rel="stylesheet" type="text/css">
<title et meta....>
</head>
...
<div class="XY">
<?php include("b.php"); ?>
</div>
...
</body>
</html>

Donc le soucis est que j'aimerais que les "rollover" soit considéré dans ma page principale a.php et je ne vois pas comment faire d'autre...

merci encore

Question bonus :
Peut on tout se permettre avec du php include (j'ai rassemblé du javascript dans une page nommée php.php et je l'appel sur chacune de mes pages dans la balise <head> et cela semble fonctionné sur toute les plateformes...)
Modifié par sebest777 (04 Jul 2007 - 00:49)
Salut,

trop crevé por répondre vraiment, mais bon...

Vu ton code tu vas te retrouver avec un :

<style type="text/css">

</style>


Dans le body de ton document.

Et ça ne va pas du tout, et en plus il y assuremment moyen de s'y prendre facilement autrement.

Donc essaye de décrire plus précisemment ce que tu veux obtenir.

Pour l'instant je pense qu'il y a un problème de compréhension du processus de l'include php.

A titre d'exemple l'include n'inclut pas du tout des pages mais seulement du code source.
Modifié par Christian Le Bouler (03 Jul 2007 - 23:31)
Salut,

sebest777 :
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

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Modérateur
bonjour/bonsoir

la balise style comme dit precedement fonctionnera mais ne permettra pas forcement de regler tout tes soucis si tu ne cible pas correctement les zones ou tu veut appliquer ce css supplementaire.

a écrit :
<div class="XY">
<?php include("b.php"); ?>
</div>

extrait de ta page .

en accedant aux element de l'include par le biais de div.XY tu peut charger ta feuilles de styles pour b Dans le head de a.

explication sommaire :

a:hover {color:blue;}

puis pour les lien de l'include si tu veut les styler differement:

div.XY a:hover {color:darkgreen;} ce style ne sera pris en compte que dans le div.XY.

Intéresse toi au "selecteurs css" pour en comprendre le fonctionnement et ainsi cibler comme tu le veut tel ou tel portion de la page.

Tu peut ainsi donner une id differente a un conteneur global de tes includes

si tu appel un fichier php qui va te servir de fichier css , il est preferable d'indiquer le type de contenu dans le header du fichiers que tu renvoi , au risque , selon, l'hebergeur de voir ton fichier css ou js inactif , car considéré comme du texte .
exemple pour un fichiers css
header('Content-Type: text/css');

dans la partie php.

gc
Merci pour vos réactions et désolé pour ne pas avoir respecté toutes les règles du forum.

Je vous expose ci-dessous le code actuel complet, comme cela tout sera très clair:

Page header.php où j'aimerais remplacer les SwapImage par du CSS : 
<a href="index.php"><img src="Images/anim/logo_sint2.gif" alt="logo" name="logo" width="126" height="42 " border="0" align="baseline"onMouseOver="MM_swapImage('logo','','Images/anim/logo_sint.gif',0)" onMouseOut="MM_swapImgRestore()">
&nbsp;&nbsp;<img src="Images/loa.gif" width="417" height="20" align="absbottom">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="Images/boutons/outils.PNG" alt="outils" width="46" height="19" align="absbottom"> 
<img src="Images/boutons/o1.PNG" title="Ajouter ce site &agrave; vos favoris" alt="Ajouter ce site &agrave; vos favoris" name="o1" width="19" height="20" align="absbottom" onClick="javascript:bookmarksite(blabla', 'http://blabla.bla')"  onMouseOver="MM_swapImage('o1','','Images/boutons/o11.PNG',0)" onMouseOut="MM_swapImgRestore()">
<img src="Images/boutons/o2.PNG" title="Zone de téléchargement" alt="Zone de t&eacute;l&eacute;chargement" name="o2" width="18" height="19" align="absbottom" onClick="MM_openBrWindow('telecharge.php','','width=400,height=400')" onMouseOver="MM_swapImage('o2','','Images/boutons/o21.PNG',1)" onMouseOut="MM_swapImgRestore()"> 
<img src="Images/boutons/o3.PNG" title="Questions Fr&eacute;quentes (FAQ)" alt="Questions Fr&eacute;quentes (FAQ)" name="o3" width="20" height="20" align="absbottom" onClick="MM_openBrWindow('faq.php','','width=570,height=400')" onMouseOver="MM_swapImage('o3','','Images/boutons/o31.PNG',1)" onMouseOut="MM_swapImgRestore()">
<img src="Images/fonds/ligne1.PNG" width="755" height="3" align="texttop">



Page principale :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>blabla</title>
<meta name="keywords" content="blabla">
<META NAME="description" CONTENT="blabla">
<meta name="robots" content=" index, follow ">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php include("php.php"); ?>
<style type="text/css">
<!--
.style1 {color: #000000}
.style3 {color: #000000; font-weight: bold; }
.style7 {color: #999999}
-->
</style>
<link href="/CSS/global3.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style11 {
	font-size: 1em;
	color: #000000;
}
-->
</style>

</head>

<body onload="Msg_Init('ZONE');">

<div class="conteneur">
[#red]<div class="header">
<?php include("header.php"); ?>
</div>
[#black]
<div class="menu">
<?php include("menu.php"); ?>
</div>
<div class="frame">
  <div align="right" class="style7"><img src="/Images/anim/t_accueil.gif" width="70" height="16" align="absbottom"></div>
      blabla
    <span class="style3"><strong><u>EXCLUSIVITE&nbsp;:</u></strong></span><strong> <br>
  </strong>blabla</span>
</div>
<div class="footer">
<?php include("footer.php"); ?>
</div></div>
</body>

</html>

Question 1 : comment remplacer les swapImage par du css et qu'il soit considéré dans la page principal.
Question 2 : le swap image est il autorisé par le W3C

Merci encore de vous pencher sur mon problème.
Je fais des efforts mai j y arrive po Smiley bawling

Modifié par sebest777 (04 Jul 2007 - 22:16)
Bonjour,

Question bête c'est quoi du swapImage ? Une technique, un format, un langage, une fonctionnalité d'un éditeur etc. Smiley confused
Le Swap Image est un comportement que l'on retrouve sous dreamweaver :

Swap Image
The Swap Image action swaps one image for another by changing the src attribute of the img tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time).

Note: Because only the src attribute is affected by this action, you should swap in an image that has the same dimensions (height and width) as the original. Otherwise, the image you swap in appears compacted or expanded to fit the original image's dimensions.
Merci pour vos réponses, pour le site déjà créé je me suis permis de laisser les effets en javascript avec validation du W3C tout de même.
Le nouveau site créé hérite de "rollover" en forme de CSS qui fonctionne, donc Merci pour votre soutien.
Sujet clos
Aller à