Placement d'image via CSS ou Tableau?
Résolu/Fermé
Micka
-
14 août 2008 à 09:21
Micka8405 Messages postés 222 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 20 octobre 2008 - 15 août 2008 à 16:03
Micka8405 Messages postés 222 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 20 octobre 2008 - 15 août 2008 à 16:03
Bonjour,
voilà, je doit faire un bandeau contenant 5 images de différentes tailles.
Je pourrai passer par un tableau pour mettre en forme mais je préfère éviter l'utilisation de tableau pour ce genre de choses.
Mon bandeau se présenterai vulgairement comme ceci:
http://img388.imageshack.us/img388/5309/bandeauvs2.jpg
Donc: savez-vous comment faire en css?
Sachant que mon body est de 830px en margin auto. Je ne peux donc pas vraiment utiliser "position: absolute" (dites-le moi si je me trompe).
Je vous demande donc votre aide. Car au pire, j'utiliserai un tableau.
Merci de vos réponses.
voilà, je doit faire un bandeau contenant 5 images de différentes tailles.
Je pourrai passer par un tableau pour mettre en forme mais je préfère éviter l'utilisation de tableau pour ce genre de choses.
Mon bandeau se présenterai vulgairement comme ceci:
http://img388.imageshack.us/img388/5309/bandeauvs2.jpg
Donc: savez-vous comment faire en css?
Sachant que mon body est de 830px en margin auto. Je ne peux donc pas vraiment utiliser "position: absolute" (dites-le moi si je me trompe).
Je vous demande donc votre aide. Car au pire, j'utiliserai un tableau.
Merci de vos réponses.
A voir également:
- Placement d'image via CSS ou Tableau?
- Tableau word - Guide
- Code ascii tableau - Guide
- Tableau croisé dynamique - Guide
- Trier tableau excel - Guide
- Image iso - Guide
7 réponses
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2024
2 757
14 août 2008 à 13:35
14 août 2008 à 13:35
Re-salut,
Tu as plusieurs possibilités :
tu peux mettre une image dans une div et toutes les positionner en relative.
ou alors faire un truc comme ça (je l'ai "bricolé" vite fait alors pardon aux puristes...) :
<!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"
<head>
<title>toto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div#conteneur
{
width: 830px;
}
div#haut1
{
width: 230px ;
height: 119px ;
float: left;
background-image : url("1.jpg")
}
</style>
</head>
</head>
<body>
<div id="conteneur">
<div id="haut1">
</div>
<div id="haut2">
<img src="2.jpg">
</div>
<div id="haut3">
<a href="une_page.html"><img src="3.jpg"></a>
<img src="4.jpg">
<a href="une_page.html"><img src="5.jpg"></a>
</div>
</div>
</body>
</html>
essaye et tiens nous au courant....
Tu as plusieurs possibilités :
tu peux mettre une image dans une div et toutes les positionner en relative.
ou alors faire un truc comme ça (je l'ai "bricolé" vite fait alors pardon aux puristes...) :
<!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"
<head>
<title>toto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div#conteneur
{
width: 830px;
}
div#haut1
{
width: 230px ;
height: 119px ;
float: left;
background-image : url("1.jpg")
}
</style>
</head>
</head>
<body>
<div id="conteneur">
<div id="haut1">
</div>
<div id="haut2">
<img src="2.jpg">
</div>
<div id="haut3">
<a href="une_page.html"><img src="3.jpg"></a>
<img src="4.jpg">
<a href="une_page.html"><img src="5.jpg"></a>
</div>
</div>
</body>
</html>
essaye et tiens nous au courant....
http://img90.imageshack.us/img90/9963/calqueat0.gif
Micka8405
Messages postés
222
Date d'inscription
mardi 26 février 2008
Statut
Membre
Dernière intervention
20 octobre 2008
41
15 août 2008 à 16:03
15 août 2008 à 16:03
C'est aussi une idée, je te remercie.
ScroudaF
Messages postés
121
Date d'inscription
samedi 8 juillet 2006
Statut
Membre
Dernière intervention
11 octobre 2011
11
14 août 2008 à 12:14
14 août 2008 à 12:14
Tableau c'est trop crade, à bannir, tu devrais avoir honte d'y avoir pensé! :-D
Va falloir "t'amuser" avec le css, si les 5 images se suivent (horizontalement) met les en "relative"
Va falloir "t'amuser" avec le css, si les 5 images se suivent (horizontalement) met les en "relative"
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2024
2 757
14 août 2008 à 12:34
14 août 2008 à 12:34
Salut,
Qu'elles sont les tailles exactes de tes images? Ton bandeau doit-il faire 830px?
Qu'elles sont les tailles exactes de tes images? Ton bandeau doit-il faire 830px?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Mes images font: (largeur x Longueur)
1: 230 x 119
2: 454 x 73
3: 20 x 14
4: 417 x 41
5: 20 x 14
Pour la disposition, il faut voir l'image que j'ai posté lors du premier post.
Mon bandeau fait au minimum 684px (en collant l'image 2 contre la 1) et les 830px, c'est ce dont je dispose. Je pourrai par la suite modifier l'espace entre les images mais si tu en souhaite une, tu peux mettre 20px, c'est au choix.
Merci de vos réponses
"Tableau c'est trop crade, à bannir, tu devrais avoir honte d'y avoir pensé! :-D"
Bien en fait, je suis en train de refaire/continuer un site, celui qui l'avait créé avait utilisé des tableaux avec (un ptit peu de) css pour toute la mise en forme. Et bien que je soit encore un novice, j'ai pas trop aimé lorsque j'ai vu ça.
Je continu donc le site avec les tableaux histoire qu'il y ait un site de sûr au final (me manque plus grand chose), et à côté, je fait un beau site en respect avec les normes (ou presque, que un marquee devrait rester, et à part en JS ...).
1: 230 x 119
2: 454 x 73
3: 20 x 14
4: 417 x 41
5: 20 x 14
Pour la disposition, il faut voir l'image que j'ai posté lors du premier post.
Mon bandeau fait au minimum 684px (en collant l'image 2 contre la 1) et les 830px, c'est ce dont je dispose. Je pourrai par la suite modifier l'espace entre les images mais si tu en souhaite une, tu peux mettre 20px, c'est au choix.
Merci de vos réponses
"Tableau c'est trop crade, à bannir, tu devrais avoir honte d'y avoir pensé! :-D"
Bien en fait, je suis en train de refaire/continuer un site, celui qui l'avait créé avait utilisé des tableaux avec (un ptit peu de) css pour toute la mise en forme. Et bien que je soit encore un novice, j'ai pas trop aimé lorsque j'ai vu ça.
Je continu donc le site avec les tableaux histoire qu'il y ait un site de sûr au final (me manque plus grand chose), et à côté, je fait un beau site en respect avec les normes (ou presque, que un marquee devrait rester, et à part en JS ...).
XxTitxX
Messages postés
1176
Date d'inscription
samedi 24 mai 2008
Statut
Membre
Dernière intervention
30 août 2012
246
14 août 2008 à 13:03
14 août 2008 à 13:03
Bonjour,
Ne serait-il pas plus simple d'associer toutes les images en une seule image qui constituerait ta banderole ?
Les images sont peut-être appelé à changer selon la page html ?
Ne serait-il pas plus simple d'associer toutes les images en une seule image qui constituerait ta banderole ?
Les images sont peut-être appelé à changer selon la page html ?
Effectivement, j'y ai pensé, les deux plus petites images sont des liens. Je pourrai bien sûr ensuite faire des coordonnées, mais je ne connais pas très bien la façon dont elle agissent, si c'est par rapport à l'image ou bien la page.
Puis de plus, mon patron risque de me faire changer une des images peu après, et pete encore une autre fois après :-(. Vous voyez ce que je veux dire...
Puis de plus, mon patron risque de me faire changer une des images peu après, et pete encore une autre fois après :-(. Vous voyez ce que je veux dire...
Micka8405
Messages postés
222
Date d'inscription
mardi 26 février 2008
Statut
Membre
Dernière intervention
20 octobre 2008
41
14 août 2008 à 14:27
14 août 2008 à 14:27
Voilà, ça marche, je te remercie, j'avais essayer les div, span et aussi float, mais je n'y avais pas pensé comme ça.
Donc, ça marche. J'ai repris le plus gros de ton exemple et c'est super. Pour le reste je pense que je saurais peaufiner ;-)
Et Merci à tous de votre aide et écoute.
P.S.: Je vois que je suis pas à jeter, en effet j'avais au moins fait un div conteneur avec un id ainsi que un id aux images.
Donc, ça marche. J'ai repris le plus gros de ton exemple et c'est super. Pour le reste je pense que je saurais peaufiner ;-)
Et Merci à tous de votre aide et écoute.
P.S.: Je vois que je suis pas à jeter, en effet j'avais au moins fait un div conteneur avec un id ainsi que un id aux images.
