CSS et images ? Mes codes sont ils bon ?
Résolu
-
-
-
Bonjour,
Je viens d'apprendre le CSS, mais je n'arrive pas à l'appliquer aux images au sujet de leur positionnement et de leur distance avec le texte dans l'objectif de ne pas avoir de texte caché par une image.
Voilà le code CSS que j'ai tenté :
mg.1 {
float: left;
margin-left: 20px;
margin-right: 0px;
margin-top: -170px;
margin-bottom: 10px;
position: absolute;
display: block;
}
Voilà une partie de mon code HTML :
[...]
<br>
Mon texte, blablalba...
<br>
Encore mon texte....
</p>
<img class="1"
src="http://cheminvers/monimage.bmp"
alt="Unnom">
Est ce cela ? Comment faire pour que mon image ne passe pas en dessous ?
Merci
Je viens d'apprendre le CSS, mais je n'arrive pas à l'appliquer aux images au sujet de leur positionnement et de leur distance avec le texte dans l'objectif de ne pas avoir de texte caché par une image.
Voilà le code CSS que j'ai tenté :
mg.1 {
float: left;
margin-left: 20px;
margin-right: 0px;
margin-top: -170px;
margin-bottom: 10px;
position: absolute;
display: block;
}
Voilà une partie de mon code HTML :
[...]
<br>
Mon texte, blablalba...
<br>
Encore mon texte....
</p>
<img class="1"
src="http://cheminvers/monimage.bmp"
alt="Unnom">
Est ce cela ? Comment faire pour que mon image ne passe pas en dessous ?
Merci
A voir également:
- CSS et images ? Mes codes sont ils bon ?
- Les codes ascii - Guide
- Des images - Guide
- Spotify codes - Guide
- Retrouver mes codes secrets - Guide
- Extraire images pdf - Guide
9 réponses
Les positions absolues sont difficiles à maîtriser car elle sortent du flux, et donc peuvent générer des problèmes de superpositions. Ce qui semble être le cas...
Utilise plutôt un float, c'est plus facile à gérer.
Utilise plutôt un float, c'est plus facile à gérer.
Bsr
Non ce n'est pas bon :-(
Déjà le sélecteur de classe "mg.1" est faux !
Donne des noms explicite ex "image1"
Ce qui donne
<style>
.image1 { ... }
</style>
et dans ton image : <img class="image1" src="...">
Ensuite soit tu utilises "float" pour le positionnement , soit "position" mais pas les 2 !
Va lire les 3 excellents et indispensables tutos ici :
https://openweb.eu.org/articles/initiation_flux/
Et tu comprendras que c'est pas si simple hélas ...
Bon CSS
Non ce n'est pas bon :-(
Déjà le sélecteur de classe "mg.1" est faux !
Donne des noms explicite ex "image1"
Ce qui donne
<style>
.image1 { ... }
</style>
et dans ton image : <img class="image1" src="...">
Ensuite soit tu utilises "float" pour le positionnement , soit "position" mais pas les 2 !
Va lire les 3 excellents et indispensables tutos ici :
https://openweb.eu.org/articles/initiation_flux/
Et tu comprendras que c'est pas si simple hélas ...
Bon CSS
Merci bpc pour votre aide, donc j'ai modifié mon code mais maintenant mon texte reste en dessous des deux images qui sont elles bien placée ! ^^
J'ai du me tromper de code mais je ne vois ps voici mes codes si vous voyez ce qu'il faut faire, merci d'avance :
HTML :
<body>
<p align="center">
<img src="http://nomdemonsite.free.fr/image/titre.bmp"
alt="titre"><img
src="http://nomdemonsite.free.fr/images/menu.jpg"
alt="Menu"></p>
<img class="floatleft"
src="http://nomdemonsite.free.fr/images/rallye.acc.bmp"
alt="Rallye"><img class="floatright"
src="http://nomdemonsite.free.fr/images/concert.acc.bmp"
alt="Concert">Bienvenue chez ... (mon texte) :<br>
Des ... (encore du texte)<br>
Du ... (texte;)<br>
Une... (encore du texte)<br>
Un ... (et du texte;)
<p> [...]
<body/>
Code CSS:
body{
background-color: #363636;
color: white;
font-size: large;
font-family: Century Gothic, Verdana, Trebuchet MS, Comic Sans MS, Georgia, serif;
text-align: center
}
.floatleft{
float: left;
padding: 2%;
margin-top: -170px;
margin-bottom: 10px;
margin-right: 0px;
width: 234px;
height: 156px;
}
.floatright{
float: right;
padding: 2%;
margin-top: -170px;
margin-left: 735px;
margin-bottom: 10px;
width: 228px;
height: 156px;
}
D'avance Merci beaucoup
J'ai du me tromper de code mais je ne vois ps voici mes codes si vous voyez ce qu'il faut faire, merci d'avance :
HTML :
<body>
<p align="center">
<img src="http://nomdemonsite.free.fr/image/titre.bmp"
alt="titre"><img
src="http://nomdemonsite.free.fr/images/menu.jpg"
alt="Menu"></p>
<img class="floatleft"
src="http://nomdemonsite.free.fr/images/rallye.acc.bmp"
alt="Rallye"><img class="floatright"
src="http://nomdemonsite.free.fr/images/concert.acc.bmp"
alt="Concert">Bienvenue chez ... (mon texte) :<br>
Des ... (encore du texte)<br>
Du ... (texte;)<br>
Une... (encore du texte)<br>
Un ... (et du texte;)
<p> [...]
<body/>
Code CSS:
body{
background-color: #363636;
color: white;
font-size: large;
font-family: Century Gothic, Verdana, Trebuchet MS, Comic Sans MS, Georgia, serif;
text-align: center
}
.floatleft{
float: left;
padding: 2%;
margin-top: -170px;
margin-bottom: 10px;
margin-right: 0px;
width: 234px;
height: 156px;
}
.floatright{
float: right;
padding: 2%;
margin-top: -170px;
margin-left: 735px;
margin-bottom: 10px;
width: 228px;
height: 156px;
}
D'avance Merci beaucoup
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bsr
Je veux bien mais je ne vois pas comment tu veux positionner tes éléments
A gauche [rallye.acc.bmp] au centre du texte à droite [concert.acc.bmp] ?
Je veux bien mais je ne vois pas comment tu veux positionner tes éléments
A gauche [rallye.acc.bmp] au centre du texte à droite [concert.acc.bmp] ?
oui exactement cela ! Mais pour le moment mes images sont décalés par rapport au texte, je ne comprend pas prk !
Cela donne :
A gauche [rallye.acc.bmp] - au centre le texte (mais en dessous) - à droite [concert.acc.bmp]
Ps : A savoir que le texte descend qd ls images descendent !
A gauche [rallye.acc.bmp] - au centre le texte (mais en dessous) - à droite [concert.acc.bmp]
Ps : A savoir que le texte descend qd ls images descendent !
Pourquoi une marge haute négative de -170 ?
Pourquoi text-align: center dans body ? Tu veux vraiment que tous les textes soit centrés ? (Je ne parle pas de centrer ton site dans la page hein !)
Pourquoi margin-left: 735px; dans floatRight sachant que float:right te positionne déjà l'élément à droite ?
le code suivant donne de meilleurs résultats mais pour bien faire il faudrait utiliser des div
Pourquoi text-align: center dans body ? Tu veux vraiment que tous les textes soit centrés ? (Je ne parle pas de centrer ton site dans la page hein !)
Pourquoi margin-left: 735px; dans floatRight sachant que float:right te positionne déjà l'élément à droite ?
le code suivant donne de meilleurs résultats mais pour bien faire il faudrait utiliser des div
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-language" content="fr" />
<meta name="language" content="fr" />
<title>Alignement</title>
<style>
body {
background-color: #363636;
color: white;
font-size: large;
font-family: "Century Gothic", Verdana, "Trebuchet MS", "Comic Sans MS", Georgia, serif;
text-align: center;
}
.floatleft{
float: left;
padding: 2%;
margin-bottom: 10px;
margin-right: 0px;
width: 234px;
height: 156px;
}
.floatright{
float: right;
padding: 2%;
margin-bottom: 10px;
width: 228px;
height: 156px;
}
</style>
</head>
<body>
<p>
<img src="http://nomdemonsite.free.fr/image/titre.bmp" alt="titre">
<img src="http://nomdemonsite.free.fr/images/menu.jpg" alt="Menu">
</p>
<img class="floatleft" src="small/desert.jpg" alt="Rallye">
<img class="floatright" src="small/building.jpg" alt="Concert">
<p>
Bienvenue chez ... (mon texte) :<br />
Des ... (encore du texte)<br />
Du ... (texte;)<br />
Une... (encore du texte)<br />
Un ... (et du texte;)<br />
</p>
</body>
</html>