CSS encore et toujours
Bonjour,
Voici mon problème,
Je ne suis pas ultra novice en CSS pourtant je rencontre une difficulté:
1 ère difficulté : Il me faudrais pouvoir positionner plusieurs images sur ma page plus exactement il faudrais que j'ai 3 images l'une dérrière l'autre sur la mème ligne puis en dessous 2 autre images. Sachant que je ne veut pas que cela soit un tableau.
2éme difficulté: Mes 5 images sont les mêmes cependant je veut écrire sur chacune d'entre elles un titre.
Il faut donc que je puisse écrire dessus. En gros une sorte de backgroung.
Merci pour votre aide si vous avez besoin de précision ou d'explication peut être plus clair je suis là ;)
Voici mon problème,
Je ne suis pas ultra novice en CSS pourtant je rencontre une difficulté:
1 ère difficulté : Il me faudrais pouvoir positionner plusieurs images sur ma page plus exactement il faudrais que j'ai 3 images l'une dérrière l'autre sur la mème ligne puis en dessous 2 autre images. Sachant que je ne veut pas que cela soit un tableau.
2éme difficulté: Mes 5 images sont les mêmes cependant je veut écrire sur chacune d'entre elles un titre.
Il faut donc que je puisse écrire dessus. En gros une sorte de backgroung.
Merci pour votre aide si vous avez besoin de précision ou d'explication peut être plus clair je suis là ;)
Configuration: Windows XP Internet Explorer 6.0
25 réponses
Résumé de la discussion
Positionner plusieurs images sur une page sans tableau et écrire des titres sur chacune représentent deux difficultés CSS, notamment sous Windows XP et Internet Explorer 6, pour obtenir un rendu stable sur le web. Plusieurs réponses suggèrent d'utiliser le positionnement absolu avec top et left et d'ajouter des valeurs de z-index pour empiler les images sans modifier le flux du document. D'autres évoquent l'idée d'utiliser des div ou des fonds d'image et de tester des propriétés comme le z-index, tandis que certains mentionnent Paint comme outil de montage. Enfin, les échanges montrent une préoccupation commune sur la compatibilité avec IE6 et recommandent de partager le code complet pour évaluer les ajustements nécessaires.
-
ya qu'une soluce je croi :
fau donner ton code en entier-
Voici les codes:
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="video.css" />
<script type="text/javascript" src="videos/js/mootools.js"></script>
<script type="text/javascript" src="videos/js/swfobject.js"></script>
<script type="text/javascript" src="videos/js/videobox.js"></script>
<link rel="stylesheet" href="videos/css/videoboxx.css" type="text/css" media="screen" />
<title>Acceuil aide</title>
</head>
<body>
<table align="center">
<tr><td>
<div id="site">
<div id="header">
<img src="images/bando/bandopanier.jpg"/>
</div>
<table>
<tr><td>
<a href="videos/panier.swf" rel="vidbox 640 498" title="Passer une commande simple">
<div id="lepanier">
<p><br/>Passer une commande simple.</p>
</div>
</a>
</td>
<td>
<div id="moteurderecherche">
<a href="recherche.swf"></a>
</div>
</td>
<td>
<div id="click">
<a href="click.swf"><img src="images/video.jpg"/></a>
</div>
</td>
<tr>
<td>
<div id="retour">
<a href="retour.swf"><img src="images/video.jpg"/></a>
</div>
</td>
<td>
<div id="commande">
<a href="suivi.swf"><img src="images/video.jpg"/></a>
</div>
</td>
</tr>
</table>
<div id="footer"><br/><br/><img src="images/logoim2.gif"/></div>
</div>
</td></tr></table>
</body>
</html>
CSS
body
{
background-color: #EAEAEA;
display: block;
text-align: center;
margin-top: 0;
}
#site
{
width: 1008px;
background-color: #FFFFFF;
display: block;
}
#header img
{
margin: 0;
padding-top: 0;
}
img
{
border:none;
margin-top: 64px;
margin-left: 64px;
}
#lepanier
{
margin-top: 64px;
margin-left: 64px;
background: url(images/video.jpg) no-repeat;
width: 175px;
height: 175px;
}
#lepanier p
{
text-align: center;
color: white;
}
#moteurderecherche
{
margin-top: 64px;
margin-left: 64px;
background: url(images/video.jpg) no-repeat;
width: 175px;
height: 175px;
}
#moteurderecherche p
{
text-align: center;
color: white;
}
#footer
{
clear: both;
margin:0;
display: block;
text-align: center;
}
#footer img
{
margin:0;
padding:0;
}
Voila sachant qu'il n'y à que le premier lien qui la est bien configuré et que je veut la même présentation que celle-ci mais sans tableau.
Merci
-
-
il a dit que pour rajouter du texte il faisait :
CSS:
#monimage1 {
background: url(monimage.gif) no-repeat;
width: nn;
height: mm;
HTML:
<div id="monimage1">Mon texte sur l'image</div>
Je lui disais qu'il suffisait juste de disposer les div (pour monimage 2 , 3, 4 ,5) comme il souhaite en s'occupant des blocs, me tromperais-je? -
Ui mes images se trouve bien dans des div mais faut-il encore que j'arrive à bien les positionner ;) ( je n'arrive pas à les mettres comme sur mon explication.)
Sinon pour le projet:
Je doit enfète afficher 5 images de cette manière:
Image1 Image2 Image3
Image4 Image5
Ces images sont toutes identiques et possèdent un espace ou je veut marquer un titre différent pour chacune d'entre elle chose que j'ai réussi à faire.
Ces images sont en réalité des liens vers des vidéos qui se lancerons dans ma page avec un système genre "lightbox".
Le problème qui me reste étant juste de positionner mes images ;)
Le truc le plus stupide mais que je n'arrive pas à faire ;)
Cela est plus clair? -
Enfait j'ai umpeu rien pigé a ton machin dsl :S
explique ton projet total stp -
Je ne sais pas si c'est bien propre, mais tu peux utiliser ta technique
En créeant des div pour les emplacement des images en html et faire un attachement a chaque div
Et comme tu peux choisir la position de tes div tu choisiras tes images!!?? -
ta essayé top/left ?
paskeu j'en voi ausin dans ton code :( -
Je ne veut aucune image l'une au dessus d'une autre ce que je voulais au dessus c'était le texte mais j'ai trouvé la soluce pour ça ;) voila ce que j'ai fait :
CSS:
#monimage1 {
background: url(monimage.gif) no-repeat;
width: nn;
height: mm;
HTML:
<div id="monimage1">Mon texte sur l'image</div>
Sinon pour le positionnement je veut juste qu'elle soit disposé comme ceci:
Image1 Image2 Image3
Image4 Image5
Quelque chose de tout bête mais que je n'arrive pas à faire :( -
tu peu pas faire comme ça pour décrir stp :) :
img 1 img 2 img 3
img 4 img 5
img2 par dessous img1 img3 par dessus img2 .... -
Comme j'ai dit versus pas d'amertume dans mes propos, et merci pour les tips !!!
Cordialement -
Bon j'aime mieu :)
C'est bien de faire la paix ;)
Sinon pour le positionnement une solution?
Pour vous résumer la disposition je voudrais:
Image Image Image
Image Image
Tout ça écrit proprment en CSS bien sur ;) -
Top la ;)
-
Tu veux vraiment avoir raison : mais druidou a tranché en me répondant : "Oui cela est très envisageable pour ma 2éme difficulté cependant je suis en stage et mon maitre de stage veut que je fasse comme ceci donc .... "
Et vu que comme tu le dis si bien il n'est pas novice en CSS et qu'il admet la possibilité d'utilisation de paint,
En plus tu es tout jeune sur le forum, il faut donc respecter les anciens même si la réponse n'était pas adaptée ;-)
-
Il y a comme un conflit j'ai l'impression :(
Arétez de vous critiquer toute les idées sont bonnes à prendre pour ma part. -
Voici mon problème, Je ne suis pas ultra novice en CSS pourtant je rencontre une difficulté:
pourquoi pas :
Voici mon problème, Je ne suis pas ultra novice en paint pourtant je rencontre une difficulté:
? -
Ah non ce n'est pas interdit, puisque c'est possible !!
De tte façon je suis HS puisqu'il doit faire avec ta technique très instructive du reste.
Bien cordialement -
ATTENTION : J'ai proposé paint pour le montage des 4 images, le CSS est primordial pour appeler l'image unique c'est certain et incontestable.
il n'est jamais interdis de metre une div
-
scuzme ^^ : vrai message :
ATTENTION : J'ai proposé paint pour le montage des 4 images, le CSS est primordial pour appeler l'image unique c'est certain et incontestable. Ainsi si tu veux décaler d'un pixel tu le fais une fois dans le css tandis que sans paint tu le fais 4 fois pour 4 images.
il n'est jamais interdis de metre une div
-
-
chépa moi je fait
z-index:[ce que tu veu]; position:absolute; top:[ce que tu veu]; left:[ce que tu veu]
z-index:[ce que tu veu]+1; position:absolute; top:[ce que tu veu]; left:[ce que tu veu]
z-index:[ce que tu veu]+2; position:absolute; top:[ce que tu veu]; left:[ce que tu veu]
etc
après suivant ce que vous avez envie de faire-
-
@druidou59Très bonne astuce!!!
-
-
"et puis si tu veux changer la place d'une image d'un pixel avec le css : Hop sa roule alors que paint ... "
ATTENTION : J'ai proposé paint pour le montage des 4 images, le CSS est primordial pour appeler l'image unique c'est certain et incontestable.
Ainsi si tu veux décaler d'un pixel tu le fais une fois dans le css tandis que sans paint tu le fais 4 fois pour 4 images.
Yek yek yek, je ne dis donc pas de bêtises sur ce coup la hehe. (et toi non plus ;-)
Bien cordialement -
le positionemment bah :
Top/bottom, Left/right ? -
Ah ba je C pas moi : si tout est dit par son mêtre alors ... pk creer un topic ?
et puis si tu veu changer la place d'une image d'un pixel avec le css : Hop sa roule alors que paint ...
- 1
- 2
Suivant
