Placement d'image via CSS ou Tableau?
Résolu
Micka
-
Micka8405 Messages postés 222 Date d'inscription Statut Membre Dernière intervention -
Micka8405 Messages postés 222 Date d'inscription Statut Membre Dernière intervention -
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
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Image iso - Guide
7 réponses
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....
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"
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 ...).
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...
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.
