Je commence en CSS et j'ai besoin de votre perspicacité pédagogique
http://www.mathiasdaval.com/
L'idée est que lorsque la souris passe sur l'un des boutons du haut, le texte apparaisse dans le div du milieu.
Mais j'aimerais que cela fonctionne quelle que soit la résolution, et j'ai du mal avec les ajustements relatifs/absolus.
Par ailleurs, j'ai testé sur cette page l'inclusion d'un petit javascript qui permet un drag & drop des boutons. Ca marche impec' sur FF, mais sur IE, lorsque je bouge un bouton, alors le hover CSS ne fonctionne plus. Des idées ?
Enfin, d'une façon, générale, le code html/css vous paraît-il correctement écrit ?
Merci par avance !
Code : Tout sélectionner
#top {
height: 200px;
background:#DDD url('/images/bg.png') repeat-x;
margin: 0 auto;
}
#title {
height: 120px;
background: #FFF;
padding: 10px;
}
#main {
height: 400px;
background:#DDD url('/images/bg.png') repeat-x;
}
#bottom {
height: 55px;
background: #666666;
padding: 10px;
text-align: center;
}
.front_title {
font-family: Impact;
font-size: 65px;
font-weight: none;
color: #000;
text-decoration: none;
margin: 0 10% 0 10%;
padding: 2px;
text-align: center;
position: relative;
}
.front_title span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
.front_title:hover {
background: none;
z-index: 1;
}
.front_title:hover span, .front_title:focus span{
overflow: visible;
top: 70px;
left: 490px;
background: white;
font-size: 32px;
color: #7B9BDF;
white-space: nowrap;
position:absolute
}
#storytelling, #web, #audiovisuel {
padding: 2px;
position: relative;
}
#storytelling {
color: #FF0099;
top: -230px;
left: 160px;
}
#web {
color: #999;
top: -330px;
left: 480px;
}
#audiovisuel {
color: #0066FF;
top: -450px;
left: 760px;
}
#storytelling span, #web span, #audiovisuel span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
#storytelling:hover span, #web:hover span, #audiovisuel:hover span {
position: fixed;
overflow: auto;
display:block;
top: 360px;
left: 350px;
padding: 30px;
width:850px;
height:400px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
letter-spacing: 0.15em;
text-align: justify;
/*color: #7B9BDF;*/
color: #006699
}
.copyright {
font-family: Arial;
font-size: 14px;
font-weight: none;
letter-spacing: 2px;
color: #FFF;
text-decoration: none;
}
.contact {
font-family: Arial;
font-size: 1em;
font-weight: none;
letter-spacing: 2px;
color: #FFF;
text-decoration: underline overline;
}Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Edysseus Consulting</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<div id="top"></div>
<div id="title">
<a href="#"><div class="front_title">Edysseus Consulting<span>storytelling web / vidéo / audio</span></div></a>
<div id="storytelling"><img id="img_storytelling" src="images/button.gif" border="0" onmouseover="document.getElementById('img_storytelling_ro').style.display='';document.getElementById('img_storytelling').style.display='none';" /><img id="img_storytelling_ro" src="images/button_ro.gif" border="0" onmouseout="document.getElementById('img_storytelling').style.display='';document.getElementById('img_storytelling_ro').style.display='none';" style="display:none;" /><span><p><strong>Le storytelling, c'est la scénarisation du contenu.</strong></p><p>Pourquoi le concept de storytelling est-il devenu aussi populaire ces dernières années à la fois dans les univers politiques, économiques et culturels ?</p><p>Parce que l'expérience prouve que c'est <strong>l'approche la plus efficace</strong> pour communiquer un contenu au public et pour capter son attention. Le storytelling joue sur les mêmes procédés qu'un roman ou film : il utilise des <strong>techniques narratives</strong> qui permettent de véhiculer de façon beaucoup plus riche un message.</p><p>Créer et utiliser un contexte scénarisé, même fictionnel et éloigné de la réalité, favorise un <strong>principe d'identification</strong> de la cible à l'histoire qui lui est racontée. Chaque entreprise, chaque marque, comme chaque individu, possède son histoire et des valeurs qui lui sont associées. Edysseus Consulting commence par intégrer ces valeurs afin de proposer le meilleur moyen de les décliner sur le web et les nouveaux médias.</p></span></div>
<div id="web"><img id="img_web" src="images/button1.gif" border="0" onmouseover="document.getElementById('img_web_ro').style.display='';document.getElementById('img_web').style.display='none';" /><img id="img_web_ro" src="images/button_ro1.gif" border="0" onmouseout="document.getElementById('img_web').style.display='';document.getElementById('img_web_ro').style.display='none';" style="display:none;" /><span><p>Si le <strong>storytelling existe depuis toujours</strong> et est fortement présent dans toutes les cultures (depuis les histoires racontées au coin du feu jusqu'aux publicités à la télévision en passant par les spectacles vivants traditionnels), le web lui apporte une dimension nouvelle.</p><p>Le web storytelling, c'est utiliser la technologie, notamment dite du "web 2.0", pour créer et mettre en valeur le contenu proposé par une entreprise, une marque, une institution.</p><p>Il existe plus de <strong>70 outils</strong> différents permettant de raconter une histoire sur le web. Ils reposent sur deux principes essentiels, apportés par le web 2.0 : le <strong>microcontenu</strong> (microcontent) et le <strong>réseau social</strong> (social networking). Le microcontenu est la publication de contenus courts, très lisibles et facilement échangeables : commentaire sur un article de blog, post sur un forum, message sur Twitter. Le réseau social est une communauté d'échanges facilités par des outils d'utlisation simplifiée : Facebook, MySpace, mais aussi les les sites de partage de vidéos, de photos.</p></span></div>
<div id="audiovisuel"><img id="img_audio" src="images/button2.gif" border="0" onmouseover="document.getElementById('img_audio_ro').style.display='';document.getElementById('img_audio').style.display='none';" /><img id="img_audio_ro" src="images/button_ro2.gif" border="0" onmouseout="document.getElementById('img_audio').style.display='';document.getElementById('img_audio_ro').style.display='none';" style="display:none;" /></div>
</div>
<div id="main"></div>
<div id="bottom">
<div class="copyright">(c) 2009 Edysseus Consulting<p class="contact">Contact / Mentions légales</p></div>
</div>
<script type="text/javascript">
<!--
SET_DHTML(CURSOR_MOVE, "storytelling"+TRANSPARENT, "web"+TRANSPARENT, "audiovisuel"+TRANSPARENT);
//-->
</script>
</body>
</html>