Posez votre question Signaler

Barre horizontalement en html [Résolu]

ilana555 1012Messages postés 12 décembre 2009Date d'inscription 5 mai 2011Dernière intervention - Dernière réponse le 27 déc. 2010 à 19:33

Bonjour,
savez vous comment faire un barre de navigation HORIZONTALEMENT
<http://img830.imageshack.us/i/sanstitrefso.jpg/ >]
pour faire défiler les photos et qui eux mm l'orsque l'on passera la sourie vers tels photos s'agrandira ! (en html )
j'avais vus ça sur un site j'ai trouver ça super et j'aimerai le reproduire

quand c'est résolu ,merci de le signifier et d'expliquer grâce a quoi cela l'a été (voir 1er message)
>> Un +1 a coté d'une réponse qui vous a été utile peut permettre d'aider les autres...
svp répondez vite !

Barre horizontalement en html »

Suggestions

Barre horizontalement en html
BARRE HTML » Forum
Barre de navigation horizontal en Html? » Forum
Barre de defilement en HTML (Résolu) » Forum
Assistance free???? » Forum
X barre sur Word?? (Résolu) » Forum

Plus

Réponse

avion-f16 16620Messages postés 17 février 2008Date d'inscription 8 mai 2012Dernière intervention 25 déc. 2010 à 14:06

Salut.

Mets tes photos dans un div.
En CSS, donne une hauteur (height) à ce div puis ajoute « overflow:auto; »
La barre de défilement apparaîtra automatiquement lorsque la hauteur sera dépassée.

Pour l'agrandissement, tu as plusieurs solutions : lightbox, info-bulle, agrandir les dimensions, etc.

Ajouter un commentaire - Site web

Afficher les 16 commentaires

ilana555- 25 déc. 2010 à 14:17

chui pas très pro ,donc si ta le code jveut bien

avion-f16- 25 déc. 2010 à 14:19

Je n'ai pas de code déjà fait sous la main.
Je pourrais le faire mais je ne suis pas ici pour coder à la place des gens, mais pour les aider losqu'ils codent.

ilana555- 25 déc. 2010 à 14:23

oui mais quand tu me dit :Mets tes photos dans un div. ,En CSS, donne une hauteur (height) à ce div puis ajoute « overflow:auto; »
La barre de défilement apparaîtra automatiquement lorsque la hauteur sera dépassée. je ne comprend pas

avion-f16- 25 déc. 2010 à 14:35

<div style="overflow:auto; height: 800px;">
    <img src="images/1.jpg" alt="Image 1" /><br />
    <img src="images/2.jpg" alt="Image 2" /><br />
    <img src="images/3.jpg" alt="Image 3" /><br />
    <img src="images/4.jpg" alt="Image 4" /><br />
    <img src="images/5.jpg" alt="Image 5" /><br />
    ...
</div>

ilana555- 25 déc. 2010 à 15:29

par exemple avec une série d'image

<img src="http://static.blogstorage.hi-pi.com/..."
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://www.canape-inn.com/images/products/charlotte-canape-angle-flash.jpg"
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://static.letsbuyit.com/..."
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://static.letsbuyit.com/..."
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="file:///C:/Documents%20and%20Settings/Dan/Bureau/CLUB%20SALON%20SITE/AP0162_1_canape_artdeco_400.jpg"
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://www.hellopro.fr/..."
<table border="5" width="230" height="270" scrolling="yes"
</td>

comment est ou mettre la barre défilante qui ce met de gauche a droite ,pas de haut en bas ?

avion-f16- 25 déc. 2010 à 15:36

Désolé mais ... ton code, c'est du n'importe quoi. Tu crées plusieurs tableaux ne contenant qu'une seule cellule. De plus, tu ne fermes pas </table>, tu oublies le chevrons fermant après "yes", tu fermes les </td> n'importe où, tu ne fermes pas la balise img avec "/>"

ilana555- 25 déc. 2010 à 15:50

dsl :

<img src="http://static.blogstorage.hi-pi.com/..."
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://www.canape-inn.com/images/products/charlotte-canape-angle-flash.jpg"
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://static.letsbuyit.com/..."
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://static.letsbuyit.com/..."
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="file:///C:/Documents%20and%20Settings/Dan/Bureau/CLUB%20SALON%20SITE/AP0162_1_canape_artdeco_400.jpg"
<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://www.hellopro.fr/..."
<table border="5" width="230" height="270" scrolling="yes"
</td>

</table>

pourtant ça marche

avion-f16- 25 déc. 2010 à 16:52

Je ne vois qu'un seul </table>. Pourtant, il y a plusieurs <table>.
Et juste après <table>, tu fais un </td>.

Regarde ces lignes :

<table border="5" width="220" height="270" scrolling="yes" 
</td> 
<img src="http://www.hellopro.fr/..." 
<table border="5" width="230" height="270" scrolling="yes" 
</td> 

</table>

ilana555- 25 déc. 2010 à 17:02

quand je fait ton code:

<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://www.hellopro.fr/..."
<table border="5" width="230" height="270" scrolling="yes"
</td>

</table>

et que je remplace par une de mes photos soit

<table border="5" width="220" height="270" scrolling="yes"
</td>
<img src="http://www.hellopro.fr/..."
<table border="5" width="230" height="270" scrolling="yes"
</td>

</table>

l

bizzard....

avion-f16- 25 déc. 2010 à 17:54

Mon code n'est pas l'horreur que tu montres, c'est celui-ci :

<div style="overflow:auto; height: 800px;">
    <img src="images/1.jpg" alt="Image 1" /><br />
    <img src="images/2.jpg" alt="Image 2" /><br />
    <img src="images/3.jpg" alt="Image 3" /><br />
    <img src="images/4.jpg" alt="Image 4" /><br />
    <img src="images/5.jpg" alt="Image 5" /><br />
    ...
</div>

ilana555- 27 déc. 2010 à 12:37

et comment fait-on pour avoir la barre de défilement horizontalement ( de gauche a droite) ????

http://img708.imageshack.us/img708/4733/sanstitrefso.jpg accrocher au photos

avion-f16- 27 déc. 2010 à 13:01

Désolé, c'est moi qui est mal lu la question.

Voilà :

<div style="overflow-x: auto; white-space:nowrap">
	<img src="image.png" alt="" />
	<img src="image.png" alt="" />
	<img src="image.png" alt="" />
	...
</div>

ilana555- 27 déc. 2010 à 13:20

sur <img src=je mets le lien " oui mais sur alt = je mets quoi />

ilana555- 27 déc. 2010 à 13:26

he désolé ça a marcher ,tropppppppppp coooollll merci par contre c sans alt ="" que je l'est fait

question après c fini : on peut en mettre autant qu'on veut ?

avion-f16- 27 déc. 2010 à 15:40

alt sert à donner un texte alternatif à tes images.
Il n'est pas obligatoire mais conseillé.
Les moteurs de recherches peuvent ainsi comprendre le contenu de l'image.

ilana555- 27 déc. 2010 à 19:33

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

Barre horizontalement en html [Résolu]

Barre horizontalement en html »

Passage au tout numérique : quel coût pour les particuliers ?