begin process at 2012 05 28 14:16:17
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > PAS DU JAVASCRIPT! DYNAMIC CSS + BOXING WIDTH CSS

PAS DU JAVASCRIPT! DYNAMIC CSS + BOXING WIDTH CSS


 Information sur la source

Note :
7,5 / 10 - par 2 personnes
7,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Initié Date de création :28/05/2003 Date de mise à jour :28/05/2003 14:18:11 Vu :5 131
Auteur : Deny

Ecrire un message privé
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

Je ne sais pas où l'on peut poser ça sur Codes-Sources...
Nulle part apparemment !
Alors je vous le propose ici.
Donc comment changer le style de la div voisine en passant sur celle d'à coté ou sur un paragraphe (sans lien). Et comment mettre des bordures dans une bordure à coté d'une autre, le tout dans une globale !

a+

Source

  • <html>
  • <head>
  • <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
  • <META NAME="GENERATOR" CONTENT="UltraEdit-32">
  • <style type="text/css">
  • #dv1 {border : 5px darkblue solid;padding: 5px; background-color: #CFE6EE; font-size: 12px; font-family: Verdana; font-weight: 700; color: darkblue;}
  • #dv2 {border : 5px red solid; padding: 5px; background-color: #BBCFB8; font-size: 12px; font-family: Verdana; font-weight: 700; color: red;}
  • #pid1 {font-size: 12px; font-family: Verdana; font-weight: 300; color: darkblue;}
  • #pid2 {font-size: 12px; font-family: Verdana; font-weight: 300; color: red;}
  • #pid3 {font-size: 16px; font-family: Verdana; font-weight: 700; color: darkblue; font-variant: small-caps;}
  • #dv3 {border : 5px #FF6600 solid;margin: 8px 5px 5px 0px; padding: 8px;text-align: center;}
  • table {width:80%;background-color: yellow;border:8px green ridge;}
  • p {font-size: 12px; font-family: Verdana; font-weight: 700; color: darkblue;}
  • </style>
  • </head>
  • <body>
  • <div id="dv3">
  • <table>
  • <tr>
  • <td>
  • <div id="dv1" name="madiv1" onMouseOver="dv2.style.backgroundColor='#CFE6EE';" onMouseOut="dv2.style.backgroundColor='#BBCFB8'">
  • <p>Mon premier paragraphe</p>
  • <p>Mon deuxième</p>
  • </div>
  • </td>
  • <td>
  • <div id="dv2" name="madiv2">
  • <p id="pid1" name="monp1" onMouseOver="dv1.style.backgroundColor='#00FFFF';" onMouseOut="dv1.style.backgroundColor='#CFE6EE'">Mon premier paragraphe</p>
  • <p id="pid2" name="monp2" onMouseOver="this.id='pid3';dv1.style.borderColor='#00FFFF';" onMouseOut="this.id='pid2';dv1.style.borderColor='darkblue';">Mon deuxième</p>
  • </div>
  • </td>
  • </tr>
  • </table>
  • <p style="text-align: center">Sympa, non !<br>Oubliez pas de passer voutre souris sur les cellules et les mots des tableaux !<br>
  • Notez que l'on ne peut pas mélanger les id pour avoir un résultat tout à fait correct. <br>Pas de div dans une div pour une action sur la première, sinon l'action à lieu lors du passage sur la seconde.<br>A priori, ça dépend des cas !!!</p>
  • </div>
  • </body>
  • </html> 
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="UltraEdit-32">
<style type="text/css">
#dv1 {border : 5px darkblue solid;padding: 5px; background-color: #CFE6EE; font-size: 12px; font-family: Verdana; font-weight: 700; color: darkblue;}
#dv2 {border : 5px red solid; padding: 5px; background-color: #BBCFB8; font-size: 12px; font-family: Verdana; font-weight: 700; color: red;}
#pid1 {font-size: 12px; font-family: Verdana; font-weight: 300; color: darkblue;}
#pid2 {font-size: 12px; font-family: Verdana; font-weight: 300; color: red;}
#pid3 {font-size: 16px; font-family: Verdana; font-weight: 700; color: darkblue; font-variant: small-caps;}
#dv3 {border : 5px #FF6600 solid;margin: 8px 5px 5px 0px; padding: 8px;text-align: center;}
table {width:80%;background-color: yellow;border:8px green ridge;}
p {font-size: 12px; font-family: Verdana; font-weight: 700; color: darkblue;}
</style>
</head>
<body>
<div id="dv3">
<table>
	<tr>
		<td>
		<div id="dv1" name="madiv1" onMouseOver="dv2.style.backgroundColor='#CFE6EE';"  onMouseOut="dv2.style.backgroundColor='#BBCFB8'">
			<p>Mon premier paragraphe</p>
			<p>Mon deuxième</p>
		</div>
		</td>
		<td>
		<div id="dv2" name="madiv2">
			<p id="pid1" name="monp1"  onMouseOver="dv1.style.backgroundColor='#00FFFF';"  onMouseOut="dv1.style.backgroundColor='#CFE6EE'">Mon premier paragraphe</p>
			<p id="pid2" name="monp2"  onMouseOver="this.id='pid3';dv1.style.borderColor='#00FFFF';"  onMouseOut="this.id='pid2';dv1.style.borderColor='darkblue';">Mon deuxième</p>
		</div>
		</td>
	</tr>
</table>
<p style="text-align: center">Sympa, non !<br>Oubliez pas de passer voutre souris sur les cellules et les mots des tableaux !<br>
Notez que l'on ne peut pas mélanger les id pour avoir un résultat tout à fait correct. <br>Pas de div dans une div pour une action sur la première, sinon l'action à lieu lors du passage sur la seconde.<br>A priori, ça dépend des cas !!!</p>
</div>
</body>
</html>

 Conclusion

&lt;http://msdn.microsoft.com/library/default.asp? url=/workshop/author/dhtml/reference/dhtml_referen ce_entry.asp&gt;

Microsoft MSDN Library Dynamic HTML Voir aussi pour CSS et Javascript.

Quel niveau ? 1,2,3 ? ça dépend !


 Sources du même auteur

DHTML - MANIP CSS
OUVERTURE POPUP À URL ALÉATOIRE
Source avec Zip 96 SITES RÉPERTORIÉS : HTML, CSS, DHTML, JAVA, JAVASCRIPT, P...
BROWSER SNIFFER (RENIFLEUR)
Source avec Zip DHTML SCROLLTOP
Toutes les sources de Deny

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

Commentaires et avis

Commentaire de pyroflo le 28/05/2003 14:24:43

C'est bien !

Cependant je trouve que l'exemple que tu as mis est beaucoup trop chargé mais ce n'est qu'un exemple parmis d'autres, tu as bien fait de le mettre.

;)

@+

Pyroflo
http://www.abcpyro.fr.st

PS: 7/10

Commentaire de bob3000 le 01/06/2003 23:20:46

cest bon, bravo!

8/10

Commentaire de pyroflo le 01/06/2003 23:23:08

lol bob3000 ! Tu fais ta tournée du soir ??? Je viens de recevoir 4 mails comme quoi des commentaires avaient été ajouté.....tous de toi lool !

Commentaire de bob3000 le 03/06/2003 03:17:23

ouais, lol

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,562 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)