Largeur "infinie" d'une page web
malkolm
Messages postés
4
Statut
Membre
-
okuni Messages postés 1325 Statut Membre -
okuni Messages postés 1325 Statut Membre -
Bonjour,
Je voudrais créer une page web tout en largeur et non en longeur, comme ça :
http://www.davidhogsholt.com/html/haenyeo.html
Car quand je mets mes images, elles se mettent les unes en dessous les autres, meme si de ne mets pas de retour à la ligne.
J'utilise Nvu.
Merci
Je voudrais créer une page web tout en largeur et non en longeur, comme ça :
http://www.davidhogsholt.com/html/haenyeo.html
Car quand je mets mes images, elles se mettent les unes en dessous les autres, meme si de ne mets pas de retour à la ligne.
J'utilise Nvu.
Merci
A voir également:
- Largeur "infinie" d'une page web
- Supprimer une page word - Guide
- Web office - Guide
- Capturer une page web complète - Guide
- Comment traduire une page web - Guide
- Créer une page web - Guide
7 réponses
Si tu utilise des div ou tout autre balise de type block, tu dois les changer et mettre : display:inline; comme propriété css.
Salut,
Tu définis ton image de classe .droite par exemple.
Tu définis ceci dans la CSS :
Lorsque tu veux que ton texte en-dessous revienne à la ligne, tu le déginis dans une nouvelle class / id où tu mettras ceci dans le css :
clear : left;
En fait, tes images "flottent" à droite et ne sont plus en bloc. Tu en fait des éléments en ligne.
La deuxième solution est aussi le display : inline car les images sont des éléments de type block.
Tu définis ton image de classe .droite par exemple.
Tu définis ceci dans la CSS :
.droite
{
float : right;
}
Lorsque tu veux que ton texte en-dessous revienne à la ligne, tu le déginis dans une nouvelle class / id où tu mettras ceci dans le css :
clear : left;
En fait, tes images "flottent" à droite et ne sont plus en bloc. Tu en fait des éléments en ligne.
La deuxième solution est aussi le display : inline car les images sont des éléments de type block.
Merci, je teste le display: inline mais je ne sais pas ou mettre ça:
Par exemple j'ai ouvers une page blanche et j'ai mis deux photos :
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
</head>
<body>
<div style="display: inline;">
<img style="width: 979px; height: 650px;" alt=""
src="../Sites/Olympe/Envy/bin/images/large/D30_8235.jpg"><img
style="width: 1150px; height: 650px;" alt=""
src="../Sites/Olympe/Envy/bin/images/large/D30_8209.jpg"><br>
<br>
</div>
<br>
</body>
</html>
Comme ça ça ne marche pas, je le met ou le style="display: inline;"?
Merci
Par exemple j'ai ouvers une page blanche et j'ai mis deux photos :
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
</head>
<body>
<div style="display: inline;">
<img style="width: 979px; height: 650px;" alt=""
src="../Sites/Olympe/Envy/bin/images/large/D30_8235.jpg"><img
style="width: 1150px; height: 650px;" alt=""
src="../Sites/Olympe/Envy/bin/images/large/D30_8209.jpg"><br>
<br>
</div>
<br>
</body>
</html>
Comme ça ça ne marche pas, je le met ou le style="display: inline;"?
Merci
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
tu dois imaginer que le div représente un block et que dans ce block, il y a 2 images qui sont eux aussi des block.
Pour mettre ces images sur une ligne, il faut les transformer en inline.
donc ce n'est pas dans ton div que tu dois mettre le display mais dans tes images.
Pour mettre ces images sur une ligne, il faut les transformer en inline.
donc ce n'est pas dans ton div que tu dois mettre le display mais dans tes images.
Merci encore,
j'ai essayé de le mettre partout!!
et comme tu me dis, je crois que c'est ça :
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
</head>
<body>
<div>
<img style="display: inline;" alt=""
src="../Sites/Olympe/Envy/bin/images/large/D30_8235.jpg"><img
style="display: inline;" alt=""
src="../Sites/Olympe/Envy/bin/images/large/D30_8209.jpg"><br>
<br>
</div>
<br>
<div>
<p style="display: inline;">Ce paragraphe doit </p>
<p style="display: inline;">tenir sur une seule ligne</p>
</div>
</body>
</html>
ça ne marche pas,
par contre pour la partie texte "Ce paragraphe doit tenir sur une seule ligne" ça marche donc je suis un peu perdu.
Merci d'avance
j'ai essayé de le mettre partout!!
et comme tu me dis, je crois que c'est ça :
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
</head>
<body>
<div>
<img style="display: inline;" alt=""
src="../Sites/Olympe/Envy/bin/images/large/D30_8235.jpg"><img
style="display: inline;" alt=""
src="../Sites/Olympe/Envy/bin/images/large/D30_8209.jpg"><br>
<br>
</div>
<br>
<div>
<p style="display: inline;">Ce paragraphe doit </p>
<p style="display: inline;">tenir sur une seule ligne</p>
</div>
</body>
</html>
ça ne marche pas,
par contre pour la partie texte "Ce paragraphe doit tenir sur une seule ligne" ça marche donc je suis un peu perdu.
Merci d'avance
question technique et pratique : qui a l'habitude se "scroller" horizontalement ???
pas évident comme résultat cette mise en page :-)
pas évident comme résultat cette mise en page :-)
c'est ce qu'il me fallait!!!
Merci beaucoup
Avion, je met le code ici afin que sa pérennité soit assurée (cela peut servir).
Merci et bonne continuation.
<!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=utf-8" /> <title>Titre</title> <style type="text/css"> div#contenu { float: left; width: 400px; } div#images { margin-left: 500px; padding-top: 100px; white-space: nowrap; } </style> </head> <body> <div id="contenu"> <h3>Ton blabla dans le div#contenu</h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div id="images"> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> <img src="http://i60.photobucket.com/albums/h17/Bertvanderlinden/_DSC5559-1.jpg" alt="Texte alternatif" /> </div> </body> </html>