18041 sujets
Questions générales et questions de débutants
Re',
) qu'aux propos de Christele...
@jojoledemago > je te déconseille d'utiliser la méthode proposée qui (sans même parler du JavaScript) pose problème pour les résolutions <= 1024 * 768 donc une grande majorité. Pour ce que tu veux faire un tableau en 3*3 est effectivement ce qu'il y a de plus sûr et de plus portable...
Florent V. a écrit :A vrai dire je n'avais même pas été voir l'exemple en ligne et je ne réagissais (une fois encore
Mouais, enfin bon c'est pas la demande.
Heyoan, Christele, c'est bien d'être plein de bonnes intentions et de vouloir orienter les gens vers les bonnes pratiques d'intégration web professionnelles, mais ces bonnes pratiques concernent justement les professionnels, à la rigueur les passionnés et amateurs éclairés.
) qu'aux propos de Christele...@jojoledemago > je te déconseille d'utiliser la méthode proposée qui (sans même parler du JavaScript) pose problème pour les résolutions <= 1024 * 768 donc une grande majorité. Pour ce que tu veux faire un tableau en 3*3 est effectivement ce qu'il y a de plus sûr et de plus portable...
Merci Heyoan pour tes remarques mais le problème avec un tableau reste le même, je ne sais pas comment avoir la cellule du milieu avec des barres de défilement lorsque c'est nécessaire.
Au sujet de la résolution, cela risque d'être pareil avec un tableau aussi non ?
Par contre, le javascript ne fonctionne pas avec firefox, quelqu'un a une idée ?
Modifié par jojoledemago (31 Mar 2010 - 23:12)
Au sujet de la résolution, cela risque d'être pareil avec un tableau aussi non ?
Par contre, le javascript ne fonctionne pas avec firefox, quelqu'un a une idée ?
Modifié par jojoledemago (31 Mar 2010 - 23:12)
jojoledemago a écrit :Il suffit d'y placer un DIV avec des dimensions et un overflow:auto comme par exemple :
je ne sais pas comment avoir la cellule du milieu avec des barres de défilement lorsque c'est nécessaire.
#contenu {
width: 300px;
height: 300px;
overflow: auto;
}<div id="contenu">
<p>Du contenu...</p>
</div>jojoledemago a écrit :Non : le tableau va s'adapter à son contenu. Le problème de la solution proposée par Christele concerne le positionnement absolu et le chevauchement qui peut être associé à celui-ci (pour plus d'informations lire le Guide de survie du positionnement CSS.
Au sujet de la résolution, cela risque d'être pareil avec un tableau aussi non ?
jojoledemago a écrit :A quoi sert-il déjà ?
Par contre, le javascript ne fonctionne pas avec firefox, quelqu'un a une idée ?
Edit: un petit exemple :
<!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" />
<title>Test</title>
<style type="text/css" media="screen">
table {
width: 100%;
max-width: 1500px;
margin: 0 auto;
text-align: center;
}
#entete img {
width: 891px;
height: 135px;
}
.images {
width: 300px;
}
.images a {
display: block;
}
#contenu {
min-width: 300px;
height: 300px;
overflow: auto;
margin: 10px auto;
padding: 5px;
text-align: justify;
}
img {
border: none;
width: 250px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3">
<p id="entete">
<a href="index.html"><img src="http://vacanceschezjolivet.free.fr/images/bandeau%20superieur.jpg" width="891" height="135" alt="Accueil" title="Retourner à l'accueil" /></a>
</p>
</td>
</tr>
<tr>
<td>
<p class="images">
<a href="lien1.html"><img src="http://vacanceschezjolivet.free.fr/images/chambre_menu_cepia.jpg" alt="Chambre1" title="Voir la chambre 1" /></a>
<a href="lien2.html"><img src="http://vacanceschezjolivet.free.fr/images/chambre_menu_cepia.jpg" alt="Chambre2" title="Voir la chambre 2" /></a>
</p>
</td>
<td>
<div id="contenu">
<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
</div>
</td>
<td>
<p class="images">
<a href="lien3.html"><img src="http://vacanceschezjolivet.free.fr/images/chambre_menu_cepia.jpg" alt="Chambre3" title="Voir la chambre 3" /></a>
<a href="lien4.html"><img src="http://vacanceschezjolivet.free.fr/images/chambre_menu_cepia.jpg" alt="Chambre4" title="Voir la chambre 4" /></a>
</p>
</td>
</tr>
<tr>
<td colspan="3">
<p>
<a href="lien5.html"><img src="http://vacanceschezjolivet.free.fr/images/chambre_menu_cepia.jpg" alt="Chambre5" title="Voir la chambre 5" /></a>
<a href="lien6.html"><img src="http://vacanceschezjolivet.free.fr/images/chambre_menu_cepia.jpg" alt="Chambre6" title="Voir la chambre 6" /></a>
<a href="lien7.html"><img src="http://vacanceschezjolivet.free.fr/images/chambre_menu_cepia.jpg" alt="Chambre7" title="Voir la chambre 7" /></a>
</p>
</td>
</tr>
</table>
</body>
</html>Modifié par Heyoan (01 Apr 2010 - 00:40)
Je crois être arrivé à peu de choses prêt à ce que je voulais : ici
j'ai quand même gardé un peu de javascript pour la fonction onmouseover mais je modifierai ça plus tard.
j'attends vos critiques puisque il doit y en avoir, surtout pour les premières lignes des pages html que je ne comprends absolument pas : doctypes, meta etc...!!!
Heyoan : mieux vaut le tableau ou c'est pareil ?
Merci encore à vous 3 !
Ciao
j'ai quand même gardé un peu de javascript pour la fonction onmouseover mais je modifierai ça plus tard.
j'attends vos critiques puisque il doit y en avoir, surtout pour les premières lignes des pages html que je ne comprends absolument pas : doctypes, meta etc...!!!
Heyoan : mieux vaut le tableau ou c'est pareil ?
Merci encore à vous 3 !
Ciao
jojoledemago a écrit :Pas de raison d'y toucher : à partir du moment où tu modifies l'attribut src d'un élément IMG il te faut du JavaScript.
j'ai quand même gardé un peu de javascript pour la fonction onmouseover mais je modifierai ça plus tard.
jojoledemago a écrit :Faire une recherche dans la section Apprendre.
les premières lignes des pages html que je ne comprends absolument pas : doctypes, meta etc...!!!
jojoledemago a écrit :En fait c'est plus logique de ne pas utiliser de tableau puisqu'il devrait être réservé à la présentation de données tabulaires et pas pour la mise en forme. Il se trouve que c'est parfois plus simple ou tout simplement plus compatible (en fonction des différences d'implémentations css des navigateurs) mais effectivement dans ton cas faire flotter les éléments DIV fonctionne également.
mieux vaut le tableau ou c'est pareil ?
