CSS encore et toujours
druidou59
Messages postés
87
Statut
Membre
-
druidou59 Messages postés 87 Statut Membre -
druidou59 Messages postés 87 Statut Membre -
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à ;)
A voir également:
- CSS encore et toujours
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
25 réponses
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!!??
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!!??
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?
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?
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?
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?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ya qu'une soluce je croi :
fau donner ton code en entier
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
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
