par
Cyrano » 25 janv. 2006, 21:18
Voilà un code fonctionnel pour naviguer dans une page avec un menu déroulant. Un peu long, mais c'est pour obliger à avoir une barre de défilement vertical et une visualisation de l'effet:
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Navigation par menu déroulant</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
#naviguer {
width: 250px;
float: left;
}
#principal {
margin-left: 255px;
}
#naviguer legend {
font-size: 0.8em;
font-weight: bold;
}
/* ]]> */
</style>
</head>
<body>
<form action="#" method="post" id="naviguer">
<fieldset>
<legend>Navigation</legend>
<select name="article" id="article" onchange="if(this.value != -1){window.location='navigselect.html#'+ this.value +'';}">
<option value="-1">Choisissez un article</option>
<option value="bloc1">Premier article</option>
<option value="bloc2">Second article</option>
<option value="bloc3">Troisième article</option>
<option value="bloc4">Quatrième article</option>
</select>
</fieldset>
</form>
<div id="principal">
<div id="bloc1">
<h3>Premier article</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum.</p>
<p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
</div>
<div id="bloc2">
<h3>Second article</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum.</p>
<p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
</div>
<div id="bloc3">
<h3>Troisième article</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum.</p>
<p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
</div>
<div id="bloc4">
<h3>Quatrième article</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum.</p>
<p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
</div>
</div>
</body>
</html>
Copie-ça tel-quel et enregistre ça sous navigselect.html puis teste directement, IE ou FIrefox à ton choix, ça fonctionne partout.
Voilà un code fonctionnel pour naviguer dans une page avec un menu déroulant. Un peu long, mais c'est pour obliger à avoir une barre de défilement vertical et une visualisation de l'effet:
[php]<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Navigation par menu déroulant</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
#naviguer {
width: 250px;
float: left;
}
#principal {
margin-left: 255px;
}
#naviguer legend {
font-size: 0.8em;
font-weight: bold;
}
/* ]]> */
</style>
</head>
<body>
<form action="#" method="post" id="naviguer">
<fieldset>
<legend>Navigation</legend>
<select name="article" id="article" onchange="if(this.value != -1){window.location='navigselect.html#'+ this.value +'';}">
<option value="-1">Choisissez un article</option>
<option value="bloc1">Premier article</option>
<option value="bloc2">Second article</option>
<option value="bloc3">Troisième article</option>
<option value="bloc4">Quatrième article</option>
</select>
</fieldset>
</form>
<div id="principal">
<div id="bloc1">
<h3>Premier article</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum.</p>
<p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
</div>
<div id="bloc2">
<h3>Second article</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum.</p>
<p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
</div>
<div id="bloc3">
<h3>Troisième article</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum.</p>
<p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
</div>
<div id="bloc4">
<h3>Quatrième article</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero.</p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tortor neque, porta vel, facilisis sed, condimentum eget, sapien. Ut ut justo. Suspendisse potenti. Vestibulum dapibus auctor sapien. Pellentesque cursus, elit quis adipiscing luctus, urna pede lacinia pede, sed vehicula lectus sapien tempor nulla. Nullam pulvinar. Quisque tellus wisi, pharetra vel, rhoncus nec, aliquam vel, diam. Phasellus odio massa, cursus vitae, laoreet quis, vulputate ac, massa. Curabitur condimentum condimentum nunc. Nam posuere, magna ut sollicitudin sollicitudin, nunc mi venenatis odio, id condimentum metus eros vel augue. Proin quis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut quis pede. Donec eu velit et tortor imperdiet suscipit. Nulla facilisi. Nunc eu urna lobortis mi ultrices fermentum.</p>
<p>Suspendisse commodo sagittis lectus. Sed posuere mauris non sapien. Morbi massa libero, vehicula faucibus, vestibulum eu, porta ut, eros. Pellentesque nulla libero, volutpat vel, egestas sit amet, accumsan dapibus, ligula. Ut condimentum mauris non nulla. Praesent auctor commodo neque. Vestibulum eget orci nec ante egestas tempus. Nunc iaculis lacinia orci. Nullam nec urna. Vestibulum tempus vestibulum velit. Pellentesque ultrices auctor mi. Curabitur massa turpis, tempus vel, tristique adipiscing, pellentesque vel, quam. Vivamus rhoncus augue sed diam. Phasellus ipsum tortor, consectetuer non, vestibulum et, dictum at, tortor. Nulla neque. Vivamus varius nulla.</p>
</div>
</div>
</body>
</html>
[/php]
Copie-ça tel-quel et enregistre ça sous navigselect.html puis teste directement, IE ou FIrefox à ton choix, ça fonctionne partout.