Pas du javascript! dynamic css + boxing width css

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 141 fois - Téléchargée 27 fois

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

ouais, lol
pyroflo
Messages postés
323
Date d'inscription
lundi 24 février 2003
Statut
Membre
Dernière intervention
17 mai 2005

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

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

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

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.