1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Pas du javascript! dynamic css + boxing width css

Pas du javascript! dynamic css + boxing width css

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 390 fois - Téléchargée 29 fois

Commenter

Contenu du snippet

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 / Exemple : 


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


<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp>

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

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

A voir également

Ajouter un commentaire Commentaires
bob3000 Messages postés 406 Date d'inscription mardi 7 mai 2002 Statut Membre Dernière intervention 2 octobre 2004
3 juin 2003 à 03:17
ouais, lol
pyroflo Messages postés 323 Date d'inscription lundi 24 février 2003 Statut Membre Dernière intervention 17 mai 2005
1 juin 2003 à 23:23
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 !
bob3000 Messages postés 406 Date d'inscription mardi 7 mai 2002 Statut Membre Dernière intervention 2 octobre 2004
1 juin 2003 à 23:20
cest bon, bravo!

8/10
pyroflo Messages postés 323 Date d'inscription lundi 24 février 2003 Statut Membre Dernière intervention 17 mai 2005
28 mai 2003 à 14:24
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
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Deny)