Bonjour,
J'ai besoin de votre aide ! J'ai réaliser une petite class php qui me génère une barre de navigation permettant d'afficher des données page à page. Jusque ici tout va bien.
Mon problème se situe, vous vous en doutez, au niveau de la mise en page de cette dernière. J'essaye de trouver une solution générique permettant de mettre en forme cette barre de navigation uniquement en modifiant la feuille de style associé. Et je ne suis pas du tout sur de moi.
je vous présente le code html (la feuille de style sera dans un fichier à part plus tard)
J'ai utilisé des blocs <div> pour les différentes parties de la barre. L'ensemble de ces <div> sont regroupés dans un <div> commun nommé pagination.
Est-ce qu'avec une telle "architecture" je peux croire à une mise en page très libre de ma barre via les css ?
Auriez-vous des conseils pour libérer le plus possible le code html (généré par la classe) de la mise en page. Utilisation de <span> plutôt que <div> par exemple ?
J'avoue avoir du mal à obtenir ce que je veux comme vous pouvez le voir sur la capture d'écran.
Merci de votre aide.
Modifié par exotux (25 Sep 2005 - 12:56)
J'ai besoin de votre aide ! J'ai réaliser une petite class php qui me génère une barre de navigation permettant d'afficher des données page à page. Jusque ici tout va bien.
Mon problème se situe, vous vous en doutez, au niveau de la mise en page de cette dernière. J'essaye de trouver une solution générique permettant de mettre en forme cette barre de navigation uniquement en modifiant la feuille de style associé. Et je ne suis pas du tout sur de moi.
je vous présente le code html (la feuille de style sera dans un fichier à part plus tard)
<!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" lang="fr" xml:lang="fr">
<head>
<title>Test Classe cl_pagination</title>
<style type="text/css">
.pagination {
background-color: #fff;
white-space: nowrap;
padding: 2px;
border: 1px solid #000;
padding: 2px;
}
.reponse {
float: left;
background-color: #fff;
width: 100px;
}
.combo {
float: right;
}
.numerotation {
background-color: #fff;
width: auto;
}
.numerotation a {
font-weight: bolder;
text-decoration: none;
color: #000000;
background-color: #cccccc;
border: 1px solid #000000;
padding-left: 2px;
padding-right: 2px;
}
.numerotation a:hover {
background-color: #aaaaaa;
text-decoration: none;
}
.numerotation a:visited {
color: #ff0000;
text-decoration: none;
}
</style>
</head>
<body>
<div class="pagination">
<div class="reponse">
Page 1 sur 10
</div>
<div class="numerotation">
<< ·
< ·
<a class="off" href="#" title="Page 1"> 1 </a>
<a href="/AffichageParPage/index.php?nbDebut=3" title="page 2"> 2 </a>
<a href="/AffichageParPage/index.php?nbDebut=6" title="page 3"> 3 </a>
<a href="/AffichageParPage/index.php?nbDebut=9" title="page 4"> 4 </a>
<a href="/AffichageParPage/index.php?nbDebut=12" title="page 5"> 5 </a>
· <a href="index.php?nbDebut=3" title="page >">></a>
· <a href="index.php?nbDebut=27" title="page >>">>></a>
</div>
<div class="combo">
Page :
<select size="1" name="combo_page" onChange="window.location.href='/AffichageParPage/index.php?nbDebut=' + this.value;">
<option value="0">1</option>
<option value="3">2</option>
<option value="6">3</option>
<option value="9">4</option>
<option value="12">5</option>
<option value="15">6</option>
<option value="18">7</option>
<option value="21">8</option>
<option value="24">9</option>
<option value="27">10</option>
</select>
</div>
</div>
</body>
</html>
J'ai utilisé des blocs <div> pour les différentes parties de la barre. L'ensemble de ces <div> sont regroupés dans un <div> commun nommé pagination.
Est-ce qu'avec une telle "architecture" je peux croire à une mise en page très libre de ma barre via les css ?
Auriez-vous des conseils pour libérer le plus possible le code html (généré par la classe) de la mise en page. Utilisation de <span> plutôt que <div> par exemple ?
J'avoue avoir du mal à obtenir ce que je veux comme vous pouvez le voir sur la capture d'écran.
Merci de votre aide.
Modifié par exotux (25 Sep 2005 - 12:56)
